Forum Moderators: not2easy
My problem is that in IE6 it pushes the #leftnavigation DIV to the right, for some unknown reason. It works how I want it to in Mozilla and Opera 7, but won't work in IE6 (unsure about other browsers). I've validated my CSS and XHTML, so there's not a problem there.
Is this an IE6 related bug (and if so, is there a workaround?) , or is there something wrong with my CSS? Any thoughts?
(Also, this is my first post. Um, yay?)
[edited by: tedster at 1:57 am (utc) on Jan. 27, 2004]
[edit reason] remove link [/edit]
you shouldn't really post urls in the threads we like bits of code so people can refer to them later. ;)
Someone else just asked this same question, and yes it's an IE thing/Bug.
I'll post a small code example for others too but the solution depends on whether you can use widths on your layout or not.
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
#header, #footer {
background: #ffc;
color: #000;
}#wrapper {
position: relative;
background: #000;
width: 100%;
}/* hide from mac \*/
* html #wrapper {height: 1%;}
/* end hide */#content {
margin: 0 140px;
background: #fff;
}#left {
position: absolute;
top: 0;
left: 0;
width: 140px;
background: #cfc;
}#right {
position: absolute;
top: 0;
right: 0;
width: 140px;
background: #cfc;
}</style>
</head>
<body>
<div id="header">Header text</div>
<div id="wrapper">
<div id="left">left nav</div>
<div id="content">content</div>
<div id="right">right</div>
</div>
<div id="footer">footer text</div>
The trigger is relative positioning on the wrapper, IE whatever its reasons (Box Model stuff) then takes into account the margins set on the static (default) element within it which the margins on the content area trigger.
Solution:
Give the relatively positioned container block an explicit width or height.
I've bolded the 2 x bits in the code it's an either/or situation whichever suits your layout better!
If width: 100% (which is the most obvious fix) doesn't suit you can hack in a small ~ 1% will do ~ height.
Suzy
Anyway, thanks Tommy and Suzy - it now works like a treat. :)
