GIF background image not working in IE6

Discussion in 'CSS' started by wobmop, Jan 20, 2009.

  1. #1
    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
     
    wobmop, Jan 20, 2009 IP
  2. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #2
    check if the relative path is wrong and if the margin value is proper value or not .
     
    justinlorder, Jan 20, 2009 IP
  3. wobmop

    wobmop Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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.
     
    wobmop, Jan 20, 2009 IP
  4. wobmop

    wobmop Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    wobmop, Jan 21, 2009 IP