Question

For some reason, Chrome and IE are applying CSS I created for an unordered list to other links on the page. Everything looks great in Firefox, so I’m not entirely sure just what’s happening. This is the CSS I used:

ul#gallery-tags li a, a:visited {
line-height: 40px;
width: 100%;
display: block;
padding-left: 5px;
color: #606060;
text-decoration: none;
border-bottom: solid 1px #e0e0e0;
}

ul#gallery-tags li a:hover {
background-color: #1d95d8;
color: #fff;
border-bottom: none;
}   

An example is here: http://jsfiddle.net/UAHw7/30/ In Firefox, everything looks just fine. But in Chrome and IE, the list css also affects other links, as evidenced by the fact that my ‘footer links’ also appear to have a 40px line-height when they shouldn’t.

I’m a novice at web development, so any advice would be helpful. Thanks.

Answer 1

I can’t replicate on Chrome, but whatever you’re seeing may be due to the fact that the first selector you’re using is getting applied to all visited links and that you have a different set of visited links in your FF history…

ul#gallery-tags li a, a:visited means just that: a‘s that are children of li‘s that are children of ul#gallery-tags, as well as all a:visited‘s

Most likely what you want for the first selector is ul#gallery-tags li a, ul#gallery-tags li a:visited

Sadly, CSS requires you to be pretty repetitive.