PDA

Click to See Complete Forum and Search --> : double margin bug in ie without floats!?

mikewse
09-13-2006, 05:33 PM
I have a really strange layout bug in a web page, that only appears in IE. An INPUT element inside a DIV is getting an extra left margin, the same as the parent DIV has been given.

It is as if the old "double margin on floats" was kicking in, but there are no floats in this layout! And it only affects the INPUT, not text or a SELECT within the same DIV...
I would really need some pointers on how to attack this.

Thanks / Mike

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>inputmargin.html</title>
</head>
<body>
<div style="width: 35em; background-color: blue;">
<div style="width: 20em; margin-left: 10em; background-color: green;">
This input gets an extra 10em margin:<br>
<input type="text">
<br>
But this dropdown doesn't:<br>
<select></select>
</div>
</div>
</body>
</html>
toicontien
09-13-2006, 05:53 PM
It's the width declaration in the inner DIV that triggers the bug. Once you give that DIV a width, it also sets the hasLayout DOM property to true in IE. When the DIV has layout, the input element seems to mirror the margin applied to it's parent's parent. Screwy. I've never run into this before. IE-Win never ceases to amaze me :)

I fixed the problem by removing the width and using left and right margins instead:

style="margin: 0 5em 0 10em; background-color: green;"

And make sure you don't trip the hasLayout property by including any of the following CSS properties:

width
height
zoom
display
position
float

---

And here's another screwy thing! If you adjust the width of the input element itself, the blue box expands and shrinks! I don't get it. The code below seems to have fixed it. Just avoid the CSS styles that trigger the bug:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>inputmargin.html</title>
</head>
<body>
<div style="width: 35em; background-color: blue;">
<div style="background-color: green; left: 10em; position: relative; width: 20em;">
This input gets an extra 10em margin:<br>
<input type="text">
<br>
But this dropdown doesn't:<br>
<select></select>
</div>
</div>
</body>
</html>
mikewse
09-14-2006, 11:32 AM
Thanks toicontien, interesting how hasLayout always pops up :-)
Unfortunately, I cannot avoid activating hasLayout, as I actually *need* it for fixing the 3px text-jog bug...!

You see, my complete layout has a floated label to the left of the problematic <div>, like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>inputmargin.html</title>
</head>
<body>
<div style="width: 35em; background-color: blue;">
<label style="float:left; width: 9em; background-color: red;">Label</label>
<div style="margin-left: 10em; width: 20em; background-color: green;">
This input gets an extra 10em margin:<br>
<input type="text">
<br>
But this dropdown doesn't:<br>
<select></select>
</div>
</div>
</body>
</html>
If I remove the width:20em, then the first line of text is indented by 3px...

Another person suggested to wrap the <input> in another element, and it seems to work with f ex <p>, <div>, and <span>.

Best regards
Mike
toicontien
09-14-2006, 12:50 PM
I ran into this problem before and I just didn't care :p I let IE-Win put in 3 pixels. As long as it doesn't break the layout, I left that bug alone. If a user asks me what the problem is, I'll tell them it's a bug in the browser, point them to the position is everything article about it (http://www.positioniseverything.net/explorer/threepxtest.html), and move on with my life. There's only so much I'm willing to do for buggy browsers when the bug doesn't break the layout or funcionality of the page.
mikewse
09-14-2006, 05:58 PM
I see your point toicontien ;-)
Thanks for the help
Best regards
Mike