css menu

[johnz]

ive made a rollover menu using only one image
http://tinypic.com/11jrjpx.jpg
each selection is a different position on the image and the same with the rollover.

i am having 2 problems:
the images only appear when viewing through IE. when i look at the page in firefox its just blank, there is nothing there.

i need the images to line up next to each other horizontally. when i add float:left to the stylesheet the image just dissapears when you view it.

http://coastal.awardspace.com/scripts/menu.htm

[Joe]

Nothing shows in Firefox because you are using number as the start of your ID names, FF doesn't like this for some reason.

[johnz]

thanks for the heads up. ive gone and changed all the ids to letters and it still doesnt seem to come up in FF...

[Kravvitz]

Three other things.
1) <div> elements are not allowed in <a> elements. Give the <a> elements display:block instead.
2) The W3C recommends that browsers ignore empty block level elements, like those <div>s in the <a>s.
3) You should use some form of Image Replacement.
I use the Gilder/Levin Method of CSS Image Replacement (http://www.mezzoblue.com/tests/revised-image-replacement/index.php#gilderlevin) which uses an empty span element, because it's the method that's still usable with the images disabled and CSS enabled scenario, which to me is more important than the empty span elements.

[johnz]

thanks kravitz, i completely removed those blank divs and then added disaply:block to the <a> elements and then added float:left also and it works perfectly.

thanks for your help.

http://coastal.awardspace.com/home.htm