PDA

View Full Version : CSS nav hover state question



randomguy83
Apr 5th, 2007, 09:34 PM
i have a problem displaying a background image for list items within a #nav container.

IE: It displays how i want it in IE -however there is a mysterious 1 pixel or so gap between the green bottom border and the background image when it is hovered over.
(see image)

FF: The background image does not stretch or look like it does in IE. The bottom border, when hovered, on the otherhand seems to align perfectly.

Do I have to specify a height or width somewhere?




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Company</title>

<meta name="keywords" content="" />

<link href="test.css" rel="stylesheet" type="text/css" />
</head>


<body>

<div id="wrapper"> <!-- begin of wrapper -->

<div id="header"> <!-- begin of header -->
<a href="#"><img src="images/logo.gif" alt="" border="0" /></a>
<h1>company description here...description text. random text description text. random text</h1>
</div> <!-- end of header -->

<div id="nav">

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Notebook</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- end of nav -->

</div> <!-- end of wrapper -->

</body>
</html>




* {
margin:0;
padding:0;
}

body {
background:black url(images/bckg.gif) repeat-x;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#FFFFFF;
}

.clear {
clear:both;
height:0px;
}

h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
width:340px;
line-height:21px;
position:relative;
top:-20px;
left: 120px;
}

#wrapper {
width:798px;
margin:auto;
margin-bottom:1px;
border-bottom:1px dashed #263C3F;
overflow:hidden;

}

#header {
border: 1px solid red;
height:245px;
color:#FFFFFF;
}

#header img {
margin: 20px 0 0 50px;
}

#nav {
height: 46px; /* height defined through nav properties
#nav ul (margin-top)+ #nav ul li a (padding-top + padding-bottom)
=10px + 20px + 16px =46px */

margin-bottom:0px;
text-transform:uppercase;
border: 1px solid blue;
}

#nav ul {
margin-top: 10px;
margin-left: 5px;
}

#nav ul li {
display:inline;
padding: 0px 1px 0 0;
background: url(images/menubg.gif) bottom right no-repeat;
}

#nav ul li a {
text-decoration: none;
padding: 20px 48px 16px 48px;
color: #fff;
}

#nav ul li a:hover {
border-bottom:6px solid #bbf901;
}

nexosis
Apr 6th, 2007, 12:43 AM
When putting the a syntax into css, it should always contain the :link,:visited,:active
here is the new code


#nav ul li a:link,a:visited,a:active {
text-decoration: none;
padding: 20px 48px 16px 48px;
color: #fff;
}

I think there's no problem with the a:hover.

randomguy83
Apr 6th, 2007, 03:59 AM
that didnt anything to my original problem... grrr.. (*pulling my hair out!*)

Arbitrator
Apr 6th, 2007, 06:31 PM
i have a problem displaying a background image for list items within a #nav container.Isnít it a bit odd to ask for help with an image‐based problem and subsequently not bother to provide the relevant images? A live example would be preferable; otherwise, you should, at least, provide links to the images.



#nav ul li a:link,a:visited,a:activeSimply doing it the way that randomguy83 did should be fine. The only reason that you would need to specify the pseudo‐classes is if you want to style each pseudo‐class differently. Also, keep in mind that your selector is not the same as the below selector:


#nav ul li a:link, #nav ul li a:visited, #nav ul li a:active

randomguy83
Apr 7th, 2007, 12:57 AM
Arbitrator ,

I posted the images earlier in the post; the two thumbnails show how it renders in FF and IE.

The background image is basically the right border that is shown fully in IE but not in FF.

Arbitrator
Apr 8th, 2007, 04:57 AM
Arbitrator ,

I posted the images earlier in the post;Do you actually expect people to open up an image editor and extract those images so that they can test the display of your document?