Home > How to fix the CSS border bug in IE8

How to fix the CSS border bug in IE8
Posted by Kaleb Brasee on Saturday, October 30th, 2010 at 12:08 PM
I ran into a problem where the CSS border property wasn't showing up on several HTML elements in Internet Explorer 8. I wanted a border-bottom to appear on hover, but it wouldn't display. Firefox and other browsers worked correctly.

The trick was to add position: relative to the associated CSS definition. Here's how I got the border to show up on hover:
.category_item_title a {
	text-decoration:  none;
	color: #3C2517;
}

.category_item_title a:hover {
	border-bottom: 4px dotted #3C2518;
	position: relative; /* ADDED THIS! */
}
Once I added position: relative on hover, it displayed perfectly. Why? I have no idea. But it works, and I am happy.