Search code examples
htmlcssinternet-explorerpngimage-replacement

CSS image replacement not working in MSIE 7 and 8

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;}
Solution

  • 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 {}