homepage Welcome to WebmasterWorld Guest from 54.237.213.31
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE6 text droping down
ddregallo

5+ Year Member



 
Msg#: 3241548 posted 5:19 am on Feb 3, 2007 (gmt 0)

I've made a simple 2 columns with header css layout. It looks very good in IE7 and Firefox. In IE6 the content area's text and such "drops down" as if I had set clear left(but I didn't). The relavent portion of my CSS is below. Any ideas?

#body {
font-family: Verdana, Helvetica, arial, serif;
background-color: #fff;
margin: 0;
padding: 0;
}

#container {
width: 800px;
margin: 0 auto;
padding: 0;
background-color: #fff;
border: 1px solid gray;
}

#header {
width: 800px;
height: 70px;
background-image: url(bgimg.jpg)
background-color: #fff;
}

#content {
width: 640px;
margin: 0 0 0 150px;
padding: 5px;
text-align: left;
}

#leftbar {
float: left;
width: 150px;
margin: 0;
background-color: #EFEFDE;
}

</dan>

 

Setek

5+ Year Member



 
Msg#: 3241548 posted 2:49 am on Feb 5, 2007 (gmt 0)

Your total width of "leftbar" plus content area turns out to be exactly 800px. The total width of the container area is 800px. This is what's called a "pixel-perfect" layout - which all too often will break in one, if not all, browsers.

IE 6 doesn't like to have things too close to one another. Usually when you approach the maximum allowable space, it just bumps stuff down to where it sees fit.

Remove the width on the content area - if you have a fixed width container, the content area will take up what it can (800px minus leeway minus 150px) and hopefully not bump down.

ddregallo

5+ Year Member



 
Msg#: 3241548 posted 7:16 am on Feb 5, 2007 (gmt 0)

Thanks for the reply. I managed to make it work even with the width on the content area, but it was ugly(negative margins). I removed the width from #content and it works fine now without the negative margin hacks!

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