Forum Moderators: open
I have a problem with IE and input boxes...
If I have 100% width for that input box, it uses the container IF the value text is smaller then the space allocated, and the value width in pixels IF the text width is bigger then the allocated size.
Example:
The text field has around 100 pixels to play with, but when it contains the text "asfasdf sda fasfd asdf asdf adsf asdf ads", it gets at 300 pixels, instead of being 100px.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Help Me</title>
</head>
<body>
<div style="width:200px" id="bla">
<table width="100%" border="1" cellspacing="0" cellpadding="1">
<tr>
<td width="1%" nowrap="nowrap"><b>asdfasdfsad:</b></td>
<td width="100%"><input maxlength="128" style="width:100%; position:relative;" name="blabla" id="blabla" type="text" value="asdf sdgsdf gsdf gsdf sfdg sdfgsdfgsdfgsdfgsd sdf gsdfgdsf" /></td>
<td width="1%"><img src="/images/spacer.gif" width="4" height="4"></td>
</tr>
</table>
</div>
<div style="width:200px; background-color:#FF0000;">test</div>
</body>
</html>
Please help.
- Vali
But your percentage% widths do strike me as a bit strange... any browser is going to have to stretch and groan to produce what you are asking of it....(?) You want the width of the input box to be 100% of the <td>, which is 100% of the <table>, which is 100% of the containing DIV, which is 200px. FF does not honour this and instead produces something closer to 100px, as does Opera. Your first <td>, set at 1% width, is being forced to about 50 times this (approx 100px), so again, not the specified 1% (2px) width you give. 1% + 100% + 1% + border + padding = larger than your container.
Sorry, not an answer really, just my opinion - I too would be interested to hear another take on this, as I've seen similar things crop up a few times recently.
Thanks for your reply.
Basically I want this:
¦label:¦[input box]¦4px¦
1%¦100%¦1%
The first TD is expanded by the label.
The last one by the 4px spacer.
The middle one will try to be 200px (100%) but it's pushed in by the first and second td, making it stretch to however much space it has left.
The middle one needs to hold a textbox 100% of that td.
It works on all browsers but IE...
In IE, the 100% of the inpubox is 100% of the inputbox content, instead of 100% of the container (second td)
Hope this makes clear what I need.
Does anyone have any ideas on how I can achieve this?
