IE 6 not playing nice with background image

One problem turned to three or more

Page 1 of 1

12 Replies - 1943 Views - Last Post: 07 November 2009 - 09:57 AM

#1 NubileDIYer

D.I.C Head

Reputation: 1

Posts: 52
Joined: 11-August 09

IE 6 not playing nice with background image

Post icon Posted 31 October 2009 - 05:40 PM

So you may recall that I have posted a few times with regards to a background image stretch problem. I'm sorry to beat a dead horse here, but I am getting frustrated and the deadline looms. The site is nearly complete, but my client viewed it on IE 6 and the background pushes all content down. On top of this, my navigation (and most links, for that matter) do not even appear as links!
Most online tutorials I could find referred me to this little HTML/CSS hack:

<link href="home.css" rel="stylesheet" type="text/css" />
<!-- Below is the CSS code -->
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#wrapper {position:relative; z-index:1; padding:10px;}
</style>

<!-- The above code works for all browser except IE so we are going to specify another special style sheet for IE6 to make the whole code cross browser compatible -->

<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#wrapper {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="images/woodfloor.jpg" width="100%" height="100%"></div>
	<div id="wrapper">

which is not IE 6 compliant.

My first question: Is there a surefire way to stretch a background image that is 100% browser compliant? If not, I will reconsider my options and choose a new background. The headache is certainly not worth having a cool wood background.
Next: When is CSS3 going to become the standard? Sub-question: When is IE going to go away forever?!

Is This A Good Question/Topic? 0

Replies To: IE 6 not playing nice with background image

#2 thehat

awake ? web();

Reputation: 106

Posts: 951
Joined: 28-February 08

Re: IE 6 not playing nice with background image

Posted 31 October 2009 - 06:49 PM

On my IE6 (Server 2003) your background is working fine. Unfortunately that's not that's wrong with this page. Attached is what I see.
Posted Image

Was This Post Helpful? 0

#3 NubileDIYer

D.I.C Head

Reputation: 1

Posts: 52
Joined: 11-August 09

Re: IE 6 not playing nice with background image

Posted 02 November 2009 - 01:49 PM

Oh dear. I'm glad the background worked, but that raises more concerns. I get that IE6 doesn't fully support alpha transparency, which explains the ugly gray mess. But do you know why the disparity between your IE6 and my IE6 would occur? Also, any thoughts on the blank space between each div background-image? Attached Image

Thanks for your help and patience! (Mine is wearing thin!)

Was This Post Helpful? 0

#4 sam_benne

D.I.C Addict

Reputation: 16

Posts: 732
Joined: 16-January 08

Re: IE 6 not playing nice with background image

Posted 05 November 2009 - 12:48 AM

For IE6 you can do its own CSS style sheet doing the HTML if statements.

Then in your CSS you can try adding a Display:block; or margin:0; which may help remove the white bits. But using one of the options in display usually does the trick.

IE6 does not support PNG's really well which i'm guessing is what your using on this if so you can do some GIF's for IE6 as that usually works.

Was This Post Helpful? 0

#5 NubileDIYer

D.I.C Head

Reputation: 1

Posts: 52
Joined: 11-August 09

Re: IE 6 not playing nice with background image

Posted 05 November 2009 - 12:45 PM

sam_benne, on 4 Nov, 2009 - 11:48 PM, said:

I considered something like that.. Here's my first attempt, a resounding FAIL:
HMTL:

<link href="home.css" rel="stylesheet" type="text/css" />
	<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" />
<![endif]-->

iefixes.css


#wrapper {
	width:807px;
	height:auto;
	margin: auto auto;
	z-index:1;
	margin:0;
	display:block;
}
#nav {
	background-image:url(images/menusprite.gif);
	width:807px; height:74px;
	margin:0;
}
#headertop {
	background-image:url(images/headertop.gif);
	background-repeat:no-repeat;
	width:807px;
	height:16px;
	margin:0;	
}
#header {
	width:807px;
	background-image:url(images/header.gif);
	background-repeat:repeat-y;
	margin:0;
}
#middle {
	background-image:url(images/middle.gif);
	background-repeat:no-repeat;
	width:807px;
	height:17px;
	margin:0;
}
#middle2 {
	background-image:url(images/middle2.gif);
	background-repeat:no-repeat;
	width:807px;
	height:18px;
	margin:0;
}
#content {
	background-image:url(images/content.gif);
	background-repeat:repeat-y;
	width:807px;
	height:auto;
	margin:0;
}
#footer {
	background-image:url(images/footer.gif);
	background-repeat:no-repeat;
	width:807px;
	height:auto;
	margin:0;
}

Was I correct in assuming you meant apply 0 margin to any of my divs with background images? I put my wrapper div display:block and zero margin, would that make it not work (also tried display:inline, which made the backgrounds themselves vanish)? And I took your advice and changed all to GIFs, that at least makes it look more sane.

