CSS - Hyperlinks aren't going anywhere...

Question

For some reason that I've been trying to figure out, the links on my page are clickable, but aren't actually going anywhere. The markup itself looks fine, and I can't figure out if there's some issue with the css that is rendering them useless. I recently added in a z-index for the a tag, but, that had no effect. Note: The css below is taken from Firebug, not the actual stylesheet...

Markup:

<li class="">
  <span id="thmr_93" class="thmr_call">
  <a href="/edit/1">Edit</a>
  </span>
</li>

CSS:

.tabs ul.primary, .tabs ul.primary li {
    float:left;
    line-height:normal;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:left;
}

.tabs ul.primary li a {
    color:#008080;
    text-decoration:none;
    height:30px;
    line-height:30px;
    margin:10px;
    width:100%;
    z-index:100;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    text-align:left;
}

Answer 1

I am going to guess, based on the names of the classes (.tabs ... etc) that there is JavaScript on the page trying to make the tabs act like dynamic tabs.

Try removing all the <script> tags from the page (normally they are all in the head or at the bottom of the page) and seeing if it works.

If that fixes it, than something on your page is taking control of your markup to add functionality. Look for files named tabs.js or jquery-ui.js etc. Any of those could cause that problem.

Answer 2

First step would be to reduce the problem. This would be achieved by commenting out any and all CSS until it works again, and then adding the properties back in one by one.

Answer 3

Is the page you're on /edit/1?

Just for a lark change the urls to be complete -- eg http://websitename.com/edit/1

Answer 4

Is there any javascript attached to this line? If a javascript onclick event returns false, the link does not get followed. CSS cannot influence link behaviour AFAIK

Answer 5

Note that if you have some jQuery acting on the link, the link may not appear to work, as the onClick event would have been bound to some other function. Disable JavaScript on the page and try.

Answer 6

CSS does not influnce the behaviour of your control. If on that hyperlink you have a script attached try debugging it with firebug. If you have other scripts that use the submit function try disableing them. And if that fails try putting the relative link on the href like href="~/folder/file.html" or aspx or somethin. eventually the full link with "http://etc."

Answer 7

the tabs are probably loading / editing ajax content (i'm guessing this) and so i'm also guessing the javascript on the page has stopped functioning correctly.

you can use firebug to debug the page :)