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;
}