header image ->phantom background image IE8 2

jlockley · Aug 29, 2009

After starting out with a messy page and promising to clean it up for a friend, I am at an impasse.
The page

http://www.greenrestaurantstrategies.com/textindex.html

shows well for this stage in FF and on first loading in IE8 (which MS installed when I wasn't looking) and I believe IE7, but the progress bar shows that the background image, bkgd.jpg, is loading. This takes a bit. When this is finished a magnified, non transparent copy of the header image, header.png takes populates the top of the page. Here:

http://www.greentrestaurantstrategies.com/grsfailure.jpg

at its worst and a modified version but still there in

http://www.greenrestaurantstrategies.com/grsgailure2.jpg

So, IE8 is mistaking the header image for the background, and I can't figure it out. I have been ripping out and altering css as I go.both css and html quoted in the next comment box.

I can't find anything about this in search, so I assume it isn't an IE8 bug. I can't figure out what I am doing to confuse the browser. This happens on two different units, so it's not a unique issue.

Insights?
Please excuse the awkward white space..I am trying to create a work around. I also know that the actual background image is quite large.

jlockley · Aug 29, 2009

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Green Restaurant Strategies </title>
<link rel="stylesheet" type="text/css" href="grs.css" />

</head>

<body>

<div id="wrapper">
<div id="header">
<img src="images/header.png" width="900" height="92" alt="Green Restaurant Strategies. A hospitality sustainability consultancy" />
</div>

</div>
<div id="centerbox">

<p class="three"> 85% of the public either think "green" or are "true green" </p>
<p class="four"> .....Do you want them as your customers?</p>

<p class="two">
Green practices are good for the environment and your<br />
business by attracting customers in the short term and <br/>          benefiting your bottom line through energy <br />               savings in the long term.
<br /><br />

                      Green Restaurant Strategies develops and
<br/>   
                  implements sustainable practice strategies for
<br/>                      new properties and assists existing businesses in
<br/>                  determining, developing and managing suitable
<br/>          and realistic sustainability procedures for each
<br/> unique situation, allowing you to focus on your guests,<br />
staff and sales.</p>
</div>

<div id="footer">

<img src="images/footer.png" width="900" height="55" alt="footer email howard at green restaurant strategies dot com" />

</div>

</body>
</html>

CSS

BODY {
overflow:hidden;
background-color : #FFFFFF;
background-image: url(images/bkgd.jpg);
background-repeat: no-repeat;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #669966;
margin: 0;
padding:0;
}

#header {
border-bottom: .05em hidden;
top:auto;
width:98%;
height:auto;
z-index:1;
margin-left: auto;
margin-right: auto;

clear:both;
}
#links
{
margin-top: 8em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
color: #000000;
width: 98%;
}

#wrapper {
border-bottom: .05em hidden;
border-top: .05em hidden;
width: auto;
margin-right: auto;
margin-left: auto;
background-image: url('/bkgd.jpg');
clear:both;
border-top: .05em hidden;
}

#centerbox

{
border-bottom: .05em hidden;
border-top: .05em hidden;
font-size:1em;
float: left;
padding-top: 5em;

color:#666666;
font-family: corbel, tahoma, ariel, sans-serif;
width: 78%;
overflow:hidden;
}
#sidebar
{
border-bottom: .05em hidden;
border-top: .05em hidden;
float:right;
margin-left:auto;
margin-right:auto;
height: 501px;/*500px*/
clear:both;
width:20%;
}
#footer {

padding-top:8em;
width:auto;
height:auto;
z-index:6;
clear: both;
border-top-width: medium;
border-top-style: none;
border-top-color: #024A1A;
}
p.toplinks
{
font-size: 16px

}
a:visited {
color: #C7B779;
}
a:link {
color: #333333;
}
a:hover {
color: #009900;
}

div.image-envelope
{
border-bottom: .05em hidden;
border-top: .05em hidden;
float:left;
width: 160px;
height:100%;
margin-top:1px;
margin-left:1px;
clear:both;
}
img.upper
{
border-bottom: .05em hidden;
border-top: .05em hidden;
position:absolute;
float: left;
margin-top: 1px;
margin-left: 2px ;
clear:right;
}
img.lower
{
border-bottom: .05em hidden;
border-top: .05em hidden;
float:left;
position: absolute;
margin-left: 2px;
margin-top: 345px;
clear:left;
}

p.toplinks
{
font-size: 16px

}
a:visited {
color: #C7B779;
}
a:link {
color: #333333;
}
a:hover {
color: #009900;
}

p.one
{
margin-left: 4em;
font-weight:600;
font-size: 1.2em;
}
p.two
{padding-left: 12em;
font-size: 1.3em;
font-weight: 600;
}
p.three
{
padding-left: 9em;
font-size:1.4em;
color:#006633;
margin-top: 0.01em;
margin-bottom: 0.01em;
font-weight: 500;
}
p.four
{
padding-right: 0;
padding-left:9em;
font-size:1.4em;
color: #006633;
margin-top: 0.2em;
margin-bottom: 0.2em;
font-weight: 500;
}

audiopro · Aug 29, 2009

Your test page is .....testindex.htm not .....textindex.htm
Your background image is 4778px x 4004px and over 13 meg.

The time it takes to load should have given you a bit of a clue.

Keith

http://www.studiosoft.co.uk

BillyRayPreachersSon · Aug 29, 2009

Can you post a working URL? None of the 3 URLs you've posted work at all.

You do realise, that you're loading 2 different copies of the background image in? Perhaps that's the confusion?

I suggest working out how many background images you need, fixing that piece of code, reducing the size of the images to what you actually need (not almost 5000x4000px - which takes a long time to download and debug), and posting a URL to a single page that shows the problem.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

jlockley · Aug 29, 2009

type. Yes, I mentioned that above. Needs a workaround, but the background image loads fine. What doesn't load well is the header image.

jlockley · Aug 29, 2009

You do realise, that you're loading 2 different copies of the background image in?

No. I didn't. I actually looked for it, and didn't see it. That's got to be it. Dumb. Can't blame the originator for that..that was mine alone.
sorry for the typos. The correct page is

http://www.greenrestaurantstrategies.com/testindex.html

big failure is

http://www.greenrestaurantstrategies.com/grsfail1.jpg

smaller fail is

http://www.greenrestaurantstrategies.com/grsfail2.jpg

Many thanks.

jlockley · Aug 29, 2009

It was definitely the cause. Can't figure out how I missed it a few hundred times. thanks for the point on the bkgd.jpg..Thought I'd uploaded a smaller version. I will shrink that one tomorrow. It needs tweaking, anyway.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

header image ->phantom background image IE8 2

jlockley

Technical User

jlockley

Technical User

audiopro

Programmer

BillyRayPreachersSon

Programmer

jlockley

Technical User

jlockley

Technical User

jlockley

Technical User

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

header image -&gt;phantom background image IE8 2

jlockley

Technical User

jlockley

Technical User

audiopro

Programmer

BillyRayPreachersSon

Programmer

jlockley

Technical User

jlockley

Technical User

jlockley

Technical User

Similar threads

Log in

Part and Inventory Search

Sponsor

header image ->phantom background image IE8 2