CSS Background-Position Rollover Broken in IE

[Aerdan]

This displays properly in Firefox with the rollover, and the image itself appears in Internet Explorer. However, IE doesn't hover properly nor does it indicate it's a link (with the hand), but it's still clickable. Here's the CSS and then the code used to make it happen. Anyone know how to fix this?

Link to Site (New Thread button)

CSS

Code: Select all

.newthread a {
    display:block;
    width:105px;
    height:24px;
    background:url(../../images/cb-template-1/buttons/newthread.png);
}

.newthread a:hover {
    background-position: 0 -24px; }

HTML

Code: Select all

<div class="newthread">
<a href="newthread.php?$session[sessionurl]do=newthread&amp;f=$foruminfo[forumid]" rel="nofollow"><img src="clear.gif" alt="$vbphrase[post_new_thread]" border="0" /></a>
</div>

[Aso]

Try this instead;

Code: Select all

.newthread a {
    display:block;
    width:105px;
    height:24px;
    background:url(../../images/cb-template-1/buttons/newthread.png);
    overflow: hidden;
}

.newthread a img {
   border: none;
}

.newthread a:hover {
    background-position: 0 -24px;
    text-indent: -5000px
}

HTML

HTML: Select all

<div class="newthread">
<a href="newthread.php?$session[sessionurl]do=newthread&amp;f=$foruminfo[forumid]" rel="nofollow"><img src="../../images/cb-template-1/buttons/newthread.png" alt="$vbphrase[post_new_thread]" /></a>
</div>

[Aerdan]

Hey everyone, the problem was solved. For sake of knowing the actual problem and the solution, here's what happened:

The PNG files I use have transparency in them. Because of this, I have a separate file that fixes the alpha transparency for IE. A common problem with this approach is the inability to select anything within the container. What I did was turn the gray part of the button into a background. Within that container, using position:relative to "fix" a layer above it, I did the same thing with just a .jpg file as the background image that rolls over. End result:

http://www.castbuzz.com/community/forumdisplay.php?f=20

CSS

Code: Select all

.buttongray {
    display:block;
    width:105px;
    height:24px;
    background:url(http://www.castbuzz.com/community/images/cb-template-1/buttons/button.png);
    overflow:hidden;
    padding:0px;
    margin:0px;
}

.newthread a {
    display:block;
    position:relative;
    width:92px;
    height:16px;
    background:url(http://www.castbuzz.com/community/images/cb-template-1/buttons/newthread.jpg);
    overflow:hidden;
    padding:0;
    margin:2px 0 0 4px;
}

.newthread a:hover {
    background-position: 0 -16px;
    text-indent: -5000px;
    padding:0;
    margin:2px 0 0 4px;
}

HTML (within vB)

Code: Select all

<div class="buttongray"><div class="newthread"><a href="newthread.php?$session[sessionurl]do=newthread&amp;f=$foruminfo[forumid]" rel="nofollow"><img src="clear.gif" width="94" height="16" alt="" /></a></div></div>