6 Replies Latest reply on Apr 9, 2010 8:43 AM by evilJim

    Problems with the background image in IE


      Hi I've been optimizing some pages for the different browsers in Dreamweaver CS4. They all work fine in Safari, Firefox and Opera, Internet Explorer is, however not showing the background image I have selected. I can't for the life of me see what's going wrong! Any help wopuld be appreciated. here is the code on my index page which I built from a template. I don't know if it's the editable areas that are going wrong!


      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

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

      <title>test site</title>

      <!-- InstanceEndEditable -->

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

      <style type="text/css">


      body {

      background-repeat: repeat-x;

      background-image:url(file:///Macintosh HD/Users/me/Documents/websites/face_divorce/test/images/test_back.png);


      .oneColFixCtrHdr #container {

      width: 770px;

      margin: 0 auto;

      border: 0;

      padding: 0;


      .oneColFixCtrHdr #header {

      text-align: centre;

      border: 0;

      padding: 0;


      .oneColFixCtrHdr #header h1 {

      <img src="../images/test_logo.png"

      margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */

      padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

      font-size: x-large;

      text-align: right;


      .oneColFixCtrHdr #mainContent {

      padding: 0;


      .oneColFixCtrHdr #footer p {

      margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */

      padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

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

      color: #6699cc;

      font-size: 9px;

      font-style: normal;

      line-height: normal;

      font-weight: lighter;

          text-align: center;






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


      <meta name="Description" content="facedivorce.com.com is an online resource tool to help guide you through the various stages of divorce.  Simply click on before, during or after divorce to find everything you could ever need to do with divorce.

      " />

      </head><meta name="keywords" content="test


      " />

      <!-- InstanceEndEditable -->

      <body class="oneColFixCtrHdr">


      <div id="container">

        <div class="oneColFixCtrHdr" id="header">

          <table width="740" border="0" align="center">


              <td  border="0" height="38" ></td>

              <td align="right" valign="bottom"><!-- InstanceBeginEditable name="HeaderLinks" -->

                <p class="TextButtons"><a href="index.html" class="TextButtons">Home</a>   <a href="featuredcompany.html" class="TextButtons">Featured Company</a>   <a href="youngpeople.html" class="TextButtons">Young People</a>    <a href="andmore.html" class="TextButtons">And More</a>    <a href="blog/index.html" class="TextButtons">Blog</a></p>

              <!-- InstanceEndEditable --></td>



              <th height="48" align="left" valign="bottom">

      <h1><a href="index.html" title="test"><img src="images/test_logo.png" alt="test" width="245" height="46" border="0" align="left" /></a></h1>


              <td align="right" valign="bottom"><!-- InstanceBeginEditable name="HeaderButtons" --><a href="#"><img src="images/facebook-logo.png" alt="FaceBook Button" width="48" height="48" border="0" align="bottom" /></a> <a href="#"><img src="images/twitter_square.png" alt="Twitter Button" width="48" height="48" border="0" align="bottom" /></a><a href="#"><img src="images/blogbutton.png" alt="Blog Button" width="49" height="47" border="0" align="bottom" /></a>    <!-- InstanceEndEditable --></td>



          <!-- end #header -->


        • 1. Re: Problems with the background image in IE
          pziecina Level 6



          You did not say which version of IE but looking at your code I suspect that it is a pre version 7 browser you are using.

          From the line of css - background-image:url(file:///Macintosh  HD/Users/me/Documents/websites/face_divorce/test/images/test_back.png);

          I can see you are using a png, and pre IE7 versions do not support png's, unless you wish to use the IEFilter - AlphaImageLoader which does support png's an maintains any transparency, see - http://cookbooks.adobe.com/post_Cross_Browser_Multi_background_images__including_I-16839.h tml.


          The link given is for multi background images but it also illustrates how to use the IEFilter.




          • 2. Re: Problems with the background image in IE
            J Cellini Level 3

            I wrote my response the same time that pziecina wrote hers. So I am editing my response. I think pziecina has the right answer.

            • 3. Re: Problems with the background image in IE
              evilJim Level 1

              Hi there, thanks for getting back, unfortunately It is IE 7. But through a bit of software called cross over so I can run on a mac.(might be part of the problem)  The odd thing is since you put that up I have looked at an earlier index page I made from the same template and that works in IE7 through crossover. Maybe I made a mistake and didn't notice and it's causing the problem now. In the code for the original index.html made from the template the source code says


              But in the new ones it comes up...

              background-image:url(file:///Macintosh HD/Users/myname/Documents/websites/test/Test/images/test_back.png);


              Would that prove to be a problem when looking at it online? How could I correct this if this is the case as that isn't in a editable region in the index.html and was hoping not to have to do it for every page as it negates the point of the template!

              Unfortunately I have nothing online at the moment as I took it down when it started going wrong.

              • 4. Re: Problems with the background image in IE
                J Cellini Level 3

                The best thing is to put up a live web page. If you can do that, it would be easier to figure it out.

                • 5. Re: Problems with the background image in IE
                  pziecina Level 6



                  The fact you are using a Mac is why both myself and JCellini assumed you where using a pre IE7 version.

                  But the code you are using to test in IE will cause a problem with any 'virtual machine' such as crossover, because it cannot reference anything outside its own assigned section of the drive, and referencing the png in the way you are would be for it an invalid reference, it also would not work in any browser when you uploaded the site.


                  Change - background-image:url(file:///Macintosh  HD/Users/myname/Documents/websites/test/Test/images/test_back.png);

                  To - background-image:url(images/test_back.png);


                  But if the region is not editable I would suggest you temporarily make it so, externalize your css to a css file, insert a link to the external css file in your head content, then lock the region once again. This way you will always be able to edit your css without worrying about 'locked regions'.




                  • 6. Re: Problems with the background image in IE
                    evilJim Level 1

                    Thnaks for letting me know, sorry I've been away! I don't know why the relative path was remaining, very strange, though I inexplicably fixed it!  I don't know how.