... While on the topic, I would have never chosen to do my navigation like this in a million years, -I figured that this was obvious to even the most causual of observers (hense, that I didn't bring it up first).
I re-did this in about 15-mins. using (I beleive) Stu Nicholls' little treat, -it's an "<ul>" now, and validates on TIDY, works IE6 / Fx 2.0.0.9.
I'm including the image in case you altered it in any way (size, etc.) but I doubt if you'd have done that. :D <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus" />
<meta name="Author" content="" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<!-- bssed entirely upon a model provided by cssplay.uk -->
<style type="text/css">
* {margin:0; padding:0; border:0;}/* Re-set IE to "zero" for these values */
body {background-color:#d8d8d8;}
#navigation {width:409px; height:449px; background: url(images/SID_NAVIGATION.png);
position:relative; margin:30px;}
#navigation li {margin:0; padding:0; list-style:none; display:block; position:absolute; border:none;}
#navigation a {display:block;}
#navigation1 {left:-5px; top:125px; width:35px; height:73px;}
#navigation2 {left:55px; top:130px; width:35px; height:73px;}
#navigation3 {left:149px; top:259px; width:35px; height:76px;}
#navigation4 {left:212px; top: 90px; width:35px; height:88px;}
#navigation5 {left:280px; top:211px; width:35px; height:127px;}
#navigation6 {left:378px; top:256px; width:35px; height:100px;}
/* do NOT declare any WIDTH on these next */
#navigation1 a {height:73px;}
#navigation2 a {height:73px;}
#navigation3 a {height:76px;}
#navigation4 a {height:88px;}
#navigation5 a {height:127px;}
#navigation6 a {height:100px;}
#navigation1 a:hover {background: url(images/navigation.png) -126px -256px no-repeat;}
#navigation2 a:hover {background: url(images/navigation.png) -170px -553px no-repeat;}
#navigation3 a:hover {background: url(images/navigation.png) -9px -313px no-repeat;}
#navigation4 a:hover {background: url(images/navigation.png) -70px -517px no-repeat;}
#navigation5 a:hover {background: url(images/navigation.png) -124px -364px no-repeat;}
#navigation6 a:hover {background: url(images/navigation.png) -94px -364px no-repeat;}
/* Remove this next line: it is only to show the 'hot spot' of the psuedo-class :hover */
#navigation1 a:hover, #navigation2 a:hover , #navigation3 a:hover, #navigation4 a:hover, #navigation5 a:hover, #navigation6 a:hover {border:1px solid red;}
</style>
</head>
<body>
<ul id="navigation">
<!-- Name of link is on colored image of flower. -->
<li id="navigation1"><a href="#nogo" title='Click to go to "HOME"'></a></li>
<li id="navigation2"><a href="#nogo" title='Click to go to "NEWS"'></a></li>
<li id="navigation3"><a href="#nogo" title='Click to go to "ABOUT"'></a></li>
<li id="navigation4"><a href="#nogo" title='Click to go to "EVENTS"'></a></li>
<li id="navigation5"><a href="#nogo" title='Click to go to "RESOURCES"'></a></li>
<li id="navigation6"><a href="#nogo" title='Click to go to "GALLERY"'></a></li>
</ul>
</body>
</html> what would be kewl now is, to have a CSS 'tool tip' box pop-up on-hover. Interested? I'll retain copy of this code for a few days, -could try doing this for personal know-how and if you want to see, I'll post-up again.
:)