padding making links not work?

Question

The link only works when i click on the actual text not the area around it even though the hover effect is working so i know the button is being targeted?

this is also happening on a list within the site where I'm using left-padding and placing images there, if i click where the padding is it doesn't work?

could .js scripts effect this, it all for a lightbox I'm using

Any ideas??

ul#navigation { 
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding: 0;
  }

ul#navigation li a {
  position: absolute;
  bottom: 10px; 
  display: block;
  width: 5em;
  padding: .5em 0;
  color: #FFF;
  background: #92da3a;
  text-align: center;
  text-decoration: none;
  font-size: 11px; 
  }

ul#navigation li a:hover {
  color: #05554f;
  }

ul#navigation .back {
  float: left;
  width: 4em;
  padding: 10px;
  }

ul#navigation .close {
  float: right;
  width: 4em;
  padding: 10px;
  }

ul#navigation li.mt {
  border-bottom: 2px solid #92da3a; 
  width: 480px; 
  position: absolute; bottom: 30px; left: 20px;
  }

Many thanks :)

Answer 1

Off the top of my head, I'm thinking to render each as a element instead, then setting the span's onclick event to follow the link and putting whatever spaces and text you want within the span ( ).

window.location = "URL!"

Answer 2

There is nothing wrong with the CSS for ul#navigation li a. I have copied your CSS to a working example and this appears to function correctly in FF3, IE7 and Chrome.

I wouldn't expect a (well written) piece of JavaScript to be interfering with your links in any way. Although, in general, a given piece of unknown JavaScript could be doing anything.

You have too many factors influencing the final rendering and behaviour to determine what may be the cause. You will need to start with a bare minimum and re-add all relevant factors until it breaks, or until everything is re-added and working correctly.

• start with a (validating) plain (X)HTML document
• add the relevant CSS to get the link styling you desire
• add back the rest of the CSS, possibly piece-by-piece if some other CSS rules are interfering
• add back your JavaScript, again piece-by-piece where relevant

After this process you should have a more clear idea of what factor is causing the undesired behaviour.

I'd recommend using the FireFox web developer toolbar to examine what CSS rules are being applied to your navigation links. You may find some other loosely-specified rules are interfering in otherwise unexpected ways.

You should also confirm your markup and CSS are valid - you can't accurately determine the correct output when dealing with invalid input.

Answer 3

Let me guess, IE6?

You really need to specify the browser here with the issue, because there can be vast differneces between different rendering engines. Usually IE6 vs everyone else, with Safari and Opera adding their salt.

To answer your question, in IE6 sometimes the cursor does not show the "hand" icon, however clicking the area will trigger the link. In that case adding a "cursor:hand" (or whatever it was, looku pthe css property), will fix that for IE6.

Answer 4

Id try setting the the UL or LI to position relative, considering you have the A set to position: absolute;

Having this set may be causing some wierdness.

If you can also supply the HTML you are using, that will help nail down the issue.