Any idea why the padding collapses when clicking on the navbar link in Firefox?

The padding returns to normal when clicking again outside of the navbar.

I tried adding 30px right and left padding to a new rule (#nav ul li a:visited) but this didn't work.

http://www.diamondpackaging.com/green/
http://www.diamondpackaging.com/green/diamond8e.css

I changed the

#nav ul li{
padding: 0px;
margin: 0px;
display: inline;
}


to

#nav li {
margin: 0px;
display: inline;
}

and
<div id="nav">
<ul>

to

<div>
<ul id="nav">

then it worked for me

Joder,

Thanks for the input.

While testing the behavior of this code the only thing I could surmise was that the divider marks (|) were somehow causing the link margins to collapse when clicking the link.

What I did was separate the | marks into their own <li>|<li> line items, and modify the CSS by setting the padding for the line items (#nav ul li ) instead of the links (#nav ul li a):

#nav ul li{
padding: 0px 15px;
margin: 0px;
display: inline;
}

#nav ul li a{
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}

#nav ul li a:hover, #nav ul li a:focus{
color: #3366FF;
}

Now it seems to work in both IE6 and Firefox. Even though it was working in IE6 before, perhaps it was a fluke rather than a bug in Firefox? If anyone has a better method of putting divider lines between links in the navbar I would love to learn how. The problem with using right and left border declarations is that the borders would show on each end of the navbar and I want to avoid that.

Thanks,
Wilbury

http://www.diamondpackaging.com/green/
http://www.diamondpackaging.com/green/diamond8e.css

Wilbury,

Can you post a version without your temporary fix? I can't give you a definite answer without seeing the code, but as a guess I would say that your bold declaration in "#nav ul li a" was applying only to the link and not to your plaintext " | " and causing a size problem. I would try putting the bold declaration in "#nav ul li" instead. Or it could be the padding needs to be in the "#nav ul li a" instead of "#nav ul li"

Good luck!

Or it could be the padding needs to be in the "#nav ul li a" instead of "#nav ul li"

Dan, I've seen the code without his 'fix' and he did have padding set on the #nav ul li a rather than the li item. I think you are definitely correct about the "|" as the padding was applied to the <a> and not the plain text.