Correct accessible image / text replacement

Stolen from : csswizardry

7.3.2 Gilder/Levin Method

Really great method…

By far the most robust and accessible method to date is the Gilder/Levin method (no URL available). This method maintains its integrity with all combinations of images on/off and CSS on/off.

This method works by laying an empty <span> over the top of the parent element with the required image applied as a background to that <span>:

Markup:

<h1><a href="./" title="Return Home"><span></span>Home</a></h1>

CSS:

#header h1 a{
	display:block; /* Required */
	width:250px; /* Width of image in question */
	height:70px; /* Height of image in question */
	position:relative; /* Required */
}
#header h1 a span{
	position:absolute; /* Required */
	width:100%; /* Stretch full width of parent */
	height:100%; /* Stretch full height of parent */
	background:url(images/logo.gif) top left no-repeat; /* Image */
	cursor:pointer; /* Required for links to appear like links in IE */
}

…but has its drawbacks:

There is however a drawback to this method; the empty <span>. This is bearable though as the <span> will have no impact on the usability/accessibility on the page, and will only impact ever so slightly on semantics. Now users can always see an image or text regardless of whether they have CSS and/or images disabled.

Weird first list item indent IE 6/7 – fix!

For some reason – IE 6/7 has a bug *sometimes* of making the first item of a list indented *RANDOM*

so your list looks like this:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Which will end up looking something like this (yes I just dummied it to look like this – it’s not the actual error):

• Item 1
• Item 2
• Item 3

To fix it:

ul{
min-height: 1%;
}

ta da!