Fix for IE6

My site is fine in Firefox an IE7 but It has problems with IE6.




Part of my css:

/* CONTAINS EVERYTHING BELOW HEADER AND HORIZONTAL NAVIGATION */
#container {
	overflow: hidden;
	float: left;
	width: 921px;
	margin: 0;
	padding: 10px 10px 0 10px;
	background: #f7f7f7;
	}

/* CONTAINS MAIN CONTENT */
#content, #home {
	float: left;
	margin: 0;
	}
#content {
	width: 711px;
	padding: 10px 0;
	}
#home {
	width: 711px;
	}


/* HOME CATEGORY TABS (also see tabs section at bottom of stylesheet) */
#home #home-categories {
	clear: left;
	float: left;
	display: block;
	width: 710px;
	margin: 0 0 10px 0;
	}

/* EVERYTHING BELOW THE FEATURE */
#home #home-bottom {
	width: 700px;
	clear: left;
	float: left;
	margin: 0;
	padding: 0;
	}
#home #home-bottom .block-left { float: left; width: 200px; }
#home #home-bottom .block-right { float: left; width: 490px; margin-left: 10px; }

/* EXCERPTS ON THE EXCERPTS STYLE LAYOUT */
.excerpts {
	margin: 0;
	padding: 0;
	float: left;
	width: 711px;
	}
.excerpts .post {
	overflow: hidden;
	float: left;
	clear: left;
	display: block;
	width: 693px;
	margin: 0 0 10px 0;
	padding: 5px 11px 5px 3px;
	background: #fff;
	border: 1px solid #ccc;
	}
.excerpts .post h3 {
	float: left;
	display: block;
	margin: 0 5px 0 4px;
	padding: 0;
	}
.excerpts .post .entry {
	display: block;
	clear: left;
	width: 100%;
	padding: 0;
	margin: -10px 10px 0 6px;
	}
.excerpts img { margin: 5px 17px 10px 0; }
.excerpts .post .entry p { padding: 0; margin: 10px 0; }

HTML:

Hope the problem is inside.

My site is uncp.22web.net

Thanks

 

you may need to use internet explorer css hacks

 

no one should ever use ie6, its highly exploitable

 

Tough. People use IE6. We either build for it or we ignore those stuck behind older machines, public computers, or whatever.

It looks like float drop. It seems that IE6 thinks there isn't enough room for the class.recent to fit, so it drops it down. I didn't check in IE7... lemme check...k, IE7 is fine is it could very well be the double margin bug hitting you. The only display: inlines on floats that I saw were for navigation etc.

Double check the widths of the containers (including padding, borders, margins) and make sure that everything inside (.block-left, .recent. and sidebar) fit inside home (or home-bottom or whatever it is). It seems that they just barely fit: container is 921px, inside is home-bottom is 711px and that leaves 210px leftover, which sidebar uses (width: 200px plus 10px margin on one side). So it just barely fits, and for IE6, that's not enough. I don't think you have 3-pixel jog cause it looks like everything and his brother is floated left, but you may well have double-margin bug, where IE6 sees more than one float and doubles the margins on at least one of them. Floats are display:block by default so every normal modern browser will ignore "display: inline" added after a float, but for some reason IE6 sees it and removes the double margins. Weird.

#content, #home {
    float: left;
    margin: 0;
    display: inline;
    }
sidebar {
  float: left;
  display: inline;
etc...
}

Code (markup):

Though I don't see anything called #content anywhere in the HTML. Templates, ew.

 

Thanks Stomme poes