Absolute Elements 10px shorter in IE browsers

[Bluestreak]

I'm close to finishing the layout of my site which uses 3 columns. The 2 sidebars use absolute positioning with the CSS "top:166px" Looks good in Firefox, but it's short by 10px in IE6 and IE7. I have no idea why. Here's what I hope is the relevant CSS:

body {

background-color:#000000;
background-image:url("images/background.jpg");
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #fff;
margin:15px;
padding: 0px;
text-align:center;
background-repeat:repeat;
}

#page {
max-width:950px;
min-width:760px;
position:relative;
padding:5px;
margin:0 auto;
text-align:left;
border: 2px solid #3A3B43;
}

#left-sidebar, #right-sidebar {

top:166px;
font-size:8pt;
position:absolute;
}

If I add 10px so top:176px instead, it looks good in IE but then it's 10px too LONG in Firefox. I appreciate any suggestions that can at least point me in the right direction in solving this. :-)

[JAB Creations]

You could easily do this with a liquid layout though I have not tried it with three columns. Your three parent-most div elements should only have width and float attributes, background-color only for visual referencing. For padding inside the parent-most div elements simply give the first-child divs instead the parent-most divs margins.

If you can't use such a layout and you just need to fix IE you should highly consider conditional comments [msdn2.microsoft.com].

- John

[Marshall]

Bluestreak,

IMHO, the easiest solution would be to set your global defaults to zero because different browser clients have different settings, then set margins in the elements:

body {
margin: 0;
padding: 0;
}

#left-sidebar, #right-sidebar {
margin-top:166px;
font-size:8pt;
position:absolute; /* I suggest removing this and float the two elements */
}

Marshall

[Bluestreak]

Thanks for the response. I'm working on a design another developer made, and it would literally take me months to revamp it so that it would have the kind of layout you suggested. I actually resort to using a conditional comment, and it did what I needed. :-D

Always Microsoft too. Even Opera, Safari and Konqueror rendered it correctly. :-P