Encountering an issue with handling input field widths in Internet Explorer. The code pertains to a portlet, requiring dynamic widths as the user can position it across three columns on the page with varying widths. While functionality is smooth in Firefox, there are discrepancies in IE. To enable dynamic width adjustments, I have set the width attribute to "100%". Text input data originates from a database. Upon rendering the page, lengthy URLs cause the text input in IE to expand accordingly, whereas in Firefox, it remains the same width, occupying 100% of the containing TD element. How can I prevent IE from automatically adjusting the width to accommodate content? Although setting a fixed width of 100px resolves the issue, maintaining a percentage-based width is crucial for adapting to different layouts where the portlet may be placed.
Attempts to resolve this issue using overflow:hidden and word-wrap: break-word have been unsuccessful. Here's the snippet of input code along with associated styles:
<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;
}