homepage Welcome to WebmasterWorld Guest from 23.22.97.26
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, Moderator: open

CSS Forum

    
IE6 text droping down
ddregallo




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




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




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