Text size issue with conflicting classes...

[benopeth]

I have hit a brick wall in terms of how to rectify this issue. Here is my HTML...

<p class = "location">You are Here &gt; <a href = "index.html">Home</a></p>

and here is the CSS...


p.location
{
font-size: 0.9em;
color: #ffffff;
}

p.location a:link
{
font-size: 1em;
color: #ffffff;
text-decoration: underline;
}

p.location a:hover
{
font-size: 1em;
color: #3d2446;
text-decoration: none;
background-color: #ffffff;
}

p.location a:visited
{
font-size: 1em;
color: #ffffff;
text-decoration: underline;
}


I have added breadcrumbs to my page and basically, the breadcrumb link appears a size smaller than the 'You are Here' text. I've tried everything in terms of text size adjustments but I just cannot get around it.

Can anyone suggest why I might be having this problem?

It looks like this... "You are Here > Home".

Thanks for all help/suggestions, greatly appreciated as always.

[Fang]

It's a cascade effect, but is caused by some other css rule in the document, not by the rules given here.

[benopeth]

See my attached CSS file. Would you be willing (or at least attempt) to highlight the rule(s) in question?

Edit: I do apologise about the mess, I use Notepad++ so it looks like a heap when opened in Notepad.

[Fang]

I can't replicate the problem with the css. Do you have a link?

[benopeth]

http://www.benginemedia.co.uk/index.html

Oh, I also now have an additional problem where the p.location a:hover is showing white text as well when it should be purple with a white background.

Never had such an unfathomable problem. Thanks for your help!

[Fang]

Pseudo selector order: LoVe HAte
a:link
a:visited
a:hover
a:active
Change the order of p.location a:pseudo selector

As for the difference in text size; I'm not seeing this. In which browser(s) do you see this?

[benopeth]

It's in Firefox. I'll make the suggested amendment!

[benopeth]

Thanks ever so much! Problem solved and I wasn't aware that there was a necessary order for anchor properties.

With regards to the text size issue, I fixed it but in a way that I don't really like.


p.location
{
font-size: 0.9em;
color: #ffffff;
}

p.location a:link
{
font-size: 1em;
color: #ffffff;
text-decoration: underline;
}

p.location a:visited
{
font-size: 1em;
color: #ffffff;
text-decoration: underline;
}

p.location a:hover
{
font-size: 1em;
color: #3d2446;
text-decoration: none;
background-color: #ffffff;
}

p.location a:active
{
font-size: 1em;
color: #3d2446;
text-decoration: none;
background-color: #ffffff;
}


I'm guessing that the 'p.location a' becomes smaller than the p.location 0.9em text size because the link/visited/hover/active properties have their font-size set at 0.9em too... do I therefore even need to specify a font size for the link/visited/hover/active properties? Edit: I take it this is what you were referring to when you mentioned the 'cascade effect'?

[Fang]

That's the cascade effect, although I didn't see it in Fx.