CODEWITHSUNDEEP
htmlcssanchor
user186585
user186585

Reputation: 512

Unclickable anchor tag

I use this html code

<div class="titleIn"> 
    <h2><a href="/link2">link2</a></h2>
</div>

and for some reason the link2 is not clickable (no hand cursor)

The CSS is:

.titleIn {
    direction: rtl;
    margin-bottom: 10px;
    margin-right: 0;
    margin-top: -10px;
    position: relative;
    text-align: right;
    z-index: -1;
}

Any idea?

Upvotes: 2

Views: 2896

Answers (3)

Kasumi
Kasumi

Reputation: 921

Unless you made the body's z-index <-1, you are essentially putting the link behind the entire body of the page, of course it's not click-able. (Elements such as body and headings will span the entire width that it is defined, thus invisibly blocking other elements that maybe visible, but not click-able)

If you used Firebug, it will illustrate that pretty well by highlighting the area of the tag.

Upvotes: 4

Spiny Norman
Spiny Norman

Reputation: 8347

Well, when I try this in IE, the link becomes active only after I remove position: relative; and margin-top: -10px;. Soooo, do you really need the position: relative? :)

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1075567

I can't say I know why, but I know what's causing it: Your z-index: -1. If you remove that, the problem goes away (at least, it does for me on Chrome, Firefox, and Opera; not on IE6 or IE7, though). Here's a live copy of your example, and an updated copy with z-index: 0 instead.

By giving it a z-index less than zero, you're putting it below the main flow content, and I guess the document isn't letting the event pass through it (just like any element with a non-transparent background setting).

IE seems to have a separate issue with the combination of direction: rtl; and position: relative;, but I think it is a separate issue. If I remove every style in .titleIn except direction: rtl; position: relative;, IE still breaks (the link is unclickable). If I remove either of those, IE starts working (but of course, your layout doesn't do what you want).

Upvotes: 8

Related Questions