School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Welcome to Dream.In.Code
Become an Expert!

Join 307,148 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,730 people online right now. Registration is fast and FREE... Join Now!




IE 6 not playing nice with background image

 

IE 6 not playing nice with background image, One problem turned to three or more

NubileDIYer

31 Oct, 2009 - 04:40 PM
Post #1

New D.I.C Head
*

Joined: 11 Aug, 2009
Posts: 34



Thanked: 1 times
My Contributions
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:
CODE
<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?!

User is offlineProfile CardPM
+Quote Post


thehat

RE: IE 6 Not Playing Nice With Background Image

31 Oct, 2009 - 05:49 PM
Post #2

awake ? web();
Group Icon

Joined: 28 Feb, 2008
Posts: 940



Thanked: 99 times
Dream Kudos: 200
My Contributions
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.
IPB Image
User is offlineProfile CardPM
+Quote Post

NubileDIYer

RE: IE 6 Not Playing Nice With Background Image

2 Nov, 2009 - 12:49 PM
Post #3

New D.I.C Head
*

Joined: 11 Aug, 2009
Posts: 34



Thanked: 1 times
My Contributions
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!)
User is offlineProfile CardPM
+Quote Post

sam_benne

RE: IE 6 Not Playing Nice With Background Image

4 Nov, 2009 - 11:48 PM
Post #4

D.I.C Addict
Group Icon

Joined: 16 Jan, 2008
Posts: 645



Thanked: 8 times
Dream Kudos: 400
My Contributions
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.
User is offlineProfile CardPM
+Quote Post

NubileDIYer

RE: IE 6 Not Playing Nice With Background Image

5 Nov, 2009 - 11:45 AM
Post #5

New D.I.C Head
*

Joined: 11 Aug, 2009
Posts: 34



Thanked: 1 times
My Contributions
QUOTE(sam_benne @ 4 Nov, 2009 - 11:48 PM) *

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.

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

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


#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.gif I don't understand how something that looks just as it should in Firefox and Safari can blow up in Exploder..
User is offlineProfile CardPM
+Quote Post

sam_benne

RE: IE 6 Not Playing Nice With Background Image

5 Nov, 2009 - 12:15 PM
Post #6

D.I.C Addict
Group Icon

Joined: 16 Jan, 2008
Posts: 645



Thanked: 8 times
Dream Kudos: 400
My Contributions
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.
User is offlineProfile CardPM
+Quote Post

NubileDIYer

RE: IE 6 Not Playing Nice With Background Image

5 Nov, 2009 - 12:36 PM
Post #7

New D.I.C Head
*

Joined: 11 Aug, 2009
Posts: 34



Thanked: 1 times
My Contributions
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
CODE

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

#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!
User is offlineProfile CardPM
+Quote Post

sam_benne

RE: IE 6 Not Playing Nice With Background Image

6 Nov, 2009 - 03:54 AM
Post #8

D.I.C Addict
Group Icon

Joined: 16 Jan, 2008
Posts: 645



Thanked: 8 times
Dream Kudos: 400
My Contributions
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: 6 Nov, 2009 - 03:55 AM
User is offlineProfile CardPM
+Quote Post

NubileDIYer

RE: IE 6 Not Playing Nice With Background Image

6 Nov, 2009 - 05:52 AM
Post #9

New D.I.C Head
*

Joined: 11 Aug, 2009
Posts: 34



Thanked: 1 times
My Contributions
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!!
User is offlineProfile CardPM
+Quote Post

sam_benne

RE: IE 6 Not Playing Nice With Background Image

6 Nov, 2009 - 09:12 AM
Post #10

D.I.C Addict
Group Icon

Joined: 16 Jan, 2008
Posts: 645



Thanked: 8 times
Dream Kudos: 400
My Contributions
Oh no you used dynamic drive arghhh lol. So whats wrong with the slideshow?
User is offlineProfile CardPM
+Quote Post

NubileDIYer

RE: IE 6 Not Playing Nice With Background Image

6 Nov, 2009 - 10:27 AM
Post #11

New D.I.C Head
*

Joined: 11 Aug, 2009
Posts: 34



Thanked: 1 times
My Contributions
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:
CODE

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

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

User is offlineProfile CardPM
+Quote Post

NubileDIYer

RE: IE 6 Not Playing Nice With Background Image

7 Nov, 2009 - 07:48 AM
Post #12

New D.I.C Head
*

Joined: 11 Aug, 2009
Posts: 34



Thanked: 1 times
My Contributions
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?
User is offlineProfile CardPM
+Quote Post

sam_benne

RE: IE 6 Not Playing Nice With Background Image

7 Nov, 2009 - 08:57 AM
Post #13

D.I.C Addict
Group Icon

Joined: 16 Jan, 2008
Posts: 645



Thanked: 8 times
Dream Kudos: 400
My Contributions
Yes can't remeber exactly what its is but its something like <!--[if ie6]><!--> look in google for ie6 fixes should have something like that.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/21/09 04:11PM

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month