CODEWITHSUNDEEP
htmlcssinternet-explorerpngsprite
user1835406
user1835406

Reputation: 49

Sprites in Internet Explorer 6/7

I cant seem to make my sprites work correctly in IE 7 and below. (IE 9 works fine) Below is my CSS:

#info 
{
    width:100%;
    height:77px;
    background:url('../img/ck_sprite.png')no-repeat;
    background-position: 0px 0px;
    float:left;
    display:block;
    clear:both;
}
#info:hover
{ 
    width:100%;
    background:url('../img/ck_sprite.png')no-repeat;
    background-position: 0px -300px;
    cursor: default;
    float:left;
}

There's two more classes like this

I have tried to search the place for fixes to this problem, the solutions just does not apply for my problem.

EDIT: Sorry, i didnt describe my actual problem. The image does not display at all in IE.

Here is my html code:

              <div id="info">
              </div>        

                    <asp:Literal ID="litInfo" runat="server" />        



              <div id="bestilling">
              </div>          
                    <asp:Literal ID="litBestilling" runat="server" />          


              <div id="kontakt">

                    <asp:Literal ID="litKontakt" runat="server" />

As you can see, im coding the site in C#. The literals are placed outside of the div's because the only thing they should contain is the image. (They work as headlines)

Upvotes: 1

Views: 128

Answers (1)

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14774

You didn't supply your HTML, so I'm going to assume your tag the ID is applied to is not an anchor tag?

IE6/7 only supports :hover pseudo on anchor tags.

This should work:

a#info 
{
    width:100%;
    height:77px;
    background:url('../img/ck_sprite.png')no-repeat;
    background-position: 0px 0px;
    float:left;
    display:block;
    clear:both;
}
a#info:hover
{ 
    width:100%;
    background:url('../img/ck_sprite.png')no-repeat;
    background-position: 0px -300px;
    cursor: default;
    float:left;
}

...if your HTML is:

<p><a id="info" href="#">Hello World</a></p>

Hope that works? Give some further information for a better answer!

Thanks, Michael.

Upvotes: 2

Related Questions