Problem with navbar background image - hyperlinking whitespace

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • nicky77
    New Member
    • Aug 2007
    • 25

    Problem with navbar background image - hyperlinking whitespace

    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....
    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>
    the CSS
    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;}
  • nicky77
    New Member
    • Aug 2007
    • 25

    #2
    All fixed now - the problem was having a height of 240px for each li a element!

    Comment

    Working...