CSS not behaving properly

[sladmin]

Hi guys,

Having some real puzzling problems with some CSS on one of my sites. Its currently not showing the correct CSS for the code that generates it.

For example I have this code:

.TextLink3 {
font-family: "Arial";
font-style: normal;
color: #666666;
font-weight: normal;
font-size: 0.8em;
}Which should be similar to the code below:

a.TextLink3:Link {
font-family: "Arial";
font-style: normal;
color: #666666;
font-weight: normal;
font-size: 0.8em;
}Except its not. The first example makes the text size on the page slightly bigger than the second example yet the text size values are exactly the same.

Any Ideas because it's got me this time. The CSS for this site refuses to work properly :glare:

[Mark Voss]

But they're not exactly the same.

If you use ems to size your fonts, they'll render relative to the size of the font of the containing element.
You also need to keep an eye on where the styles are defined in the cascade.

Could you post a url?

[sladmin]

Thanks Spanner,

So what is the best font size to use? I cannot use px because IE doesn't like it for the text resize feature. I was told by someone on here that EMS was the best to use but I still don't fully understand it.

To see what I mean visit this page (http://norfolk-villages.com)and look at the bit where it says "Welcome to Norfolk Villages". You will notice "Norfolk Villages" is smaller as it is a link yet it's from the same CSS sheet.


Thanks,

[jim]

Hi
Because em are "relative" sizes, you are displaying the link as 0.8 of the text which is 0.8em - therefore it's smaller. Take out the font-size from your stylesheet for

a.TextLink3:Link {
font-family: "Arial";
font-style: normal;
color: #666666;
font-weight: normal;
font-size: 0.8em;
}

and it should display the same size as the other text.

There is an argument about em's because mac start with a different default broswer size. (I can't remember offhand but I think default in Windows browsers is 12pt macs are 10pt).
Seems that if you define font-size in a style sheet body as 12pt then go with em. (e.g. 1em = 12pt).
Sorry a bit garbled, hope it makes sense.
Jim

[Mark Voss]

IMO, you should always ems (or percentages) should be used for sizing fonts.

ems work like percentages so, if your base font was rendering at say 16px and you set your paragraph font at 0.75em
p{font-size:0.75em;}Your paragraphs would render at 12px (0.75x16px)

The problem you're seeing is due to nesting your styles.
To elaborate on what Jim's saying:

Your markup:
<p class="TextLink3">Welcome to <a href="#" class="TextLink3">Norfolk</a> <a href="#" class="TextLink3">Villages</a>.</p>Your CSS:
.TextLink3 {
font-family: "Arial";
font-style: normal;
color: #666666;
font-weight: normal;
font-size: 0.8em;
}
a.TextLink3:Link {
font-family: "Arial";
font-style: normal;
color: #666666;
font-weight: normal;
font-size: 0.8em;
}
/* and the same for the other three a.TextLink3 states */What's happening is that the paragraph text is rendered at 80% of the font size of the container and then the links are rendered at 80% of this size.

The easiest way to solve this is to remove the font-size attribute from each of the anchor states in your CSS but, as this'll leave only attributes which inherit their styling from their parent element, you could therefore remove the classes from your markup and css altogether leaving just:

<p class="TextLink3">Welcome to <a href="#">Norfolk</a> <a href="#">Villages</a>.</p>.TextLink3 {
font-family: "Arial";
font-style: normal;
color: #666;
font-weight: normal;
font-size: 0.8em;
}BTW you've made it very dificult for yourself to keep track of the style cascade by using so many stylesheets.

[sladmin]

Thanks both of you, I think I understand what is going on. I don't think I have fully understood how CSS works.

The thing I can't work out is why have a body links CSS and then use external CSS? Problem is the body CSS is taking over my links formatting when I want the formatting to be from my external style sheets.

Whats the best way to do all this because I think I'm just confusing myself even more here lol :blink:

[Mark Voss]

That's the way the cascade works :glare:


Cascading Order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
Browser default
External style sheet
Internal style sheet (inside the <head> tag)
Inline style (inside an HTML element)So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value).



Read through the Introduction to CSS (http://www.w3schools.com/css/css_intro.asp) - it will help.

[jim]

Very good indeed spanner. Much more coherent and useful post than mine.

Why do I use external css - because search engines don't like wading thru' css / javascript et al so I put it all in external files. It makes the xhtml file size smaller so it loads quicker (hopefully). Only one lot of css to worry about.

I too recommend and use w3schools (http://www.w3schools.com/css/default.asp), and to see what is possible with css Stu Nicholls (http://www.cssplay.co.uk/) site is gr8.

Jim

[Ben Collier]

Very good indeed spanner. Much more coherent and useful post than mine.

Why do I use external css - because search engines don't like wading thru' css / javascript et al so I put it all in external files. It makes the xhtml file size smaller so it loads quicker (hopefully). Only one lot of css to worry about.

I too recommend and use w3schools (http://www.w3schools.com/css/default.asp), and to see what is possible with css Stu Nicholls (http://www.cssplay.co.uk/) site is gr8.

Jim

Yeah having it in an external file is useful when the same sheet is used on mulitple pages as it is saved in the browser cache and doesn't need to be reloaded each time.

Ben

[Mark Voss]

Another fantastic CSS based site is http://www.csszengarden.com/

All the different designs/layouts are produced without touching the page's markup at all.

[Ben Collier]

Another fantastic CSS based site is http://www.csszengarden.com/

All the different designs/layouts are produced without touching the page's markup at all.

http://www.csszengarden.com/?cssfile=/202/202.css&page=0
I like this one!

[Mark Voss]

Not sure about that one (although the effect is pretty good).

This (http://www.csszengarden.com/?cssfile=199/199.css) is my favourite ATM :up: