#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    2
    Rep Power
    0

    Chrome moving hit box help :(


    I am currently creating a new web site and have found that the clickable area in my navigation bar is moving down as I add content to the page. This problem only seems to happen in google chrome and not in EI. and I can not figure out why.

    This is the HTML I am using

    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" lang="en" xml:lang="en" dir="ltr">
    
    <head>
    <title>King's</title>
    
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    
    <link type="text/css" rel="stylesheet" href="Layout.css" />
    
    </head>
    
    <body>
    
    <div id="Nav">
    <div id="NavBg">
    </div>
    
    <div id="NavPic">
    <p><img src="golf-cut-out.png" alt="Picture of a car" /></p>
    </div>
    <div id="NavBar">
    <ul>
    	<li><a style="padding-left: 60px; color: white;" href="#">Home</a></li>
    	<li><a href="http://css-tricks.com/absolute-positioning-inside-relative-positioning/">Services</a></li>
    	<li><a href="#">About Us</a></li>
    	<li><a href="#">Resources</a></li>
    	<li><a href="#">Contact Us</a></li>
    	<li><a style="background-image: none;" href="#">Testimonials</a></li>
    </ul>
    </div>
    
    </div>
    
    <div id="mainDiv">
    <h1> King's Auto</h1>
    <p>main page here</p>
    </div>
    
    <div id="address">
    <address>
    <ul>
    	<li><a href="#">Home</a></li>
    	<li><a href="#">Services</a></li>
    	
    	
    	
    	
    </ul>
    
    </address>
    <div>
    
    </body>
    </html>
    and this is the CSS

    Code:
    body {font-family: Arial, Helvetica, sans-serif;
    		background-repeat: no-repeat;
    		background-attachment: fixed;
    		background-color: #400000;
    		color: black;
    			}
    	
    
    *{margin: 0;
    	Padding: 0;
    	border: none;
    	}
    
    
    #Nav	{position: relative;
    	top: 20px;
    	margin-left: auto;
    	margin-right: auto;
    	bottom: 100px;
    	font-size: 1em;
    	padding-bottom: 15px;
    	width:1200px;	
    	z-index: -2;
    	
    		
    	}
    #NavBg	{position: absolute;
    	background-color: black;
    	top:5px; 
    	left:250px;
    	width: 950px;
    	height: 115px;
    	z-index: -1;
    	}	
    
    #Nav ul {list-style-type: none;
    	background-image: url(navi_bg.png);
    	height: 80px;	
    	width: 910px;
    	margin: auto;
    	}
    
    #Nav li {float: left;
    	}
    
    #Nav ul a {background-image: url(navi_bg_divider.png);
    	background-repeat: no-repeat;
    	background-position: right;
    	padding-right: 32px;
    	padding-left: 32px;
    	display: block;
    	line-height: 80px;
    	text-decoration: none;
    	font-family: Geaorgia, "Times New Roman", Times, serif;
    	font-size: 21px;
    	color: #160b0b;
    	}
    
    #Nav ul a:hover {
    	color: #FFF;
    	}
    
    #NavPic {float: left;
    	padding-left: 0px;
     	width:300px;
    		}
    
    #Nav img {width:300px;
    		height:auto;
    	}
    
    
    #NavBar {position: Absolute;
    	top: 30px; 
    	left: 250px;
    	z-index: -1;
    	}
    
    #NavHeader {
    
    	
    	}
    
    #mainDiv {position: relative;
    		top: 180px;
    		margin-left: auto;
    		margin-right: auto;
    		border: 4px solid #000;
    		background-color: white;
    		color: black;
    		width: 100%;		
    			
    		}
    
    #address {position: relative;
    		top: 180px;
    		margin-left: auto;
    		margin-right: auto;
    		background-color: black;
    		color: white;
    		width: 100%;		
    			
    		}
    in this code under google chrome if you delete the list items in the address the hit box for the links will center on the words. And if you add another lists item or two the hit box will move down to where you can not click on anything at all. You can also get the same thing by just adding "height:" or "padding-bottom" to the bottom div.


    This is baffling me and would greatly appreciate any help I have tried searching the net but can not seem to find an answer.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    2
    Rep Power
    0
    Never mind. I stripped everything down and found that the z-index: -1; on the navigation bar was causing the problem.

    I removed it and adjusted the page to compensate and everything seems to be working and arranged as intended.

IMN logo majestic logo threadwatch logo seochat tools logo