Odd CSS bug with border?

During my re-design of our companies website I have stumbled upon an interesting bug (or so I think) with borders. This can only be reproduced in Firefox or Chrome as it doesn’t seem to affect internet explorer (9 from what I see, I have yet to open 8/7/6). For some reason the border on the active page link represented by the rule

#nav .active, #nav:hover { }

isn’t the correct color. Now what bothers me even more is the fact that when you hover over an inactive link the color shows up properly… Only when the rule

#nav .active

is applied will the bug show. Am I doing something wrong? Too see this in action follow this link: http://beta.trucksmartsales.com/. I’m pulling my hair out!!!

Unfortunately, all I get following that link is “A Database Error Occurred”.

I apologize, I fixed the issue and I fixed the CSS bug by simply working around it. On the default a style I just removed the border all together and increased the padding by 1px all around. Then on the hover style I removed the 1px padding and added a 1px border… Strange I have to do it this way but it fixed it.

Glad you found a solution. :slight_smile: