no background for <a> in ie6

Question

Don't know how to fix it. I've trying to make different logotypes, depending on class of the tag. The html is:

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

And css is:

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

And if the class is set for 'cat' everything is just fine, but if it's set for 'cet' i can not see the image in IE6. In any other browser the background displays correctly.

The background images are little different by size, can it be the problem?

Thank you very much for your answers

Answer 1

You are not allowed mix lengths and keywords for the background(-positon). Old CSS versions didn't allow it, so older browsers may not support it. Instead of

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

use

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

BTW, You need to check your HTML. A block element such as <h1> may not be inside a link (<a>).