problem with background in IE when using frame forwarding

Posted on 2012-08-26
Last Modified: 2012-08-28
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, and the client's domain is

I used the forwarding service to set it up so every request for is forwarded to

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, buth FF and IE show it just fine as well.
BUT, if I go to, 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=""></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. :)
Question by:DirkVerdonck
    LVL 16

    Expert Comment

    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.

    Author Comment

    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.
    LVL 16

    Expert Comment

    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.

    Author Comment

    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.
    LVL 16

    Expert Comment

    Can you provide a publicly accessible link?

    Another set of "eyes" sometimes helps

    Author Comment

    I'd rather not post the urls here.
    Could you send me an email on
    I'll send you the url's then.
    LVL 16

    Accepted Solution


    In keeping with EE rules, any fix/solution will be posted back here (with URLs removed).

    Author Comment

    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.
    LVL 16

    Expert Comment

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now