Question

I’m having an issue using the empty span css image replacement technique in IE 7 & 8. My logo (transparent png) is missing. I’m assuming that it has something to do with the negative text-indent? Works in all other browsers flawlessly. Any help would be greatly appreciated!

<h1 class="logo grid_8"><a href="index.html">The Bandwagon<span></span></a></h1>

.grid_8 {text-indent:-1000em; margin:-30px 10px 0 0;}

.logo .grid_8 a{
position:relative;
display:block;
width: 470px;
height: 150px;
overflow:hidden;}

.grid_8 span {
display:block;
position:relative;
width:470px; 
height:150px;
background:url("../img/TBWlogo.png")no-repeat left top;
z-index:1000;}

Answer 1

It seems the missing space before the no-repeat breaks IE. Try this:

background:url("../img/TBWlogo.png") no-repeat left top;

The selector .logo .grid_8 a selects an a element under a element with the class grid_8 under the class logo. According to your markup I think I think you like to select an a element under an element with both classes (logo and grid_8).

To select an element with multiple classes you need to remove the spaces here.

.logo.grid_8 a {}