CSS issue: link is wrongly displayed

Question

a {
    color: #000;
}

a:hover {
    text-decoration: none;
    color: #fff;
}

That is the code I use. But, none of the links I have in my pages listen to this. They abide by this instead:

#menu li, a {
    text-align: center;
    display: block;
    float: left;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size:1.2em;
    color: #575757;
    text-decoration: none;
    list-style: none;
}

Therefore a lot of the links are skewed, as they all float left and things.
The code for the links itself isn't wrapped in any way. At least not in a way that explains my errors.

<div id="footer">
  <p><center>Copyright 2008 - <a href="index.php">G.S.B.V. Pugilice</a></center></p>
</div>

That bit of code gives me two lines instead of one, the link floats left on the second line.

AnthonyWJones · Accepted Answer · 2009-01-01 16:44:21Z

8

I think you may be mis-understanding how selectors work.

#menu li, a { ... }

Means apply styles to any li descendant of a element with the id #menu and to any a found any where.

Did you actually intend:-

#menu li, #menu a {...}

?

answered Jan 1, 2009 at 16:44

AnthonyWJones

190k35 gold badges236 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Blair Scott Over a year ago

I get the feeling that's exactly what he meant, especially given that the id is "menu". I think if you do what AnthonyWJones suggested you should find it behaving as you are intending.

Kablam Over a year ago

Could I use the following: #menu li a {...}, without the comma after li? So that only links in the menu, within an li tag are selected?

Blair Scott Over a year ago

Yes, that will select only the links in the list item.

Collectives™ on Stack Overflow

CSS issue: link is wrongly displayed

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related