I've been pulling my hair out over this, I just can't seem to find what the hell's wrong with it. My website works fine in IE7, FX (all the decent browsers) but, in IE6, my background image will not work. The funny thing is though, it works on the index page fine (its an animated GIF), however, my background image will not work on any other of my pages (non-animated GIFs). Here's the HTML code for the about.php page: <body> <div id="container"> <div id="header"> <a href="index.php"><img src="images/logo.png" alt="Social Photography Logo" title="Social Photography"></a> </div> <div id="content"> <?php include "leftcol.php"; ?> <div id="maincol" class="aboutimage"> <div id="textback"> </div> <ul id="nav"> <li><a href="index.php">Home</a></li> <li class="selected"><a href="about.php">About</a></li> <li><a href="weddings.php">Weddings</a></li> <li><a href="portraits.php">Portraits</a></li> <li><a href="bookings.php">Booking</a></li> <li><a href="gallery.php">Gallery</a></li> <li><a href="contact.php">Contact</a></li> </ul> </div> </div> <?php include "footer.php"; ?> </div> </body> </html> Code (markup): Here's the CSS code for the appropriate images: div#maincol.indeximage{ width: 599px; height: 508px; background: url(images/bodyimage.gif); margin: 8px 0 0 0; float: left; } div#maincol.aboutimage{ width: 599px; height: 508px; background: url(images/aboutback.gif); margin: 8px 0 0 0; float: left; } div#maincol.weddingsimage{ width: 599px; height: 508px; background: url(images/weddingback.gif); margin: 8px 0 0 0; float: left; } div#maincol.portraitimage{ width: 599px; height: 508px; background: url(images/portraitback.gif); margin: 8px 0 0 0; float: left; } div#maincol.bookingsimage{ width: 599px; height: 508px; background: url(images/bookingsback.gif); margin: 8px 0 0 0; float: left; } div#maincol.galleryimage{ width: 599px; height: 508px; background: url(images/galleryback.gif); margin: 8px 0 0 0; float: left; } div#maincol.contactimage{ width: 599px; height: 508px; background: url(images/contactback.gif); margin: 8px 0 0 0; float: left; } div#textback{ width: 403px; height: 480px; background: url(images/text_back.png); margin: 14px 0 0 8px; float: left; } Code (markup): And, here's the CSS code for crappy IE6: ul#nav li a{ margin: 7px 12.5px 0 0; } div#leftcol{ margin: -7px 0 0 0; } div#header img{ margin: -25px 0 0 0; } div#maincol.indeximage{ margin: -7px 0 0 0; } div#maincol.aboutimage{ margin: -7px 0 0 0; } div#maincol.weddingsimage{ margin: -7px 0 0 0; } div#maincol.portraitsimage{ margin: -7px 0 0 0; } div#maincol.bookingsimage{ margin: -7px 0 0 0; } div#maincol.galleryimage{ margin: -7px 0 0 0; } div#maincol.contactimage{ margin: -7px 0 0 0; } Code (markup): Here's the website so far: http://www.michaelwaker.co.uk If anyone can help it would be fantastic as I'd like to get this website up and running ASAP. Thanks in advance, Mike
The relative path is correct I have also tried using absolute paths and these do not work either. The margin value is a proper value as it is working. I have also tried position:relative; making the height/width 100%. Nothing seems to be rectifying whatever is going wrong. Bloody IE6.
don't worry - this issue has now been resolved. I have decided to just leave it the way it is as this is consuming up far too much time and it simply needs to be launched. Let's just all hope that the death of IE 6 is near.