Prevent Text Input expanding in IE

Posted by Caroline on Stack Overflow See other posts from Stack Overflow or by Caroline
Published on 2009-11-11T15:53:26Z Indexed on 2010/05/24 22:11 UTC
Read the original article Hit count: 265

Filed under:
|
|
|
|

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;   
}

© Stack Overflow or respective owner

Related posts about html

Related posts about css