Prevent Text Input expanding in IE
- by Caroline
Hi,
I am having a problem with an input field in IE. The code is for a portlet and widths need to be dynamic as the user can place the portlet on any of the three columns in the page which all have different widths. As always it works fine in FF but not in IE. In order to make the width dyanaic I have set width="100%". Data to populate the text input comes from a DB. When the page is rendered if there is a long URL the text input expands to fill the contents in IE but in FF it just stays the same width (ie 100% of the TD that it lives in). How can I stop IE from changing the width in order to fit the contents. Setting the width to a fixed width of 100px fixes the issue but I need to have the width as a percentage in order to accommodate the layout of the portlet wherever it is put in on the page.
I have tried overflow:hidden and word-wrap:break-word but I cant get either to work. Here is my input code and style sheets
<td class="right" >
<input type="text" class="validate[custom[url]]" value="" id="linkText" name="communicationLink" maxlength="500" maxsize="100" />
</td>
.ofCommunicationsAdmin input {
font-family: "Trebuchet MS";
font-size: 11px;
font-weight:normal;
color:#333333;
overflow:hidden;
}
.ofCommunicationsAdmin #linkText {
overflow:hidden;
width:100%;
border:1px
#cccccc solid;
background:#F4F7ED
top repeat-x;
}
.ofCommunicationsAdmin td.right {
vertical-align: top;
text-align: left;
}
