[SOLVED] CSS Background-Position Rollover Broken in IE

[Hartley]

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

.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

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

[haku]

<a href="newthread.php?[code]$session[sessionurl]

do=newthread&f=$foruminfo[forumid]" rel="nofollow"><img src="clear.gif" alt="$vbphrase[post_new_thread]" border="0" /></a>[/code]

 

You seem to be mixing php code and html together, but it doesnt appear to be part of an echo statement. Maybe this is causing your problem.

[mikemessiah]

Try add:

 

padding:0; margin:0;

 

to the a and the  a:hover.

 

Otherwise plz give link to online code.

[Hartley]

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

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

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