• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 759
  • Last Modified:

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 :

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">
<frameset rows="*,0" >
<frame noresize="" src="www.mydomain.com/clients/myclient"></frame>

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. :)
  • 5
  • 4
1 Solution
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.
DirkVerdonckAuthor Commented:
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.
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.
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

DirkVerdonckAuthor Commented:
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.
Can you provide a publicly accessible link?

Another set of "eyes" sometimes helps
DirkVerdonckAuthor Commented:
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.

In keeping with EE rules, any fix/solution will be posted back here (with URLs removed).
DirkVerdonckAuthor Commented:
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 :

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


<body min-width="600px">  

Open in new window

instead of putting the styling code in a css file next to this html file.
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.

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now