homepage Welcome to WebmasterWorld Guest from 54.196.198.213
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Absolute Elements 10px shorter in IE browsers
Bluestreak




msg:3484500
 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 {

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




msg:3484703
 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

Marshall




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

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




msg:3484708
 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved