Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS nested elements deactivating links. Help please!

    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...

    Code:
    .box {
    	width:831px;
    	background:url(../imgs/box-spacer.gif) repeat-y;
    }
    
    .box h1 {
    	background:url(../imgs/box-top.gif) no-repeat left top;
    	padding-top:40px;
    	font-weight: normal;
    	
    }
    
    .box .last {
    	background:url(../imgs/box-bottom.gif) no-repeat left bottom;
    	padding-bottom:60px;
    	
    }
    .box h1, .box p {
    	padding-left:60px;
    	padding-right:60px;
    }
    And this is the code I used to test that the page is seeing it as a link...

    Code:
    .box h1 a:link {
    	color:#00CCFF;
    }
    
    .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.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello bFig,
    Removing the negative z-index brings your link back -
    Code:
    #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
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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...
    Last edited by SB65; 11-20-2009 at 09:34 PM.

  • #4
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks!

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •