IE 8 hover problem solved

Updated: IE 8 Release Candidate 1 fixes this problem.

Well, I answered my own question. Setting the anchor tag display property to “block” causes the background color assigned on hover not to display in IE 8. By resetting the display property to “inline-block” on hover, the background color will display. However, this has to be isolated for IE only, as it affects other browsers.


body#home #col-main ul#news li a {
  padding: 0.5em 0;
  color: #666;
  display: block;
}

body#home #col-main ul#news li a:hover {
  background-color: #eaeaea;
  color: #333;
  text-decoration: none;
  display: inline-block;
}

If the text contained within the link does not fill the available space, and you want the background color to fill the entire width to be more button-like, specify a width of 100% on the a:hover declaration.

Leave a Reply

Your email address will not be published. Required fields are marked *