Content never shows in IE6

[subnet_rx]

For some reason, my page's content will never show up in IE6. The images just appear to be downloading and never show up. I've tested the page in browsershots and it appears to work on all other browsers that we support. I'm not even sure where to begin to look for the problem.

Link

[webcosmo]

Lot of times IE fail to show content if its inside too many nested divs. Trying using a table for the content part.

[subnet_rx]

Well, I think if I could explain why it won't download the images (some in the HTML, some in the CSS), I'd be on my way to figuring out the problem. I have written some pretty nasty pages as far as nested divs are concerned and never had a problem. The base template that this page comes from has no problem in IE6. If I type in the url to the image directly, IE6 does not download it. Cutting and pasting the same url to any other browser on my machines works perfectly. I didn't use any png's on the page, these are all jpg images.

[Erik J]

For some reason, my page's content will never show up in IE6.
...

The #right_col is hidden behind the #container background due to the #main_content lack of hasLayout combined with position on #content. (Test to disable its background image.)

The #right_col is also dropped below the #leftnav. They both are growing the width to fit too big content.

The #container was set to (and limited to) 100% height, I guess you want a 100% page also when content shrinks.

To stop IE6 dropping and hiding the #right_col, and also get a min-100% page, try this settings:

html {
	height:100%; /* on both html and body makes the 100% min-height work */
	overflow-y:scroll; /* forcing scrollbar in FF and Safari to avoid sidejump */
}
#container {
	position:relative;
	background-image:url(../images/middle.gif);
	background-repeat:repeat-y;
	background-position:top;
	width:950px;
	min-height:100%;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:-75px; /* pull the footer up */
	font-size:90%;
}
* html #container {
	height:100%; /* IE6 min-height */
}
#main_content {
	position:relative;
	width:950px; /* trip hasLayout in IE */
	background-image:url("../images/middle.gif");
}
#right_col {
	float:left;
	width:740px;
	margin-left:2px;
	overflow:hidden; /* stop that too big content to grow the width in IE6 */
}
.divider {
	clear:both;
	height:75px; /* keep content from sliding under the footer */
}
#leftnav {
	float:left;
	width:190px;
	padding-left:10px;
	overflow:hidden; /* stop that too big content growing the width in IE6 */
}
#footer_container {
	position:relative; /* raising footer stacking higher than container */
	background-image:url(../images/footer1px.jpg);
	background-repeat:repeat-x;
	background-position:top;
	margin:0;
	padding:0;
	height:75px;
}

[subnet_rx]

Thanks for this reply. Content is now showing up in the correct place. The images still don't download, so I'm continuing to work on that. The images show up in every browser except IE6, so it's very tough to figure out.

[Centauri]

The images show up fine on my IE6 here.

[subnet_rx]

The images show up fine on my IE6 here.

Ok, thanks for letting me know. Maybe it's a problem with the Multiple IE application I use.

[Czaries]

In my experience, the "magic fix" for ie6 is almost always:

position: relative;

Just add it to the DIVs that are affected, or the parent of the DIVs that are affected, etc. and 90% of the time that will fix the problem. The other 10%... Well... Expect to spend hours upon hours troubleshooting the problem and not ever being able to bill for it.