a – text link – styles going mad!

Rob Cubbon
(@robcub)

17 years, 5 months ago

Hi, I’m am desperate with this problem it’s been diving me out of my mind. Please help someone!
http://www.bellefly.com/blog/

Please look at the h2 heading of the blog’s first post. It’s taking the style from a div that it shouldn’t be!

Instead of taking the style from .post h2 a:link, a:visited etc. it’s taking the style from .postmetadata a:link, a:visited why?

When you hover over it takes the correct style.

I’ve been having this problem of text link styles taking the “wrong” div style all over this site. I think I must have done something really stupidly wrong with the theme which I’ve got from various places and put together myself, badly.

Viewing 5 replies - 1 through 5 (of 5 total)

iridiax
(@iridiax)

17 years, 5 months ago

Check out:

Cascading
http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css
http://www.w3.org/TR/CSS2/cascade.html

!important to override cascade
http://webdesign.about.com/od/css/f/blcssfaqimportn.htm

pseudo-classes (their order is important)
http://www.w3schools.com/CSS/css_pseudo_classes.asp

Thread Starter Rob Cubbon
(@robcub)

17 years, 5 months ago

I’ve just followed your first link and saw why people put “!important” before a semi-colon which is awesome. I’ll go through the other links now.

Thank you

Thread Starter Rob Cubbon
(@robcub)

17 years, 5 months ago

Also, I’m not a CSS expert but why should an element that is within one div class take it’s style from another div class?

I’m referring to the “2 comments” link at the end of the post.
iridiax
(@iridiax)

17 years, 5 months ago
You have a mistake. Your css:
```
p.postmetadata a:link, a:visited{font-size: 10px;line-height: 14px;}
p.postmetadata a:hover, a:active{font-size: 10px;line-height: 14px;}
```
Is actually sans commas:
```
p.postmetadata a:link{font-size: 10px;line-height: 14px;}
p.postmetadata a:hover{font-size: 10px;line-height: 14px;}
a:visited{font-size: 10px;line-height: 14px;}
a:active{font-size: 10px;line-height: 14px;}
```
Do it this way instead:

p.postmetadata a:link, p.postmetadata a:visited
Thread Starter Rob Cubbon
(@robcub)

17 years, 5 months ago

iridiax, thank you so much, I was pulling my hair out over this one. I’ve been through the CSS and I’d made that particular mistake many times – I’ve rectified it and the site’s working perfectly.

Bless you.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘a – text link – styles going mad!’ is closed to new replies.

a – text link – styles going mad!

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics