Jump to content

problem with textbox width in IE


zeroxp

Recommended Posts

:) the following page appears differently in IE and FF.
<html><head><title>Input Width</title></head><body><div style="height:200px; width:25%; background-color:#8cc; color:#000;"><table cellpadding="0" cellspacing="0" border="0" style="width:100%;"><tr><td style="padding-left:10px; padding-right:10px;"><input style="width:100%;" value="1234567890 2234567890 3234567890 4234567890 5234567890 6234567890"/></td></tr><tr><td style="padding-left:10px; padding-right:10px;"><input style="width:100%;"/></td></tr></table><div style="padding-left:10px; padding-right:10px;"><input style="width:100%;" value="1234567890 2234567890 3234567890 4234567890 5234567890 6234567890"/></div><div style="padding-left:10px; padding-right:10px;"><input style="width:100%;"/></div></div></body></html>

the problem is the 'input' inside 'td' trying to display all contents in IE. at first i thought it was because IE cant render percentage width correctly, but it works fine when the 'input' inside 'div'.is there any logic behinde this behavior? and is there a work around for percentage width for textbox?Thanks

Link to comment
Share on other sites

Strange, yes. I tried with IE7 and FF and it seems to be not just inputs but a more general problem of how an outer div is rendered when an inner object is wider than it. Using the example below, I found that both IE7 and FF rendered the inner div to its full width; however, IE7 also extended the outer div's background colour, whereas FF did not.

<html><head><title>Input Width</title></head><body><div style="height:200px; width:100px; background-color:#8cc; color:#000;">	<div style="width:800px">1234567890 2234567890 3234567890 4234567890 5234567890 6234567890	</div></div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...