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

    Join Date
    Oct 2007
    Posts
    2
    Rep Power
    0

    Spacing issue with opera


    Theres a small spacing issue thats only coming up in opera for the navigation on this site. It seems to be only 1px, but I cant for the life of me find out where its coming from. The hover background doesn't extend all the way down, as it does in firefox/ie. I think its some issue with top:32px; in nav ul li, but I don't know what the solution is. Any help is appreciated.

    Demo link at www.ryancolantuono.com/test



    Code:
     
    body {
    	font-family: "Lucida Grande","Arial Unicode MS", sans-serif;
    	margin: 0;
    	padding: 0;
    	
    }
    
    #content {
    	color: #555;
    	margin: auto;
    	width: 780px;
    	
    }
    
    
    /* ----------------------- HEADER ----------------------- */
    #top-header {
    	background-color: #000;
    	height: 20px;
    	color: #eee;
    	border-bottom: #555 solid 1px;
    	
    }
    
    #top-header .login {
    	float: right;
    	margin: 5px 10px 0 0;
    	font-size: .7em;
    }
    
    #top-header .login a{
    	text-decoration: none;
    	color: #70d5d4;
    }
    
    #mid-header {
    	background: #222 url("../images/mid-header.png");
    	height: 55px;
    	
    }
    
    #bot-header {
    	background: #4eaead url("../images/bot-header.png") repeat-x;
    	height: 105px;
    	
    }
    
    /* ----------------------- END HEADER ----------------------- */
    
    
    /* ----------------------- NAVIGATION ----------------------- */
    
    #nav {
    	float: left;
    	margin: 0 15px 0 0;
    }
    
    #nav ul {
    	margin: 0;
    	padding: 0 70px 0 0;
    	display: block;
    	list-style: none;
    }
    
    #nav ul li {
    	top: 32px;
    	display: inline;
    	position: relative;
    	clear: both;
    	
    }
    
    #nav ul li a {
    	font-size: .8em;
    	color: #fff;
    	text-decoration: none;
    	padding: 3px 12px 3px 12px;
    }
    
    #nav ul li a:hover {
    	background-color: 70d5d4;
    	color: #000;
    	-moz-border-radius: 3px;
    	-webkit-border-top-left-radius: 3px;
    	-webkit-border-top-right-radius: 3px;
    	padding: 5px 12px 5px 12px;
    }
    
    /* ----------------------- END NAVIGATION ----------------------- */

    Code:
    <html>
    <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>
    
    </head>
    <body>
    
    <div id="top-header">
      <div class="login">Have an account? Login <a href="#">here</a>.</div>
    </div>
    <div id="mid-header">
      <div id="nav">
    	<ul>
    	  <li><a href="#">Home</a>
    	  <li><a href="#">About Us</a>
    	  <li><a href="#">Portfolio</a>
    	  <li><a href="#">Links</a>
    	  <li><a href="#">Contact</a>
    	</ul>
    	  
      </div>
    
    </div>
    <div id="bot-header"></div>
    
    
    
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2007
    Location
    Kansas
    Posts
    30
    Rep Power
    12
    Add this as a separate rule to the css after the original hover rule
    Code:
    /* For Opera */
    #nav ul li a:hover {
    /*\*/ padding: 5px 12px 2px 12px; /**/}

IMN logo majestic logo threadwatch logo seochat tools logo