Hi, I've created a nav bar using a background image for rollover effects. Everything works as I had hoped, however, for some reason it seems that an area of whitespace (the same size of the background image) is hyperlinked underneath the nav bar. I can't see any errors in the coding below. Any ideas what may be causing this?
the page is at http://www.maguiresonline.co.uk/wosi...nickysnav.html
the html....
the CSS
the page is at http://www.maguiresonline.co.uk/wosi...nickysnav.html
the html....
Code:
<body id="pageBeaconhurst"> <ul id="nav"> <li id="navBeaconhurst"><a href="step10.html">Beaconhurst</a></li> <li id="navBelmont"><a href="step10_shop.html">Belmont</a></li> <li id="navCraigholme"><a href="step10_artists.html">Craigholme</a></li> <li id="navFernhill"><a href="step10_links.html">Fernhill</a></li> <li id="navGlasgowacademy"><a href="step10_about.html">Glasgowacademy</a></li> <li id="navHamilton"><a href="step10_about.html">Hamilton</a></li> <li id="navHighschool"><a href="step10_about.html">Highschool</a></li> <li id="navHutchesons"><a href="step10_about.html">Hutchesons</a></li> <li id="navKelvinside"><a href="step10_about.html">Kelvinside</a></li> <li id="navLomond"><a href="step10_about.html">Lomond</a></li> <li id="navStaloysius"><a href="step10_about.html">Staloysius</a></li> <li id="navStcolumbas"><a href="step10_about.html">Stcolumbas</a></li> <li id="navWellington"><a href="step10_about.html">Wellington</a></li> </ul> </body>
Code:
/* CSS Document */
ul#nav li {float:left; list-style-type:none}
ul#nav li a {height:240px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none}
li#navBeaconhurst a, li#navBelmont a, li#navCraigholme a, li#navFernhill a, li#navGlasgowacademy a, li#navHamilton a, li#navHighschool a,
li#navHutchesons a, li#navKelvinside a, li#navLomond a, li#navStaloysius a, li#navStcolumbas a, li#navWellington a{ background-image:url(schoolsnav.jpg) ; background-repeat:no-repeat;}
li#navBeaconhurst a {background-position:0 0; width:168px; left:0; margin-top:0px;}
li#navBeaconhurst a:hover {background-position:-168px 0px;}
body#pageBeaconhurst li#navBeaconhurst a {background-position:-338px 0px;}
li#navBelmont a {background-position:0 -21px; width:168px; left:0; margin-top:21px;}
li#navBelmont a:hover {background-position:-168px -21px;}
body#pageBelmont li#navBelmont a {background-position:-338px -21px;}
li#navCraigholme a {background-position:0 -39px; width:168px; left:0;margin-top:39px;}
li#navCraigholme a:hover {background-position:-168px -39px;}
body#pageCraigholme li#navCraigholme a {background-position:-338px -39px;}
li#navFernhill a {background-position:0 -58px; width:168px; left:0; margin-top:58px;}
li#navFernhill a:hover {background-position:-168px -58px;}
body#pageFernhill li#navFernhill a {background-position:-338px -58px;}
li#navGlasgowacademy a {background-position: 0 -76px; width:168px; left:0; margin-top:76px;}
li#navGlasgowacademy a:hover {background-position:-168px -76px;}
body#pageGlasgowacademy li#navGlasgowacademy a {background-position:-336px -76px;}
li#navHamilton a {background-position:0 -94px; width:168px; left:0; margin-top:94px;}
li#navHamilton a:hover {background-position:-168px -94px;}
body#pageHamilton li#navHamilton a {background-position:-338px -94px;}
li#navHighschool a {background-position: 0 -112px; width:168px; left:0; margin-top:112px;}
li#navHighschool a:hover {background-position:-168px -112px;}
body#pageHighschool li#navHighschool a {background-position:-338px -112px;}
li#navHutchesons a {background-position:0 -130px; width:168px; left:0; margin-top:130px;}
li#navHutchesons a:hover {background-position:-168px -130px;}
body#pageHutchesons li#navHutchesons a {background-position:-338px -130px;}
li#navKelvinside a {background-position:0 -147px; width:168px; left:0; margin-top:147px;}
li#navKelvinside a:hover {background-position:-168px -147px;}
body#pageKelvinside li#navKelvinside a {background-position:-338px -147px;}
li#navLomond a {background-position:0 -166px; width:168px; left:0; margin-top:166px;}
li#navLomond a:hover {background-position:-168px -166px;}
body#pageLomond li#navLomond a {background-position:-338px -166px;}
li#navStaloysius a {background-position:0 -185px; width:168px; left:0; margin-top:185px;}
li#navStaloysius a:hover {background-position:-168px -185px;}
body#pageStaloysius li#navStaloysius a {background-position:-338px -185px;}
li#navStcolumbas a {background-position:0 -202px; width:168px; left:0; margin-top:202px;}
li#navStcolumbas a:hover {background-position:-168px -202px;}
body#pageStcolumbas li#navStcolumbas a {background-position:-338px -202px;}
li#navWellington a {background-position:0 -223px; width:168px; left:0; margin-top:223px;}
li#navWellington a:hover {background-position:-168px -223px;}
body#pageWellington li#navWellington a {background-position:-338px -223px;}
Comment