Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Absolute Elements 10px shorter in IE browsers

11:54 pm on Oct 22, 2007 (gmt 0)

10+ Year Member

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 {

font-family:Verdana, Arial, Helvetica, sans-serif;
color: #fff;
padding: 0px;

#page {
margin:0 auto;
border: 2px solid #3A3B43;

#left-sidebar, #right-sidebar {


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. :-)

5:22 am on Oct 23, 2007 (gmt 0)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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

5:36 am on Oct 23, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


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 {
position:absolute; /* I suggest removing this and float the two elements */


5:46 am on Oct 23, 2007 (gmt 0)

10+ Year Member

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