CSS input percentage width bug in IE

HTML & CSS
1

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

Why exactly can’t you have it set at a specific width rather than 100%?

Let us see the page.

3

Matt, what does your code look like?

4

The relevant bits are …


<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 :slight_smile:

5

Hi,

The problem is that the inputs are 100% 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:


.adTextBox { padding:2px ;width:100%;[B]margin:0 0 0 -1px;position:relative}[/B]

Or similarly like this:


.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.