CSS Background-Position Rollover Broken in IE

Aerdan · April 16th, 2008, 12:01 AM

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:

.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:

<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 · April 16th, 2008, 08:58 AM

Try this instead;

Code:

.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 Code:

<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 · April 16th, 2008, 04:54 PM

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:

.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:

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