Have Geek Brain

Site logo appearing behind the background image in IE7-8

My site logo is usually displayed in firefox etc. but in internet browser the logo appears behind the background image and it looks very bad. Can anyone tell me how to make the logo appear in the background image popup?

On this site you can see the code: http://turquoisegrotto.com/

0


a source to share


3 answers


Get rid of all your wacky * selectors, add a strong DOCTYPE and try again. The logo is not behind the background, it is somewhere behind the scenes.



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

+1


a source


Are you writing some whacky CSS that with all negative margins? I would steer clear of this stuff without knowing why your #navi had 120px-height on it and (and thus all -margins).

However, there is no reason for IE to place the logo behind the background body image! It was weird.

In any case, these changes will bring the logo back to 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 customization as the logo and nav no longer have large negative margins.

+1


a source


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

0


a source






More articles:


All Articles