Skip navigation
david van bambost
Currently Being Moderated

Background image not showing in IE9

Jan 9, 2012 5:52 AM

Tags: #cs5 #image #9 #internet #explorer #dreamweaver_cs5 #background_image



I'm building a website using DW CS5.


The background images are coded directly into the pages (through a template).

In Internet Explorer 9 (under Windows 7) these background images aren't displayed or are displayed incorrectly.

I insert a screendump of the problem, notice the white where the background should continu.


Could anybody please help me out on this?


Thanks a lot in advance!




Schermafbeelding 2012-01-09 om 14.48.08.pngin Internet Explorer 9


Schermafbeelding 2012-01-09 om 14.49.19.pngin Firefox


This is the code of this page:




<!-- TemplateBeginEditable name="doctitle" -->


<!-- TemplateEndEditable -->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- TemplateBeginEditable name="head" -->

<!-- TemplateEndEditable -->

<link href="../public_html/test/css/style.css" rel="stylesheet" type="text/css">


<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<!-- Save for Web Slices (120105_website_allekaders.psd) -->

<table width="892" height="609" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">


        <td rowspan="2" align="left" valign="top"><!-- #BeginLibraryItem "/public_html/Library/navigatie.lbi" --><img src="../public_html/test/images/navigatie_vervolg.gif" alt="" width="261" height="444" border="0" usemap="#Map" />



<map name="Map">

  <area shape="rect" coords="85,195,166,217" href="#" target="_parent" alt="trantz">

  <area shape="rect" coords="91,218,228,238" href="#" target="_parent" alt="studiegebieden">

  <area shape="rect" coords="87,238,209,258" href="" target="_parent" alt="watistrantz">

  <area shape="rect" coords="94,259,208,277" href="#" target="_parent" alt="schooliscool">

  <area shape="rect" coords="91,280,223,298" href="" target="_parent" alt="readytochange">

  <area shape="rect" coords="84,302,178,318" href="#" target="_parent" alt="kalender">

  <area shape="rect" coords="90,320,169,339" href="#" target="_parent" alt="playtime">

  <area shape="rect" coords="89,340,206,359" href="#" target="_parent" alt="trailer">

  <area shape="rect" coords="89,360,186,379" href="#" target="_parent" alt="informatie">

  <area shape="rect" coords="82,380,247,402" href="#" target="_parent" alt="listen">

  <area shape="rect" coords="81,402,171,419" href="#" target="_parent" alt="bedankt">

  <area shape="rect" coords="89,422,180,441" href="#" target="_parent" alt="facebook">

</map><!-- #EndLibraryItem --></td>

        <td colspan="3" align="left" valign="top">

            <img src="../public_html/test/images/readytochange/ready_02.gif" width="631" height="114" alt="" /></td>



        <td height="330" align="left" valign="top">

            <img src="../public_html/test/images/readytochange/ready_03.gif" width="33" height="330" alt="" /></td>

        <td rowspan="2" align="left" valign="top"><!-- TemplateBeginEditable name="inhoud" -->inhoud<!-- TemplateEndEditable -->


        <td align="left" valign="top">

            <img src="../public_html/test/images/readytochange/ready_05.gif" width="110" height="330" alt="" /></td>



        <td colspan="2" align="left" background="../public_html/test/images/readytochange/ready_06.gif">

            <img src="../public_html/test/images/readytochange/ready_06.gif" width="294" height="1" alt="" /></td>

        <td align="left" valign="top" background="../public_html/test/images/readytochange/ready_07.gif">

            <img src="../public_html/test/images/readytochange/ready_07.gif" width="110" height="3" alt="" /></td>



        <td colspan="2" align="left" valign="top">

            <img src="../public_html/test/images/readytochange/ready_08.gif" width="294" height="63" alt="" /></td>

        <td align="left" valign="top">

            <img src="../public_html/test/images/readytochange/ready_09.gif" width="488" height="63" alt="" /></td>

        <td align="left" valign="top">

            <img src="../public_html/test/images/readytochange/ready_10.gif" width="110" height="63" alt="" /></td>



        <td colspan="4" align="left" valign="top">

            <img src="../public_html/test/images/readytochange/ready_11.gif" width="892" height="92" alt="" /></td>



