Question

CSS:

#content {
    width:630px;
 }

.all_friends {

background:url(../img/friends.png) no-repeat;
margin-left:15px;
height:123px;
width:615px;
padding-bottom:20px;
}


.all_awards {
background:url(../img/awards2.png)no-repeat;
height:126px;
width:581px;
padding-bottom:20px;
margin-left:20px;
}

HTML:

<div id=content>
  <h4>Friends</h4>
   <p>Friends description text</p>
   <div class="all_friends"></div> 

  <h4>Awards</h4>
   <p>Awards description text</p>
   <div class="all_awards"></div>
</div>

In IE7/8, I just don’t understand why the image in “Friends” content block displays in IE7/8, but there in the “Awards” content block, no image displays. I don’t want to put the Awards image as a inline “img” tag, (since it works in the other content block) but that is only way IE will display it. Does anyone know how I can fix this? I’ve had this problem before in IE and I HAD to add the img tag in the markup, but it doesn’t make sense that it works in one content block with the identical rules (exc. image and size) and not show up in the other. I checked here and here, and here, I modified my markup, but nothing is working.

This is crazy. You try to keep your CSS and HTML separate, and sometimes a lot of time is wasted on trying to do these things only to find out that they can not be done…. (rant over)

Thanks!

Answer 1

Try to put a space between background:url(../img/awards2.png) and no-repeat;. It’s the only relevant difference I can see between those two style blocks, unless the image url is wrong.