You can see it in its current state Here. The two main issues are the blank spaces between divs and the fixed badges/slideshow. If this frustration continues, I am just going to install the Death To IE6 Code and call it a day :crazy:

I don't understand how something that looks just as it should in Firefox and Safari can blow up in Exploder..

Was This Post Helpful? 0

#6 sam_benne

D.I.C Addict

Reputation: 16

Posts: 732
Joined: 16-January 08

Re: IE 6 not playing nice with background image

Posted 05 November 2009 - 01:15 PM

The reason it doesn't work was because Microsoft thought the internet wasn't going to be a good thing so they didn't do much. Then they realised that internet was going to be good so their browsers wasn't that good but with IE6 it was like they made a browser in Linux that was for MAC and then used in windows. As it is the most buggiest version ever i mean IE5 had less features but didn't screw up as much.
So I usually get my site working in FF and then fix for IE as safari will render the same as FF. But as I do something new in FF I make sure it works in IE then I can tweak it.
If you are still struggling what I tend to do is recreate it again and then just add the content. As you know what it looks like so you just have to get it to work right.

Was This Post Helpful? 0

#7 NubileDIYer

D.I.C Head

Reputation: 1

Posts: 52
Joined: 11-August 09

Re: IE 6 not playing nice with background image

Posted 05 November 2009 - 01:36 PM

F Gill Bates. Nuff said.

Yeah I check primarily in Firefox 3 as I go, and refresh after every little thing I do, which is usually adding padding to position things well, which I am learning now IE6 treats differently. But my biggest beef right now is that certain images, in this case my social network badges and the slideshow on index.html seem to scroll with the page only in IE, I have no idea why because I have no such property set. My pages are validated and so is my CSS. I mean, the good news is only something like 12% of internet users use IE6, the bad is that I can't ignore such a large demographic.

If you have the time, could you just see if anything in my code would cause it to scroll like this? I'm all out of ideas

<body>
<div id="page-background"><img src="images/woodfloor.jpg" width="100%" height="100%" alt="background image"  />
</div>
	<div id="wrapper">
		<div id="menu">
		  <ul id="nav">  
			   <li id="home"><a href="index.html">
			 		<span class="button">Home</span>
					<span class="text1">The New Home of Brian Molnar</span></a></li> 
					 
			   <li id="news"><a href="news.html">
			 		<span class="button">News</span>
					<span class="text2">Press, Band News</span></a></li>
					
			 <li id="music"><a href="music.html">
			 		<span class="button">Music</span>
					<span class="text2">Listen, Discography, Lyrics</span></a></li> 
					 
			   <li id="tour"><a href="tour.html">
			 		<span class="button">Tour</span>
					<span class="text2">View our tour calendar</span></a></li> 
					 
 			 <li id="gallery"><a href="gallery/index.html">
			 		<span class="button">Gallery</span>
					<span class="text2">Your Favorite Photos</span></a></li>
					
 			 <li id="contact"><a href="contact.html">
			 		<span class="button">Contact</span>
					<span class="text3">Find us, contact us, book us</span></a></li>  
 		 </ul>  
			
		</div>
		
		<div id="headertop"></div>
		<div id="header">
		
			<div id="welcome">
			<h2>Welcome to the <br />new home of</h2>
			<a href="http://www.brianmolnar.com"><img src="images/bmlogo.gif" alt="Brian Molnar Logo" /></a>
				
				<p>The new sound on the <br />Americana clock radio as the<br /> fog of slumber lifts and we slowly<br /> awaken from the American Dream.</p>
				<p>Find us on these sites:</p>
		 	  <div id="badges" >					  
			  <a href="http://www.facebook.com/home.php?#/pages/Brian-Molnar-and-The-Naked-Hearts/83200657711?ref=mf"><img src="images/badge_fb.jpg" alt="Facebook Badge" width="66" height="62" /></a>	
			  <a href="http://www.myspace.com/brianmolnar"><img src="images/badge_ms.jpg" alt="MySpace Badge" width="67" height="62" /></a>				  
			  <a href="http://twitter.com/brianmolnar"><img src="images/badge_tw.jpg" alt="Twitter Badge" width="67" height="62"  /></a>
			  <a href="http://www.last.fm/music/Brian+Molnar" ><img src="images/badge_fm.jpg" alt="Last.FM Badge" width="67" height="62"  /></a> 			  
			  <a href="http://www.youtube.com/user/brianmolnar" ><img src="images/badge_yt.jpg" alt="YouTube Badge" width="67" height="62"  /></a>	 		  
			  <a class="badgelink" href="contact.html#rightheader">More..</a>			  </div>
			
</div>
			<div id="rightheader"><h3> Sign up for our Mailing List!</h3><?php
require "hostbaby";
list_signup();
?>
			
			<div id="fadeshow1"></div>
			</div>
		<div class="clear"></div>
	</div>

Relevant CSS

