View Full Version : CSS nested elements deactivating links. Help please!

Nov 20th, 2009, 07:48 PM
I'm having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I'm a bit of a beginner still so maybe this is a simple fix but I've spent over a days worth of time now trying to figure it out on my own and can't seem to get it.

Just to clear this up, the links work everywhere on the page outside of the "box" element I'll list below and I've double and triple checked that the link within the "box" element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated...

This is the code that creates the box and it works correctly...

.box {
background:url(../imgs/box-spacer.gif) repeat-y;

.box h1 {
background:url(../imgs/box-top.gif) no-repeat left top;
font-weight: normal;


.box .last {
background:url(../imgs/box-bottom.gif) no-repeat left bottom;

.box h1, .box p {

And this is the code I used to test that the page is seeing it as a link...

.box h1 a:link {

.box h1 a:hover {
color: #FF0066;

It changes the color correctly but the hover doesn't work and if you click, it doesn't link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it. Also, the website is up at http://www.fiddlergroup.com/zygote if it helps. The particular page I was using for testing is the "what's in a name" page. As you'll see, all the code and pages and what not is all very simple, just can't seem to figure out how to fix this one odd issue.

Nov 20th, 2009, 08:19 PM
Hello bFig,
Removing the negative z-index brings your link back -

#holder {
width: 831px;
height: auto;
margin-right: auto;
margin-left: auto;
position: relative;

This help from adobe.com may have your answer - http://kb2.adobe.com/cps/155/tn_15523.html

Nov 20th, 2009, 08:31 PM
I think it's the z-index:-100 on #holder. If I remove this in Firebug the link becomes clickable...

Not sure why you have the z-index set like this - maybe you can just remove it.

Edit:Ah, Excavator has beaten me to it...:)

Nov 20th, 2009, 11:23 PM
Geez, I didn't even notice that. I'm still learning but I should have caught that. Thanks a bunch guys! The extra set of eyes is a big help.