SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Apr 2006
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover on tabs overflows to the right in IE

    Hello-

    Whenever you hover over one of the tab links in IE6, the highlight overflows to the right. It works as expected in FF 1.5 of course. Also, the tabs are 1 pixel lower in IE, so the border below the inactive tab isn't visible.

    How can I change this so that it looks the same in IE?

    ff:


    ie:


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    
    a, a:visted {
    	color: #00f ;
    	}
    
    a:hover {
    	color: #fff ;
    	background: #00f ;
    	}
    
    #nav {
    	border-bottom: 1px solid #f00 ;
    	font-family: Arial ;
    	font-size: 18px ;
    	margin: 20px 0 35px ;
    	padding-bottom: 2px ;
    	padding-left: 15px ;
    	}
    
    #nav .active {
    	background: #fff ;
    	border: 1px solid #f00 ;
    	border-bottom: 1px solid #fff ;
    	color: #f00 ;
    	margin: 0 3px ;
    	padding: 3px 13px ;
    	}
    
    #nav .active a {
    	color: #f00 ;
    	text-decoration: none ;
    	}
    
    #nav .active a:hover {
    	background: #f00 ;
    	color: #fff ;
    	}
    
    #nav span.inactive {
    	background: #f0f0f0 ;
    	border-top: 1px solid #000 ;
    	border-right: 1px solid #000 ;
    	border-left: 1px solid #000 ;
    	font-size: 13px ;
    	padding: 1px 16px 4px ;
    	}
    
    </style>
    </head>
    <body>
    <div id="nav">
    <span class="active"><a href="#">One</a></span>
    <span class="inactive"><a href="#">Two</a></span>
    </div>
    </body>
    </html>
    Thanks!
    Last edited by tom_watson; Apr 3, 2006 at 19:30. Reason: added pictures


Bookmarks

Posting Permissions

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