asked on

problem with background in IE when using frame forwarding

I'm developing a small website for a client.
nothing fancy, just some html and css and a few images, so I thought I'd put the files on my own website and use the frame forwarding of the registrar I used to buy the domain name to point requests to the files on my site.

say my site is www.mydomain.com, and the client's domain is www.myclientsdomain.com.

I used the forwarding service to set it up so every request for www.myclientsdomain.com is forwarded to www.mydomain.com/clients/myclient/

it works just fine, except for one thing: the background disappears when viewing it in IE.

If I open the files locally with the browser, both FF and IE show the background, no problem.
If I access www.mydomain.com/clients/myclient/index.html, buth FF and IE show it just fine as well.
BUT, if I go to www.myclientsdomain.com, FF shows the background correctly, and IE gives me a WHITE background.

This is the CSS I used :

body
{
background: #f2f6f7;
background-image: url("../graphics/bg1.png"), url("../graphics/bg2.png");
background-repeat: repeat-x, repeat;
}

Open in new window

I noticed that the registering company put some HTML around my code as a result of the frame forwarding, so that must be the problem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<frameset rows="*,0" >
<frame noresize="" src="www.mydomain.com/clients/myclient"></frame>
</frameset>
</html>

Open in new window

but then why does FF show the background like I intented, and only IE has the problem?

I've used firebug to check out the style associated with the body tag, and the css is there.
In IE I've used IE Webdeveloper to check it, and the style is where I expect it.

So it seems the frame around it blocks the background, and only in IE.
Problem is also I don't have any influence on the frameset-frame code that is being put around my code, I can only edit my own HTML and CSS.

Is there a way to get the right background displayed?
If not, I'll have to buy a hosting package anyway so the need for frame forwarding is no longer there. But this seems a rather radical solution, and not so cost effective. :)

Graham N.

IE will not display the background CSS syntax you have used:

background-image: url("../graphics/bg1.png"), url("../graphics/bg2.png");

IE will happily handle a single image.

Additionally, you are referencing a folder a level above where your frame has landed (the ../) - try using the full URL to assist the browser find the image.

The URL would be to your domain - not the clients domain.

DirkVerdonck

ASKER

thanks graham, but this is not the solution. I've tried referencing the full url on my site, to no avail.

I really think it's got something to do with the frame somehow "blocking" the background of the body within the frame.

Graham N.

Try setting up a container <DIV> for the entire page:

<div style="width:100%; height:100%;">

It could be that because IE is inside a frame (which is defined as noresize by the original call) that it can not determine the page width and height at load time.

Then place an "onLoad" event to resize the container <div> to the actual width and and height of the page with its content.

Alternatively, you could apply the background styling to the container <div> as part of the onload function.

DirkVerdonck

ASKER

still no luck.
I did as you suggested. Upon inspection the DIV has the correct style with the background features in place, only IE doesn't show the background.

Graham N.

Can you provide a publicly accessible link?

Another set of "eyes" sometimes helps

DirkVerdonck

ASKER

I'd rather not post the urls here.
Could you send me an email on dirk.verdonck@telenet.be
I'll send you the url's then.
thanks

ASKER CERTIFIED SOLUTION

Graham N.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

DirkVerdonck

ASKER

thank you ever so much, graham. I found the solution. And it wasn't a question of the frame forwarding blocking some style, I think it was an IE 'feature'.

The problem was that if I put the background style in a separate CSS file, FF accepted it but IE didn't.
After I included the style for the body tag in the html everything worked.
One remark though, graham, even IE displays the two background pictures combined when I use this style. In your first reply to my question you stated it wouldn't.

But apart from that you really set me on the right track to solving this, so many thanks!!

so now my code is :

.....
<head>
<style>
body { font:normal .80em arial, sans-serif; color: #555555;  background: #f2f6f7 url(./graphics/bg2.png) url(./graphics/bg1.png) repeat; }
</style>

</head>

<body min-width="600px">  
......

Open in new window

instead of putting the styling code in a css file next to this html file.

Graham N.

Dirk, on the IE dual image in background CSS tag, IE only supports two images with the same remaining characteristics, meaning repeat and positioning. So while you can reference 2 background images it would not have given you the "gradient" look you were trying to achieve. Hence my original comment regarding IE.

With IE9 (and IE10 on Windows 8) the support for newer CSS formatting is very much improved, but for the time being it is best to always test your websites in both IE8 and IE9 - as well as obviously FF and Safari.

Bottom-line, you got this working which is the main thing.