Website logo appearing behind background image in I.E.7-8

Question

My website's logo shows up normally in firefox and such, but in internet explorer the logo shows up behind the background image and it's really bad looking. Can someone tell me how to make the logo appear in frount of the background image?

Site like so you can take a look at the codeing: http://turquoisegrotto.com/

Answer 1

Try setting the z-index (CSS Property) of the logo image to 10.

Answer 2

You write some whacky CSS, what's with all the negative margins? I'd stay away from that stuff, not sure why your #navi had 120px height on it either, (and hence all the -margins).

Still, no reason for IE to put a logo behind the body's background-image! That was strange for sure.

Anyway these changes will bring the logo back into the magical world of the body:

body {
    background-color: #CCFFFF;
    color: #000000; 
    font-family: Tahoma; 
    text-align: center;    
    background-image:url("images/bg.png");
    background-position: top left;
    background-repeat: repeat-x;

    /* changed */
    margin-top: 0;
}

#navi{
    width: 100%;
    background-color: transparent; 
    text-align: left;

    /* changed */
    margin-top: 3px;
    height: 20px;
}

#logo{
    height: 120px; 
    background-color: transparent; 
    margin-bottom: 70px; 
    /* changed */
    margin-top: 5px;
}

I'm sure your other elements will need adjusting since the logo and nav don't have big negative margins anymore.

Answer 3

Get rid of all your wacky * selectors, add a strict DOCTYPE and try again. The logo isn't behind the background, it's offscreen somewhere.

EDIT: You have a DOCTYPE, get rid of the comment above it. DOCTYPE must be on the very first line.