17 Replies Latest reply: Jan 10, 2012 11:08 AM by MurraySummers RSS

    Background image not showing in IE9

    david van bambost Community Member

      Hi,

       

      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!

       

      David

       

      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:

       

      <html>

      <head>

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

      <title>readytochange</title>

      <!-- 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">

      </head>

      <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">

          <tr>

              <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="http://www.test.trantz.be/watistrantz/index.html" 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="http://www.test.trantz.be/readytochange/index.html" 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>

          </tr>

          <tr>

              <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>

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

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

          </tr>

          <tr>

              <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>

          </tr>

          <tr>

              <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>

          </tr>

          <tr>

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

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

          </tr>

      </table>

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

      </body>

      </html>

        • 1. Re: Background image not showing in IE9
          MurraySummers CommunityMVP

          What's in the CSS file?

          • 2. Re: Background image not showing in IE9
            david van bambost Community Member

            This is the CSS

             

            body {

                color: #000000;

                font-family: Verdana, Arial, Helvetica, sans-serif;

                font-size: 10px;

                font-style: normal;

                font-weight: normal;

                font-variant: normal;

                line-height: normal;

                text-decoration: none;

                margin-top: 5px;

                margin-bottom: 5px;

                margin-left: 0px;

                margin-right: 0px;

                background-color: #ffffff;

            }

             

            h1 {

                font-size: 16px;

                font-weight: bold;

                margin-left: 5px;

                margin-right: 5px;

                margin-top: 5px;

                margin-bottom: 5px;

            }

             

            h2 {

                font-size: 12px;

                font-weight: bold;

                margin-left: 5px;

                margin-right: 5px;

                margin-top: 5px;

                margin-bottom: 5px;

                line-height: 150%;

                text-decoration: underline;

            }

             

            p {

                font-size: 11px;

                margin-left: 5px;

                margin-right: 5px;

                margin-top: 5px;

                margin-bottom: 0px;

                line-height: 150%;

                font-weight: bold;

            }

            .fotobijschrift {

                font-size: 10px;

                line-height: 150%;

                font-weight: bold;

                color: #C00;

                font-style: italic;

                font-family: Arial, Helvetica, sans-serif;

                padding: 8px;

                margin: 12px;

            }

            .text_rood {

                color: #C00;

            }

            .text_groen {

                color: #390;

            }

            .text_blauw {

                color: #36F;

            }

            .text_oranje {

                color: #F60;

            }

            .text_geel {

                color: #FC0;

            }

             

            td.dark p {

                color: #FFFFFF;

                font-size: 11px;

                margin-left: 5px;

                margin-right: 5px;

                margin-top: 5px;

                margin-bottom: 0px;

            }

             

            a {

                color: #03C;

                font-weight: bold;

                text-decoration: underline;

            }

             

            td.dark a {

                color: #FFFFFF;

                font-weight: bold;

                text-decoration: none;

            }

             

            a:hover {

                color: #607080;

            }

             

            #mainmenu a {

                color: #405060;

            }

             

            a.backtotop {

                color: #405060;

            }

             

            th {

                color: #405060;

                font-family: Verdana, Arial, Helvetica, sans-serif;

                font-size: 14px;

                font-style: normal;

                font-weight: bold;

            }

             

            td {

                color: #405060;

                font-family: Verdana, Arial, Helvetica, sans-serif;

                font-size: 13px;

            }

             

            td.navigation {

                color: #405060;

                font-family: Verdana, Arial, Helvetica, sans-serif;

                font-size: 12px;

                font-style: normal;

                font-weight: bold;

                font-variant: normal;

                line-height: normal;

                text-decoration: none;

                background-color: #DDDDBB;

            }

             

            td.dark {

                background-color: #225588;

            }

             

            td.banner {

                background-color: #FFFFFF;

            }

             

            input {

                color: #405060;

                font-family: Verdana, Arial, Helvetica, sans-serif;

                font-size: 12px;

                border: 1px solid #999999;

            }

             

            input.noborder {

                border: 0px;

            }

             

            input.disabled {

                color: #999999;

                background-color: #D4D0C8;

                font-family: Verdana, Arial, Helvetica, sans-serif;

                font-size: 12px;

                border: 1px solid #999999;

            }

             

            textarea {

                color: #405060;

                background-color: #FFFFFF;

                font-family: Verdana, Arial, Helvetica, sans-serif;

                font-size: 12px;

                border: 1px solid #999999;

            }

             

            textarea.disabled {

                color: #999999;

                background-color: #D4D0C8;

                font-family: Verdana, Arial, Helvetica, sans-serif;

                font-size: 12px;

                border: 1px solid #999999;

            }

             

            /* CUSTOM TOOLTIPS */

             

            div.domTT {

              background-color: #FFFFFF;

              padding: 3px;

              border: 1px #405060 solid;

            }

             

            div.domTTContent {

              font-family: Verdana, Arial, Helvetica, sans-serif;

              font-size : 12px;

              color: #405060;

            }

             

            /* LIST STYLES */

             

            ul {

                margin-left: 25px;

                margin-top: 5px;

                margin-bottom: 10px;

                font-family: Verdana, Geneva, sans-serif;

                font-size: 10px;

                line-height: 150%;

            }

             

            ul li {

                list-style-type: square;

            }

             

            ol {

                margin-left: 25px;

                margin-top: 5px;

                margin-bottom: 10px;

            }

            • 3. Re: Background image not showing in IE9
              MurraySummers CommunityMVP

              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.

              • 4. Re: Background image not showing in IE9
                david van bambost Community Member

                Hi,

                Thanks for the advise. I appreciate it a lot that you have a look at this problem.

                 

                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.

                 

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

                 

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

                 

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

                 

                This is the code of a child page:

                 

                 

                <html><!-- InstanceBegin template="/Templates/readytochange.dwt" codeOutsideHTMLIsLocked="false" -->

                <head>

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

                <title>readytochange</title>

                <!-- InstanceEndEditable -->

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

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

                <!-- InstanceEndEditable -->

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

                </head>

                <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">

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

                        <td rowspan="2" align="left" valign="top"><!-- #BeginLibraryItem "/public_html/Library/navigatie.lbi" --><img src="../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="http://www.test.trantz.be/watistrantz/index.html" 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="http://www.test.trantz.be/readytochange/index.html" 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="../images/readytochange/ready_02.gif" width="631" height="114" alt="" /></td>

                    </tr>

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

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

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

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

                          <table width="100%" border="0" cellspacing="0" cellpadding="0">

                            <tr>

                              <td colspan="4"><h1>Ready To Change?</h1></td>

                            </tr>

                            <tr>

                              <td colspan="3" rowspan="2"><p><img src="../images/trantz_mini.png" alt="" width="44" height="18" /> staat voor <span class="text_groen">transitie</span>. <br />

                                <span class="text_groen">Transitie</span>, dat is <span class="text_blauw">verandering</span> naar een duurzame samenleving.<br />

                                <span class="text_blauw">Verandering</span> wordt gemaakt door <span class="text_rood">mensen</span><br />

                                <span class="text_rood">Mensen</span> <span class="text_oranje">leven samen</span>.<br />

                Onze <span class="text_oranje">samenleving</span> wordt nu uitgedaagd.<br />

                Grote uitdagingen zijn klimaatveranderingen, einde van het tijdperk van de fossiele brandstoffen, economische crisis, ongelijkheid, ... . <br />

                Op uitdagingen kan je <span class="text_groen">antwoorden</span>. <br />

                E&eacute;n <span class="text_groen">antwoord</span> is <span class="text_geel">creativiteit</span>. <br />

                <span class="text_geel">Creativiteit</span> is de motor voor <span class="text_blauw">verandering</span>.</p>

                              <p> </p></td>

                              <td width="44%" align="left" valign="bottom"><a href="mensen.html" target="_parent"><img src="../images/readytochange/still_beroeps.jpg" width="200" height="130" alt="beroepsonderwijs" /></a>

                              <p class="text_rood">Mensen</p></td>

                            </tr>

                            <tr>

                              <td align="left" valign="bottom"><p><img src="../images/readytochange/still_samen.jpg" width="200" height="130" /></p>

                              <p class="text_oranje">Samen</p></td>

                            </tr>

                            <tr>

                              <td colspan="3" align="right" valign="top"><img src="../images/readytochange/still_durven.jpg" width="200" height="130" />

                              <p class="text_geel">Creativiteit</p></td>

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

                                <p> </p>

                                <p><img src="../images/readytochange/still_duurzaam.jpg" width="200" height="130" border="1" />

                              Duurzaam</p></td>

                            </tr>

                            <tr>

                              <td colspan="3" align="left" valign="top"><p><img src="../images/readytochange/still_energie.jpg" width="200" height="130" /></p>

                              <p>Energie</p></td>

                              <td align="right" valign="bottom"><p> </p>

                                <p><img src="../images/readytochange/still_lokaal.jpg" width="200" height="130" />

                              Lokaal</p></td>

                            </tr>

                        </table>

                        <!-- InstanceEndEditable -->

                       </td>

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

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

                    </tr>

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

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

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

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

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

                    </tr>

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

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

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

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

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

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

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

                    </tr>

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

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

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

                    </tr>

                </table>

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

                </body>

                <!-- InstanceEnd --></html>

                 

                Message was edited by: david van bambost I added the code.

                • 5. Re: Background image not showing in IE9
                  MurraySummers CommunityMVP

                  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?

                  • 6. Re: Background image not showing in IE9
                    david van bambost Community Member

                    Well, that has something to do with the structure of the site on the remote server. For some reason (something beyond my power), the templates are in the root folder of the website. This is public_html. But I'm developing the site in a subfolder named 'Test'. So when I use the template to create child pages these are created in the folder Test. Hence the change of paths.

                     

                    Could you tell me what doctype I should apply to the pages? And would this solve my problems with images not positioning rightly and not showing?

                     

                    Thanks already for your help.

                    • 7. Re: Background image not showing in IE9
                      david van bambost Community Member

                      I added the doctype and this causes the 'normal' images to display in the right position.

                       

                      But, the background image still doesn't display.

                      • 8. Re: Background image not showing in IE9
                        John Waller CommunityMVP

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

                        • 9. Re: Background image not showing in IE9
                          david van bambost Community Member

                          Hi,

                           

                          This is the url to the page I'm working on: http://www.test.trantz.be/mensen2.html

                          • 10. Re: Background image not showing in IE9
                            MurraySummers CommunityMVP

                            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!)

                            • 11. Re: Background image not showing in IE9
                              david van bambost Community Member

                              Thanks for the tips.

                              I redefined the site definition on the remote server (and on the local server) and changed the code to what you suggested, but to no avail, the background image still doesn't show up.

                               

                              Could you have another look at the code?

                               

                              The page is on this url: http://www.test.trantz.be/kalender.html

                               

                              It's an 'independent' page, not based on a template. And I defined a doctype.

                               

                              Greets

                              David

                              • 12. Re: Background image not showing in IE9
                                osgood_ CommunityMVP

                                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.

                                • 13. Re: Background image not showing in IE9
                                  david van bambost Community Member

                                  What's the alternative then?

                                   

                                  By the way, this page http://cggwaasendender.be/volwassenen.html is built in the same way and works fine.

                                  • 14. Re: Background image not showing in IE9
                                    MurraySummers CommunityMVP

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

                                     

                                    http://www.apptools.com/rants/spans.php

                                     

                                    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.

                                    • 15. Re: Background image not showing in IE9
                                      osgood_ CommunityMVP

                                      david van bambost wrote:

                                       

                                      What's the alternative then?

                                       

                                      By the way, this page http://cggwaasendender.be/volwassenen.html 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.

                                      • 16. Re: Background image not showing in IE9
                                        david van bambost Community Member

                                        Thanks for rethinking.

                                        I put the background image in a css-style.

                                        Then omitted the center image (image06)

                                         

                                        Then I gave the left and right td's the css-style with the background image in it.

                                         

                                        Strange thing is that the background image was in the left and right td's, but apperently not in the right ones.

                                         

                                        And see: it works!

                                        All I have to do now is reslice some images.

                                         

                                        Thank you very very much for having a look at this. I appreciate it a lot!

                                         

                                        David

                                         

                                        http://www.test.trantz.be/kalender.html

                                         

                                        Message was edited by: david van bambost

                                        • 17. Re: Background image not showing in IE9
                                          MurraySummers CommunityMVP

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