 so my co worker at work today was slicing a design and the designer said that the navigation had to be images being the good little accessibility people that we were we were trying to figure out a way to use images but have text also show up when images are disabled so my co worker went with the quick fix for now a javascript onmouseover solution and i told him that it was lame i told him there had to be a way to use css to do it i didnt have time to do it at work so i played with it and i have found a solution the markup ok so everyone knows to mark up navigation in an unordered list ul id= nav lia href= text to cover here a li lia href= text to cover here a li lia href= text to cover here a li lia href= text to cover here a li ul now instead of placing an image in the anchor tag and then using javascript to change the hover state i thought why not just add an extra span at the end of the anchor tag i chose the end but it also works with it at the beginning i think it makes more sense to have it at the end though so that the text within the anchor tag is read first by screen readers and bots so this is what our markup looks like now ul id= nav lia href= text to cover herespan span a li lia href= text to cover herespan span a li lia href= text to cover herespan span a li lia href= text to cover herespan span a li ul lets style it so i started off with just some normal styles that you would apply to a navigation zeroing out margins and paddings floating it removing the list styling and giving it a width next i floated the list items so that they would be in a line horizontally this is where it finally gets interesting i promise i styled the anchor tag like so ul nav li a background ffff99 display block height 30px padding 0 5px width 115px since this is just an example i put a random background color on to make sure it didnt show through in the final example and i gave them all the same width not a likely situation but i didnt feel like giving each list item an id that should be self explanatory enough now when i think back to the talk that eric meyer at an event apart boston he kept stressing that to a browser an element is just an element and you can do anything to it so my plan was to just set the anchor tag to be relatively positioned so that it would contain the span the next step is to add the background image to the span now one thing that needs to be realized is that you cannot use a transparent image but i dont think that really causes much of a problem in most cases ul nav li a span background url images content 2008 01 nav gif no repeat 0 30px cursor pointer display block height 30px left 0 position absolute top 0 width 125px the only things to note from that is that i combined the normal and hover states into one awesome image i wasnt worried about how pretty it looked i also had to add the cursor property for our best friend ie6 ok cool we are on our way now we just need to shift the background image on the hover state ul nav li a hover span background url images content 2008 01 nav gif no repeat 0 0 voila it works like a charm check out the example but did you check it in ie6 when i checked it in firefox and ie7 everything worked beautifully you can turn off the images and you get the text underneath when you do check it in ie6 you will notice that the hover states stay on its very odd after a lot of tinkering i finally found something that worked if you add the following to the anchor when it is in its hovered state it for some reason fixes it ul nav li a hover background 0 0 i have no explanation but it does not seem to have any adverse affects on other browsers lets bulletproof it we can add a simple property to the anchor tag so that when someone resizes their text it does not poke out from under the image ul nav li a background ffff99 display block height 30px overflow hidden added for bulletproofing padding 0 5px position relative width 115px check out the final example more bulletproofing if you wanted the text to resize gracefully when images are disabled i suppose you could set your height in ems then you would just need to build some extra blank space into your image so that it would work when images are enabled so hopefully that helps out my co worker i think it potentially solves a pretty big problem with css image navigation with images disabled 