<!-- End Save for Web Slices -->



  • Currently Being Moderated
    Jan 9, 2012 5:56 AM   in reply to david van bambost

    What's in the CSS file?

    Mark as:
  • Currently Being Moderated
    Jan 9, 2012 6:37 AM   in reply to david van bambost

    This is a Template page (i.e., not a CHILD page), you know?  It appears that you are NOT using it as a Template though - is that correct?  DW complains every time you save the page, right?


    Also, your page has NO machine readable content - that's a very bad approach for any search-engine ranking purposes.


    Finally, you didn't show a doctype for your HTML.  Does your code have a declared doctype?  Omitting that is a serious omission, too.


    Judging from this link, it appears that your site is not properly defined - " background="../public_html/test/images/readytochange/ready_06.gif">


    The "public_html" folder should never appear in any of your links.  I'd say you need to take a serious look at your use of DW.

    Mark as:
  • Currently Being Moderated
    Jan 9, 2012 7:33 AM   in reply to david van bambost

    It is a template page, but I use this template to generate child pages. Example below. So Dreamweaver doesn't complain when saving a file.


    Yes, I see that now.  I had overlooked the editable region in the body of the page.  Please ignore that comment.


    Could you please explain about the machine readable content? I think this content is incorporated in the child pages.


    Your Template page has all of its content embedded in the images.  I was mislead because of my conclusion that what I was looking at was a child page.  Please also ignore that comment.


    I will check about the doctype. I thought Dreamweaver had declared this.


    It certainly should have done so - it should have been placed above the <html> tag.


    The links to images are defined as 'relative to document'. Isn't this the proper way to define them?


    That's fine, but your original post showed the "public_html" folder explicitly mentioned in your links. You should never see that folder appear in any link in your site.  And it's doubly confusing in that it appears in the Template file, but not in your subsequent post of CHILD page markup!


    <link href="../css/style.css" rel="stylesheet" type="text/css">


    Can you explain that?

    Mark as:
  • Currently Being Moderated
    Jan 10, 2012 2:20 AM   in reply to david van bambost

    Best if you upload the page as it stands to the web and post a link so we can view it in our browsers.

    Mark as:
  • Currently Being Moderated
    Jan 10, 2012 4:11 AM   in reply to david van bambost

    For some reason (something beyond my power), the templates are in the root folder of the website. This is public_html.


    This is normal.  The "public_html" folder should appear in your remote site definition as the root folder of the website.  If your site is defined that way (the correct way), you will never see the folder name in any link. The fact that we *do* see it indicates that your site definition is not correct.



    But I'm developing the site in a subfolder named 'Test'.


    Then you *should* see that folder name in all of your links.


    In other words, when you look at the links in the Template file, they should be like this -


    <link href="../test/css/style.css" rel="stylesheet" type="text/css">


    not like this -


    <link href="../public_html/test/css/style.css" rel="stylesheet" type="text/css">


    and when you look at the links in a child page they should never contain the "test" folder name (assuming that all child pages and dependents are within that test folder)


    As for your background image not appearing, you have to use the proper markup to make that happen!  Change this -


    <td height="3" colspan="2" align="left" valign="top" background-image="images/readytochange/ready_06.gif" background-repeat: repeat>


    to this -


    <td height="3" colspan="2" align="left" valign="top" style="background-image:url(images/readytochange/ready_06.gif);">


    (the validator points that line out as invalid in about a nanosecond!)

    Mark as:
  • Currently Being Moderated
    Jan 10, 2012 6:47 AM   in reply to david van bambost

    Get rid of the height from the kalender_06.gif may help.


    <img src="images/kalender_06.gif" width="488" height="333" alt="" />


    It's a shot in the dark...I haven't seen a page built like this since 1933.

    Mark as:
  • Currently Being Moderated
    Jan 10, 2012 7:29 AM   in reply to david van bambost

    Even if we get your background image found and displayed, your whole layout approach is flawed and will break unexpectedly.  Here's why -



    The mistakes are two-fold: a) using table-based layouts, and b) using spans to create a single table with multiple different row/column cofigurations.  And the problems will arise when someone's browser has a default text display setting that is larger then the one you have used when testing the pages.  That will force the content area to expand vertically causing gaps to appear throughout your table as a result of that expansion.


    I think you need to retrench here a bit.  So - how would I do this layout?  It would require a top and bottom horizontal slice of the combined graphic to sit above and below a vertically flexible center content area.  I'll see if I can produce a graphic illustrating this and post it soon.

    Mark as:
  • Currently Being Moderated
    Jan 10, 2012 7:49 AM   in reply to david van bambost

    david van bambost wrote:


    What's the alternative then?


    By the way, this page is built in the same way and works fine.


    Having re-thought I think the background images AREshowing. It's the main 06 image which is pushing the design down passed your left and right column side images so you get nothing when they abruptly stop. What you need to do is place the background repeat images behind the left and right side images.

    Mark as:
  • Currently Being Moderated
    Jan 10, 2012 11:08 AM   in reply to david van bambost

    Be prepared for trouble. Make sure you read the link I posted.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points