SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS input percentage width bug in IE

    Hi,

    I've come across a nasty IE problem whereby input text elements set with a width of 100% in CSS resize to the width of the content rather than the container resulting in pages being thrown madly out of line of the contents of the box is wider than the containing object.

    This problem appears to be well documented. However, I've not seen anyone come up with a solution beyond populating the box with Javascript after the page load. Is there a stylesheet/XHTML based solution to this?

    Cheers,
    Matt

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why exactly can't you have it set at a specific width rather than 100%?

    Let us see the page.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Matt, what does your code look like?

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The relevant bits are ...

    HTML Code:
    <style>
    .labelText { font-size: 11px; text-align: right; padding-top:4px; padding-right:10px;}
    .adText { font-size: 12px; font-weight: bold;}
    .adTextBox { paddding: 2px; width: 100% }
    </style>
    
    <table cellpadding="0" cellspacing="0" width="100%">
    	<tr>
    		<td valign="top" class="labelText" width="80">Email/URL</td>
    		<td valign="top">
            <input type="text" class="adTextBox" name="adContactURL" id="adContactURL" onChange="markUpdated()" value="<%=adContactUrl%>">
            </td>
    	</tr>
    	<tr>
    		<td valign="top" class="labelText">Contact</td>
    		<td valign="top"><input type="text" class="adTextBox" name="adContactName" onChange="markUpdated()" value="<%= adContactName %>" ></td>
    	</tr>
    	<tr>
    		<td valign="top" class="labelText">Phone</td>
    		<td valign="top"><input type="text" class="adTextBox" name="adContactPhone" onChange="markUpdated()" value="<%= adContactPhone %>" ></td>
    	</tr>
    	<tr>
    		<td valign="top" class="labelText">Fax</td>
    		<td valign="top"><input type="text" class="adTextBox" name="adContactFax" onChange="markUpdated()" value="<%= adContactFax %>" ></td>
    	</tr>
    	<tr>
    		<td valign="top" class="labelText">Address</td>
    		<td valign="top"><input type="text" class="adTextBox" name="adContactAddress" id="adContactAddress" onChange="markUpdated()"></td>
    	</tr>
    	<tr>
    		<td valign="top" class="labelText">Postcode</td>
    		<td valign="top"><input type="text" class="adTextBox" name="adContactPostcode" onChange="markUpdated()" value="<%= adContactPostcode %>" ></td>
    	</tr>
    	<tr><td colspan=2 height=20></td></tr>
    	</table>
    I know this is committing the dread sin of using tables for layout, but it's legacy code and I didn't write it, so bear with me

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,477
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The problem is that the inputs are 100&#37; width and therefore adding any padding or borders will add to that width and make it too big (unlike selects which use the broken box model and contain the borders in the specified width).

    As inputs already have borders defined then they are already too big. You therefore have three choices:

    1) Specify a 98% width instead and allow enough room for the padding an borders to be soaked up.

    2) Trip quirks mode using a partial doctype or comments above the doctype.

    3) Offset the difference.

    The last option is that one that I would prefer and I would simply drag the inputs back into view like this:

    Code:
    .adTextBox { padding:2px ;width:100%;margin:0 0 0 -1px;position:relative}
    Or similarly like this:

    Code:
    .adTextBox { padding:2px ;width:100%;left:-1px;position:relative}
    As long as you have some space on the left of the input then this should be no problem. You can give the code to only IE using conditional comments but I don't really see the point. You will have to increase the negative amount depending on how much padding you are adding.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •