Логотип сайта, появляющийся за фоновым изображением в I.E.7-8

Question

Логотип моего сайта обычно отображается в Firefox и т. Д., Но в Internet Explorer логотип появляется за фоновым изображением, и он действительно плохо выглядит. Может кто-нибудь сказать мне, как заставить логотип появляться на фоне фонового изображения?

Сайт нравится, поэтому вы можете взглянуть на кодировку: http://turquoisegrotto.com/

Answer 1

Вы пишете какой-то дурацкий CSS, что со всеми отрицательными полями? Я бы держался подальше от этого материала, не уверенный, почему на вашем #navi также была высота 120px (и, следовательно, все -margins).

Тем не менее, у IE нет причин размещать логотип за фоновым изображением тела! Это было странно наверняка.

В любом случае эти изменения вернут логотип в волшебный мир тела:

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;
}

Я уверен, что другие ваши элементы будут нуждаться в корректировке, поскольку логотип и навигация больше не имеют больших отрицательных полей.

Answer 2

Избавьтесь от всех ваших дурацких * селекторов, добавьте строгий DOCTYPE и попробуйте снова. Логотип не за фоном, он где-то за кадром.

РЕДАКТИРОВАТЬ: У вас есть DOCTYPE, избавьтесь от комментария над ним. DOCTYPE должен быть в самой первой строке.

Answer 3

Попробуйте установить z-index (свойство CSS) изображения логотипа на 10.