Page 1 of 1

[solved] IE6 failing to load divs

Posted: Wed Jan 24, 2007 5:33 am
by Skittlewidth
I've got a strange issue with a layout that validates fine, displays correctly in Firefox, Opera and IE7 but not in IE6.
Well actually if you refresh the page enough times it works in IE6 too, but only every 10th refresh or so.

The site is at http://hillreed.ib3connect.co.uk/ (click on any link except "about" if you want a page with out a stupid flash video/animation)

If you look at it in IE7 or any other browser you should see a red curved header with the Hillreed Logo. I've put borders on so you can see the boxes.
Look in IE6 and you might see the same thing, but more than likely the curved header and logo will have gone and the background image will show through from the header container div (bounded in green).

The rest of the layout displays pretty much correctly.

I've watched the status bar and I've seen it "downloading topcurve.gif" but it doesn't display. I've messed around with z-indexs a bit but so far no joy. I just don't understand how it can occaisonally work, but mostly not!

Here's the relevant bit of css:

Code: Select all

#topbar {
	position: relative;
	height: 163px;
	border: 1px solid #00CC33;
	z-index:0;
	background-repeat: repeat-x;
	background-position:center;
	
}

#header_logo{
	margin-top:14px;
	margin-left:18px;
	width: 170px;
	height:60px;
	background-image:url(images/layout/hillreed_logo.gif);
	background-repeat:no-repeat;
	border: 1px solid #000;
	z-index:4;
}

#headerleft{
	position:absolute;
	width:768px;
	height:162px;
	background-image:url(images/layout/topcurve.gif);
	left: 0;
	top: 0;
	border: 1px solid #000;
	z-index:2;

}

#headerright{
	width:100%;
	height:162px;
	background-image:url(images/layout/topfiller.gif);
	
	float:left;
	
}

.printlink{
	position:absolute; 
	top:40px; 
	text-align:right; 
	left:750px; 
	width:190px;
}

.printlink img{
	margin-bottom:-2px;
}

Posted: Wed Jan 24, 2007 5:40 am
by Skittlewidth
Isn't that always the way? Post and then solve the problem yourself.

I've diagnosed the problem and its with the #headerright box, which is set to display to 100% to fill the rest of the gap (until two days ago this was a stretching layout) and setting that to anything below 99.6% makes the disappearing box reappear consistently.

Hopefully fixing the width of #headerright in pixels will make IE6 behave.