By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
428,787 Members | 2,251 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 428,787 IT Pros & Developers. It's quick & easy.

Problem with navbar background image - hyperlinking whitespace

P: 25
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....
Expand|Select|Wrap|Line Numbers
  1. <body id="pageBeaconhurst">
  2. <ul id="nav">
  3.   <li id="navBeaconhurst"><a href="step10.html">Beaconhurst</a></li>
  4.   <li id="navBelmont"><a href="step10_shop.html">Belmont</a></li>
  5.   <li id="navCraigholme"><a href="step10_artists.html">Craigholme</a></li>
  6.   <li id="navFernhill"><a href="step10_links.html">Fernhill</a></li>
  7.   <li id="navGlasgowacademy"><a href="step10_about.html">Glasgowacademy</a></li>
  8.   <li id="navHamilton"><a href="step10_about.html">Hamilton</a></li>
  9.   <li id="navHighschool"><a href="step10_about.html">Highschool</a></li>
  10.   <li id="navHutchesons"><a href="step10_about.html">Hutchesons</a></li>
  11.   <li id="navKelvinside"><a href="step10_about.html">Kelvinside</a></li>
  12.   <li id="navLomond"><a href="step10_about.html">Lomond</a></li>
  13.   <li id="navStaloysius"><a href="step10_about.html">Staloysius</a></li>
  14.   <li id="navStcolumbas"><a href="step10_about.html">Stcolumbas</a></li>
  15.   <li id="navWellington"><a href="step10_about.html">Wellington</a></li>
  16. </ul>
  17. </body>
  18.  
the CSS
Expand|Select|Wrap|Line Numbers
  1. /* CSS Document */
  2.  
  3. ul#nav li {float:left; list-style-type:none}
  4. ul#nav li a {height:240px; display:block; position:absolute; top:0; text-indent:-9999px; outline:none}
  5.  
  6. li#navBeaconhurst a, li#navBelmont a, li#navCraigholme a, li#navFernhill a, li#navGlasgowacademy a, li#navHamilton a, li#navHighschool a, 
  7. 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;}
  8.  
  9.  
  10. li#navBeaconhurst a                                                {background-position:0 0; width:168px; left:0; margin-top:0px;}
  11. li#navBeaconhurst a:hover                                            {background-position:-168px 0px;}    
  12. body#pageBeaconhurst li#navBeaconhurst a                             {background-position:-338px 0px;}
  13.  
  14. li#navBelmont a                                                    {background-position:0 -21px; width:168px; left:0; margin-top:21px;}
  15. li#navBelmont  a:hover                                                {background-position:-168px -21px;}    
  16. body#pageBelmont  li#navBelmont a                                    {background-position:-338px -21px;}
  17.  
  18.  
  19. li#navCraigholme a                                                {background-position:0 -39px; width:168px; left:0;margin-top:39px;}
  20. li#navCraigholme a:hover                                            {background-position:-168px -39px;}    
  21. body#pageCraigholme li#navCraigholme a                                {background-position:-338px -39px;}
  22.  
  23. li#navFernhill a                                                    {background-position:0 -58px; width:168px; left:0; margin-top:58px;}
  24. li#navFernhill a:hover                                                {background-position:-168px -58px;}    
  25. body#pageFernhill li#navFernhill a                                    {background-position:-338px -58px;}
  26.  
  27. li#navGlasgowacademy a                                            {background-position: 0 -76px; width:168px; left:0; margin-top:76px;}
  28. li#navGlasgowacademy a:hover                                        {background-position:-168px -76px;}    
  29. body#pageGlasgowacademy li#navGlasgowacademy a                    {background-position:-336px -76px;}
  30.  
  31. li#navHamilton a                                                    {background-position:0 -94px; width:168px; left:0; margin-top:94px;}
  32. li#navHamilton a:hover                                                {background-position:-168px -94px;}    
  33. body#pageHamilton li#navHamilton a                                    {background-position:-338px -94px;}
  34.  
  35. li#navHighschool a                                                    {background-position: 0 -112px; width:168px; left:0; margin-top:112px;}
  36. li#navHighschool a:hover                                            {background-position:-168px -112px;}    
  37. body#pageHighschool li#navHighschool a                                {background-position:-338px -112px;}
  38.  
  39. li#navHutchesons a                                                {background-position:0 -130px; width:168px; left:0; margin-top:130px;}
  40. li#navHutchesons a:hover                                            {background-position:-168px -130px;}    
  41. body#pageHutchesons li#navHutchesons a                                {background-position:-338px -130px;}
  42.  
  43. li#navKelvinside a                                                    {background-position:0 -147px; width:168px; left:0; margin-top:147px;}
  44. li#navKelvinside a:hover                                            {background-position:-168px -147px;}    
  45. body#pageKelvinside li#navKelvinside a                                {background-position:-338px -147px;}
  46.  
  47. li#navLomond a                                                    {background-position:0 -166px; width:168px; left:0; margin-top:166px;}
  48. li#navLomond a:hover                                                {background-position:-168px -166px;}    
  49. body#pageLomond li#navLomond a                                    {background-position:-338px -166px;}
  50.  
  51. li#navStaloysius a                                                    {background-position:0 -185px; width:168px; left:0; margin-top:185px;}
  52. li#navStaloysius a:hover                                            {background-position:-168px -185px;}    
  53. body#pageStaloysius li#navStaloysius a                                {background-position:-338px -185px;}
  54.  
  55. li#navStcolumbas a                                                {background-position:0 -202px; width:168px; left:0; margin-top:202px;}
  56. li#navStcolumbas a:hover                                            {background-position:-168px -202px;}    
  57. body#pageStcolumbas li#navStcolumbas a                                {background-position:-338px -202px;}
  58.  
  59. li#navWellington a                                                {background-position:0 -223px; width:168px; left:0; margin-top:223px;}
  60. li#navWellington a:hover                                            {background-position:-168px -223px;}    
  61. body#pageWellington li#navWellington a                                {background-position:-338px -223px;}
  62.  
Aug 23 '07 #1
Share this Question
Share on Google+
1 Reply


P: 25
All fixed now - the problem was having a height of 240px for each li a element!
Aug 23 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.