My button is not displaying the hover state image in IE7 and IE8. (haven't tested in 6)

Here is the site http://www.remodelcrazy.com/forum/ , blog button in header.

html:

<td align="left" class="blog-button-td">
<div id="blog-button-div">
<a id="blog-button" href="http://www.remodelcrazy.com/" title="Remodel Crazy Blog - Construction industry articles" <span class="blog-button-text">Remodel Crazy Blog</span></a>
</div>
</td>

CSS:

td.blog-button-td {width:172px; vertical-align: top;}

div#blog-button-div {width:172px;height:55px; }

div#blog-button-div a#blog-button {display:block;
width:172px;
height:55px;
background: transparent url(images/blog-button.png ); 
padding-top:0px;
margin-top:-1px;
margin-left:24px; }

div#blog-button-div a#blog-button:hover {
background: url(images/blog-button.png )172px 0px; }

span.blog-button-text {margin-left:-999px; }

Try:
div#blog-button-div a#blog-button:link,
div#blog-button-div a#blog-button:visited {display:block;.....

I have had problems not following the LoVe HAte method. (Link,Visited, Hover,Active)

I think it is a good rule to use these, you rarely are aware when you will inherit something from another link.

BTW- The hover state will most likely not work in ie6 depending on what png fix you are using. Many will not work for the png background image "positioned" sprite technique.

Thanks for that. Too much jumping around in projects, I should have had that in there anyway. That didn't fix it but, thanks anyway.

I figured it out after finding this handy tool (although too slow on my older PC, fine on my new one)
Firebug for IE - http://getfirebug.com/lite.html

Appearently IE needs the background position declared seperatley.
This works in IE

div#blog-button-div a:hover, div#blog-button-div a:active {
display:block;
height:54px;
background: url(images/blog-button.png );
background-position: 172px -1px ;
}

This does not work in IE

div#blog-button-div a:hover, div#blog-button-div a:active {
display:block;
height:54px;
background: url(images/blog-button.png )172px -1px ;
}

Just a side-note: you don't need Firebug Lite any more, if you have IE8 installed. Just press "F12". IE8 comes with its own debugging tool now, that is much more powerful than Firebug Lite.

Originally Posted by wayfarer07

Just a side-note: you don't need Firebug Lite any more, if you have IE8 installed. Just press "F12". IE8 comes with its own debugging tool now, that is much more powerful than Firebug Lite.

Thanks for that. I saw that once, but have forgotten about it. I don't have 8 installed on my main computer.

Personally, I don't have IE7 installed on any of my computers anymore, since IE8 does such an excellent job of emulating it when needed. The debugging tool allows you to instantly switch to IE7 mode if needed.