#wrapper {
	width:807px;
	height:auto;
	margin: auto auto;
	z-index:1;
	display:block;
}
/*Header graphics*/
#headertop {
	background-image:url(images/headertop.gif);
	background-repeat:no-repeat;
	width:807px;
	height:16px;	
}

#header {
	width:807px;
	background-image:url(images/header.gif);
	background-repeat:repeat-y;
}
#rightheader {
	text-align: center;
	width: 440px;
	float: right;
	margin-right: 15px;
	display:inline;
	overflow:hidden;
}

/*Header Content*/
#welcome {
	width:340px;
	float:left;
	display:block;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-left: 10px;
	text-align:center;
	
}
#welcome img {border:0;}
#welcome p{
	margin-left: 0px;
}
#welcome h2 {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}

#badges {
	width: 325px;
	height: auto;
	float:left;
	display:inline;
	margin-left: 10px;
}

#badges p{
	display:inline;
	float:left;	
	width:auto;
}
#badges img{
	position:relative;
	float: left;
	width: 64px;
	height: 64px;
	margin:0;
	border:0;
}
.badgelink{
	float:right;
	color:#FFFFFF;
	text-decoration: none;
	width:auto;
}
.badgelink a:hover{
	color:#330000;
	text-decoration: underline;
}

Any suggestions you could give me will help a load, I am still relatively new at this stuff. Thanks for the assistance!

Was This Post Helpful? 0

#8 sam_benne

D.I.C Addict

Reputation: 16

Posts: 732
Joined: 16-January 08

Re: IE 6 not playing nice with background image

Posted 06 November 2009 - 04:54 AM

Have you tried changing the height of the badges div?

Just seen change the position on badges img to something like static as that could be the cause.

This post has been edited by sam_benne: 06 November 2009 - 04:55 AM

Was This Post Helpful? 1

#9 NubileDIYer

D.I.C Head

Reputation: 1

Posts: 52
Joined: 11-August 09

Re: IE 6 not playing nice with background image

Posted 06 November 2009 - 06:52 AM

wow that worked! I'm not sure why but it worked! So no height on the #badges, and position:static on the #badges img.. I want to say I tried that second one before but perhaps I am mistaken.

Now I just gotta figure out the same for the slideshow (position:static didn't do it) which is a javascript from dynamicdrive.com, and remove those ugly spaces..

Thanks Sam!!

Was This Post Helpful? 0

#10 sam_benne

D.I.C Addict

Reputation: 16

Posts: 732
Joined: 16-January 08

Re: IE 6 not playing nice with background image

Posted 06 November 2009 - 10:12 AM

Oh no you used dynamic drive arghhh lol. So whats wrong with the slideshow?

Was This Post Helpful? 0

#11 NubileDIYer

D.I.C Head

Reputation: 1

Posts: 52
Joined: 11-August 09

Re: IE 6 not playing nice with background image

Posted 06 November 2009 - 11:27 AM

Yeah it was simpler than anything else I could find. Why do you think there is a better way?

In everything but IE 6, nothing, it works just as it should. But for some reason it won't stay fixed and scrolls with the page. I didn't have any styles applied til I used #fadeshow1 {position:static; width:440px;} which didn't change it anyway. I'm stumped. Unless the fact that it's in another div would do it:

<div id="rightheader"><h3> Sign up for our Mailing List!</h3><?php
require "hostbaby";
list_signup();
?>
<div id="fadeshow1"></div>
</div>

#rightheader {
	text-align: center;
	width: 440px;
	float: right;
	margin-right: 15px;
	display:inline;
	overflow:hidden;
	position:static;
}
#fadeshow1 {
	position:static;
	width:440px;
}

Was This Post Helpful? 0

#12 NubileDIYer

D.I.C Head

Reputation: 1

Posts: 52
Joined: 11-August 09

Re: IE 6 not playing nice with background image

Posted 07 November 2009 - 08:48 AM

Hi, I just wanted to let you know we launched the site, bugs and all, which can now be found here. We ended up dumbing down for IE 6, removing the slideshow and replacing it with a picture.

One quick question: Is there a conditional comment to show the slideshow for everyone but IE 6 users, and give them a picture instead?

Was This Post Helpful? 0

#13 sam_benne

D.I.C Addict

Reputation: 16

Posts: 732
Joined: 16-January 08

Re: IE 6 not playing nice with background image

Posted 07 November 2009 - 09:57 AM

Yes can't remeber exactly what its is but its something like  look in google for ie6 fixes should have something like that.

Was This Post Helpful? 0

Page 1 of 1

One problem turned to three or more

12 Replies - 1943 Views - Last Post: 07 November 2009 - 09:57 AM

IE 6 not playing nice with background image

Replies To: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Re: IE 6 not playing nice with background image

Follow & Share

Give It A Try!

Programming

Web Development

Reference Sheets

Bye Bye Ads

Monthly Drawing