473,581 Members | 3,096 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Problem with navbar background image - hyperlinking whitespace

25 New Member
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
1 2439
nicky77
25 New Member
All fixed now - the problem was having a height of 240px for each li a element!
Aug 23 '07 #2

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

Similar topics

6
2249
by: Robert Lapes | last post by:
I'm just getting into using CSS and I'm having a problem getting Opera to display a Navigation Bar in the same way as IE6. Can someone please point me in the right direction? The site I'm working on can be seen at http://www.budbury.co.uk/itel/index.htm In Opera 6.05 the Nav Bar image floats behind the content division that follows the...
4
6367
by: Applebrown | last post by:
Greetings, I'm attempting to make a simple horizontal navbar with three image links, and with those images replaced on hover and active... and I'm not sure of the proper CSS to do this, though I've tried unsuccessfully. This is the site: www.sunbadgeco.com/sunmetal/index.htm Here's my simple centered navbar with extraneous (alt) coding...
4
3435
by: Albert Browne | last post by:
I am redesigning a web site to use css in place of tables. I am having a problem with the display: block; statement. With the display: block statement in place in the navbar div I am getting spaces between the lines. this can be seen at http://mildenhallgroup.org.uk/newsletter-new.htm With the display statement removed the spaces go but the...
7
5117
by: Nilesh | last post by:
I am using background-image attribute in a CSS file and linking the CSS file to aspx page. But strangly, background-image attribute is not working for relative URL. e.g. If I apply following css ..navbar-background { background-image: url(images/menubar.gif); } the image is not appearing on the page. It seems that IE is picking
1
2164
by: sweep | last post by:
Hi there, I am redeveloping my site to use CSS and have come up against a problem. The page I'm working on is at http://staging.proscenia.co.uk/revised%20simpler%20CSS%20floats%20version.html and the stylesheet at http://staging.proscenia.co.uk/projectpage.css To create the navigation bar, I have styled the <A> tags to use a background...
3
1644
by: sevenalive | last post by:
Hi-- I am very new at this and trying to teach myself, and I have run into a roadblock that I can't figure out no matter how many times I Google it......my navbar is a vertical column of images, and I want it to go up next to the rest of the page (which consists of a banner image, a h1 image, and some text). It insists on beginning itself below...
2
2540
by: dartanian | last post by:
I have a fluid horizontal navbar on my website which is formatted using floats and percentage widths to make it fluid. This looks great in WinXP Firefox, Opera, and even IE6. Safari and IE7 render it incorrectly. I've tried playing with the ul, li, a css but can't get this to look right in the latter 2 browsers. The site is sinaiem.org . Any...
5
1889
by: creative1 | last post by:
hi everyone, I am struck in layout of my site. Im using 1024 fixed width layout. I have a site layout designed in psd files. Bisically I have to stick with that design tightly and I am asked not to chnage even a pixel. As I am not too good so I though why not ask you. I am using dreameweaver for my ease in design. The problem is "expanding box...
4
3897
by: jeddiki | last post by:
Hi, I have been tinkering with this for a few hours now, but I just can not see why the left hand side column extends past my footer div. You can see what I mean here: http://www.expert-world.com/sp/problem1.jpg What I want is for the footer to be lower so that it includes all of the
0
7788
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8139
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8299
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7890
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
8166
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
5357
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3799
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3813
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1398
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.