style=width:100% size based on inner content not outer tag (IE)

Question

nizuya 0 Light Poster

14 Years Ago

Basically this is what I have:

<div style="float:right; width:500px">
    <table width="100%">
        <tr>
            <td>Input Text:</td>
            <td><input name="textInput" type="text" value="<?=$phpVariable?>" style="width:100%" /></td>
        </tr>
    </table>
</div>

In every web browser besides IE what this does is make the width of the input field the full width of the column. However, in IE if the input value is longer than the width of the column the input field seems to then become 100% of the width of the value.

Check out my attachments to see what I'm talking about.

How do it fix this!?

Thanks,
David

web-browser web-design

Edited 14 Years Ago by nizuya because: n/a

2 Contributors
4 Replies
192 Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by nizuya

Phaelax 52 Practically a Posting Shark

14 Years Ago

Do you have a doctype set in your html?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

nizuya 0 Light Poster · Answer 1 · 2010-06-18T21:35:08+00:00

Yes,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

nizuya 0 Light Poster · Answer 2 · 2010-06-22T20:09:47+00:00

Bump.

Am I the only on with this problem? Should I post more detailed code?

Please help!
-David

nizuya 0 Light Poster · Answer 3 · 2010-06-22T21:53:11+00:00

Okay so I made a simplified page to see if I can get the same error.
This is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style>
#container {
	padding: 0px;
	margin: 0px auto 0px auto;
	width: 876px;
	display: block;
	background: #F00;
}
#sidebar {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 171px;
	min-height: 300px;
	background: #FF0;
}
#content {
	margin: 0 0 0 171px;
	padding: 40px 50px 18px 18px;
	min-height: 300px;
	background: #0FF;
	text-align: left;
}
</style>
</head>

<body>
<div id="container">
	<div id="sidebar">
		Stuff<br />
		Stuff
	</div>
	<div id="content">
		<table width="100%">
			<tr>
				<td width="100px">Input Text:</td>
				<td><input name="textInput" type="text" value="afsdhfkjashdfhasdlf ash fksjhdf kshdf skdfh klashf kshdfk hsfklshdk fjhasdiufyhsidufyi uy iuay iasy fiuyf ioasydf98sydf asdfiouy fa9s8yd fyh asiduf asdfsadfsa asdf aydsfgs dft fg" style="width:100%" /></td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>

See the attached pictures for results...

Note: If I open the html file on my local machine it works perfectly even in internet explorer. However, it's when I upload the file to my web server and open it across the internet that it errors.

Thanks for any help!