нет фона для <a>в ie6

Question

Не знаю, как это исправить.Я пытаюсь сделать разные логотипы, в зависимости от класса тега.Html:

<div id="header"> 
    <a href="/index.php" id="logo" class="cet"> 
        <h1 id="l">title</h1> 
    </a>
</div>

И css:

#header {
    height:204px;
    background: url(../img/il-01.jpg) no-repeat  400px 2em;
    position:relative;
    clear:both;
}
#header #logo {
    display:block;
    position:absolute;
    left:2em;
    top:3em;
    width:355px;
    height:107px;
    overflow:hidden;
}
#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px top; }
#header #logo.cet {background: url( ../img/logo_cet.png) no-repeat -10px -40px;}

И если класс установлен для 'cat', то все просто отлично, но если он установлен для 'cet', то яне могу увидеть изображение в IE6.В любом другом браузере фон отображается правильно.

Фоновые изображения немного отличаются по размеру, может ли это быть проблемой?

Большое спасибо за ваши ответы

Answer 1

Вам не разрешено смешивать длины и ключевые слова для background(-positon).Старые версии CSS не позволяли этого, поэтому старые браузеры могут не поддерживать это.Вместо

#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px top; }

используйте

#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px 0; }

Кстати, вам нужно проверить свой HTML.Элемент блока, такой как <h1>, не может быть внутри ссылки (<a>).