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

 
<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

Expand|Select|Wrap|Line Numbers

 
/* 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;}

Aug 23 '07 #1

Subscribe Reply

2425

nicky77

New Member

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

Aug 23 '07 #2

Similar topics

2241

Problem with height of Nav Bar with image in Opera 6.05

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...

HTML / CSS

6364

Navbar Image Rollover using CSS

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...

HTML / CSS

3426

Diplay: Block problem

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...

HTML / CSS

5112

background-image problem while using CSS for aspx page

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...

ASP.NET

2157

IE6 Background Image "wraps" problem

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...

HTML / CSS

1633

navbar won't go up next to everything else; insists on being underneath

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,...

HTML / CSS

2527

Horizontal navbar formatting incorrectly in IE7 and Safari

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...

HTML / CSS

1876

Problem in layout of website

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...

HTML / CSS

3891

Problem with div display height

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: ...

HTML / CSS

6989

Changing the language in Windows 10

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...

Windows Server

7157

Problem With Comparison Operator <=> in G++

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,...

C / C++

7195

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing

6873

The easy way to turn off automatic updates for Windows 10/11

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...

Windows Server

7367

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

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...

General

5453

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

3078

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1400

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

285

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General