homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Absolute Elements 10px shorter in IE browsers

10+ Year Member

Msg#: 3484498 posted 11:54 pm on Oct 22, 2007 (gmt 0)

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


JAB Creations

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

Msg#: 3484498 posted 5:22 am on Oct 23, 2007 (gmt 0)

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


WebmasterWorld Senior Member 10+ Year Member

Msg#: 3484498 posted 5:36 am on Oct 23, 2007 (gmt 0)


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 */



10+ Year Member

Msg#: 3484498 posted 5:46 am on Oct 23, 2007 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved