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 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2006
    Posts
    64
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Z-index/absolute positioning issue (links dont work)

    Hi

    Recently I had this same issue in all non IE browsers and fixed it by adding z-index: 106 to the classes (Issue is Im not able to click links resting within a png.)

    Now Im having this same issue in IE6 and trying to fix doing the same thing and others to get these links on pngs to click, but no luck yet!

    Below is code Im working with..

    HTML
    Code:
    <div id="nav">
          <ul> 
           <span style="position: relative; top: 18px; left: 0px; color: rgb(87, 175, 237); font-size: 96.8%; z-index:200;">
    <span style="color: white;">Prefer</span>
    a quarter? Click
    <a style="color: rgb(255, 255, 255);" href="google.com">here!</a>
    </span>
    	
           
            
          </ul>
        </div>
    CSS
    Code:
    #nav {
    	background:url(../images/nav.png) no-repeat;
    	display: inline;
    	position:relative;
    	top: -12px;
    	right: 30px;
    	width: 350px;
            height: 75px;
    	z-index: 106;
    	font-size: 97.8%;
    
    }

    Before I had both absolute, so changed them to both relative, but still no luck. I even did one absolute and one relative and still no dice.

    Appreciate any suggestions one can offer!

    cheers!

  • #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 chaser7016,
    It's kind of hard to tell what your trying to do here. Your .png should not interfere with your liinks function at all since it's just a background image.

    Check your code in the validator though and you'll see a few problems.

    Start with something like this, it's valid anyway and maybe you can adjust it to fit your application.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	font: 14px "Comic Sans MS";
    	background: #FC6;
    	text-align: center;
    }
    * {
    	margin: 0;
    	padding: 0;
    	outline: none;
    	border: none;
    }
    #container {
    	width: 800px;
    	height: 600px;
    	margin: 30px auto;
    	background: #999;
    }
    #nav {
    	width: 350px;
        height: 75px;
    	float: right;
    	margin: 12px 30px 0 0;
    	background: #fff url(../images/nav.png) no-repeat;
    	position:relative;
    
    }
    #nav ul {
    	position: relative; 
    	top: 18px; 
    	left: 0px; 
    	color: rgb(87, 175, 237); 
    	font-size: 96.8%; 
    	z-index:200;
    }
    #nav span {color: #fff;}
    #nav a {color: rgb(255, 255, 255);}
    </style>
    </head>
    <body>
        <div id="container">
            <div id="nav">
                <ul>
                	<li><span>Prefer</span>a quarter? Click<a href="google.com">here!</a></li>	        
                </ul>
            </div>
        <!--end container--></div>
    </body>
    </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


  •  

    Posting Permissions

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