views:

34

answers:

1

I'm using HTML5 reset as the basis for writing an HTML5/CSS3 website. For some reason though, basic anchor tags are no longer clickable in anything other than IE!

<a href="http://www.google.com"&gt;google&lt;/a&gt; renders in the correct colour text for A tags, but no hover effect is being applied, the pointer doesn't change and I cant click the link. Firebug gives me the following when I inspect it:

 a {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:0 none;
color:#555555;
font-size:100%;
margin:0;
padding:0;
text-decoration:none;
text-transform:lowercase;
vertical-align:baseline;
}

*|*:link {
color:#0000EE;
}

*|*:-moz-any-link {
text-decoration:underline;
}

:-moz-any-link {
cursor:pointer;
}

So nothing of note I can see, and it does the same in Chrome and Opera, so I'm a bit miffed. Im developing on my local host so have no URL to post at present, but the HTML markup being rendered is nothing amazing:

    <div id="copyanddesign">
        &copy; Someone 2010. 
        Design by <a href="http://www.google.com"&gt;google&lt;/a&gt;
    </div>

Any suggestions most welcome!

Thanks

A: 

Thanks. bobince was correct. It was indeed a z-index issue (although not IE related, but across all browsers). Turned out another absolutely positioned element was overlapping it, and even though the overlapping part was transparent, it was still receiving the clicks rather than the hyperlinks! Fiddled about with the height of the element to only make it as tall as I needed and now the link works

LDJ