Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
#foo {
margin-left: 175px;
}
</style>
</head>
<body>
<div id="foo">
<form>
<fieldset>
<legend>Contact Information</legend>
Name<br>
<input type="text" name="name" value=""><br>
Email Address<br>
<input type="text" name="email" value=""><br>
Phone Number<br>
(<input type="text" name="phone1" value="" size="3">) <input
type="text" name="phone2" value="" size="3">–<input
type="text" name="phone3" value="" size="4">, ext. <input
type="text" name="phone4" value="" size="4">
</fieldset>
</form>
</div>
</body>
</html>
Naturally, you would expect the code to render something like:
Name
[_______________]
Email Address
[_______________]
Phone Number
([____]) [____]-[______]
Alas, it doesn't ... IE renders it thus:
Name
[_______________]
Email Address
[_______________]
Phone Number
([____]) [____]-[______]
Of course, the space in front of the two inputs is exactly equal to the
margin-left#fooSilly enough, the anonymous text elements are unaffected.
Changing the
#foo
#foo {
margin-left: 175px;
zoom: 1;
}
[edited by: DrDoc at 2:06 am (utc) on Mar. 22, 2008]
It looks like the 175 margin is being applied to the division in your code and then again to the boxes again withing the division but not applied to the text?
Doesn't seem to be following the rules properly to me?
It looks like the 175 margin is being applied to the division in your code and then again to the boxes again withing the division but not applied to the text?Doesn't seem to be following the rules properly to me?
Exactly ... It's one of those IE bugs.
meant I had to give in [webmasterworld.com] and put the hasLayout trigger in my favourite templates for the "just in case" scenarios.
it gets worse too if more ancestor elements have margins then the form elements will inherit the sum of them all and all the ancestors with margins need the fix :o
also note the your last row of inputs are not affected.. due to the "(" before the first one ..
