Media Matt

Web designers often accent a link with an image of an arrow or some other icon. The most common way to apply this image to links across a site is to use the background attribute in CSS. A common error occurs in IE6 and IE7 that causes the background image to display improperly when the link appears at a line wrap.

If you view this page in IE6 or IE7, you will this bug here:

In order to fix this bug, you must use display: inline-block; in combination with line-height: normal; (with your specific line-height) to acheive the same effect in IE6 and IE7 as you do in FireFox. According to the W3C CSS 2.1 Specification, the inline-block causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.

If you view this page in IE6 or IE7, you will see this bug is fixed:

If you are viewing this in FireFox, then both samples will look the same.

Here is the full HTML and CSS code for this example:

a.ReadMore {
	padding: 0 12px 0 0;
	font-family: Verdana, Sans-Serif;
	font-size: 75%;
	color: #87BCD2;
	text-decoration: underline;
	background: url(/wp-content/uploads/2008/10/arrow-blue.gif) no-repeat right .5em;
	display: inline-block;
	line-height: normal;
}

a.ReadMore:hover {
	text-decoration: none;
}

<div class='box'>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In aliquam ultrices
ligula. Quisque imperdiet eleifend nulla. Curabitur quis mauris vitae sem
volutpat viverra. Phasellus turpis urna, blandit ac, semper et, scelerisque
 non, libero. Integer. <a class='ReadMore' href='#'><strong>Read More</strong></a></div>