Html page doesn't follow CSS sheet

[Fokke Nauta]

Hi all,

This is a strange problem.
I have a html page which uses an external CSS sheet. I specified the font
size in that sheet as 10 pt.
However, on the page it shows larger. I also put a text on the page with I
defined as 10 pt in the HTML code itself.. There is a difference between the
text size that was formatted as 10 pt and the text size that was described
as 10 pt in the CSS sheet.
On my site (which is not public yet) there is a variety of HTML pages and
CSS sheets but I have never seen this difference. And I don't see any
abnormalities in the HTML and CSS codes. Perhaps I am overlooking something.

The concerning HTML page and CSS sheet are on my server. They are in
www.pc3.nl/test. The name of the page is example.htm so you can see what I
mean on www.pc3.nl/test/example.htm. I left the pictures out.

The 10 pt formatted text (These are 10 pt characters) is green. The black
text is specified as 10 pt in the CSS sheet.

Perhaps someone can shine a light on this and show me what is wrong?

Thanks in advance.
Best regards,
Fokke Nauta

 

[Jukka K. Korpela]

This is a strange problem.

The W3C CSS Validator comes to rescue: http://jigsaw.w3.org/css-validator/
Its messages are somewhat messy, but it's an indispensable tool for any
human being who uses CSS. (Humans make mistakes.)

I have a html page which uses an external CSS sheet. I specified the
font size in that sheet as 10 pt.

That's the problem, as the W3C CSS Validator tells. The value must be
written as 10pt without space (if you really want to use the unit - you
shouldn't, but that's a different issue). Generally, no space between a
number and a unit is allowed in CSS.

When you have 10 pt, browsers may interpret 10 as meaning 10 pixels (10px)
and ignore the pt part or, in Standards Mode, they simply ignore the entire
declaration as required by CSS recommendations.

However, on the page it shows larger. I also put a text on the page
with I defined as 10 pt in the HTML code itself..

There you use an embedded style sheet, via a style="..." attribute. What is
important is that there you have the correct notation 10pt.

(Addressing the other issue: The solution to the problem that Verdana looks
awful in commonly used text sizes - it was designed for use in some specific
smallish sizes - is to avoid using Verdana at all, for copy text at least.
On the web, you cannot control what actual sizes will be used in people's
browsers. Using, say
font-family: Calibri, sans-serif
without any font-size setting is a better idea.)

 

[Fokke Nauta]

The W3C CSS Validator comes to rescue: http://jigsaw.w3.org/css-validator/
Its messages are somewhat messy, but it's an indispensable tool for any
human being who uses CSS. (Humans make mistakes.)

This is good to know. I bookmarked it in my browser.

That's the problem, as the W3C CSS Validator tells. The value must be
written as 10pt without space (if you really want to use the unit - you
shouldn't, but that's a different issue). Generally, no space between a
number and a unit is allowed in CSS.

It was an older stylesheet. Now I turned it into 12px (without space) and it
works indeed!
But why should one use pixels instead of points, just for curiosity?

When you have 10 pt, browsers may interpret 10 as meaning 10 pixels (10px)
and ignore the pt part or, in Standards Mode, they simply ignore the
entire declaration as required by CSS recommendations.


There you use an embedded style sheet, via a style="..." attribute. What
is important is that there you have the correct notation 10pt.

That was correct indeed as the code was generated by my editor.

(Addressing the other issue: The solution to the problem that Verdana
looks awful in commonly used text sizes - it was designed for use in some
specific smallish sizes - is to avoid using Verdana at all, for copy text
at least. On the web, you cannot control what actual sizes will be used in
people's browsers. Using, say
font-family: Calibri, sans-serif
without any font-size setting is a better idea.)

I can easily change the font type. But is Calibri available on every PC? On
Mac's? On Linux systems?
But if you specify the font size, that means that the lay-out can't change
and will allways be persistant. If the font size changes, so the layout
will.

Thanks again Jukka for your fast reply.

Fokke

 

[Beauregard T. Shagnasty]

But why should one use pixels instead of points, just for curiosity?

Points are for printing.
Pixels are for graphics and borders.
Percentages, or em units, are for font sizes.

http://tekrider.net/html/fontsize.php

(Normally, you would only use pt in a media=print style sheet.)

 

[Fokke Nauta]

Points are for printing.
Pixels are for graphics and borders.
Percentages, or em units, are for font sizes.

http://tekrider.net/html/fontsize.php

(Normally, you would only use pt in a media=print style sheet.)

Thanks, that makes sense.

Fokke

 

[Brian Cryer]

Hi all,

This is a strange problem.
I have a html page which uses an external CSS sheet. I specified the font
size in that sheet as 10 pt.
However, on the page it shows larger. I also put a text on the page with I
defined as 10 pt in the HTML code itself.. There is a difference between the
text size that was formatted as 10 pt and the text size that was described
as 10 pt in the CSS sheet.
On my site (which is not public yet) there is a variety of HTML pages and
CSS sheets but I have never seen this difference. And I don't see any
abnormalities in the HTML and CSS codes. Perhaps I am overlooking something.

Perhaps someone can shine a light on this and show me what is wrong?

Whilst I may get flamed for saying this ... in cases like this Internet
Explorer is your friend.

Assuming you are using IE 8, then hit F12 - that gives you access to the
"Developer Tools", from there if you select the cursor in the top
toolbar and then click on the text on your webpage it will show you the
styles applied to it and where they came from. From that you should be
able to work out why things don't show how you expect.

Hope this helps.

 

[Fokke Nauta]

Whilst I may get flamed for saying this ... in cases like this Internet
Explorer is your friend.

Assuming you are using IE 8, then hit F12 - that gives you access to the
"Developer Tools", from there if you select the cursor in the top toolbar
and then click on the text on your webpage it will show you the styles
applied to it and where they came from. From that you should be able to
work out why things don't show how you expect.

Hope this helps.

Thanks, but I ditched IE.
I use Firefox and Opera now.

Fokke

 

[Adrienne Boswell]

Gazing into my crystal ball I observed "Fokke Nauta"

Thanks, but I ditched IE.
I use Firefox and Opera now.

Then Dragonfly is your friend - IMHO better than Firebug for Firefox.

 

[Fokke Nauta]

Gazing into my crystal ball I observed "Fokke Nauta"



Then Dragonfly is your friend - IMHO better than Firebug for Firefox.

How can I find this in Opera (Using 11)?. It seems that there is someting
like Developer Tools but I can't find it except in the pref's editor.

Fokke

 

[Adrienne Boswell]

Gazing into my crystal ball I observed "Fokke Nauta"

How can I find this in Opera (Using 11)?. It seems that there is
someting like Developer Tools but I can't find it except in the pref's
editor.

If you're not using the menu, then do show menu, then Tools, Advanced,
Dragonfly. I have Dragonfly as a button on my status bar.

 

[Jukka K. Korpela]

I can easily change the font type. But is Calibri available on every
PC? On Mac's? On Linux systems?

Surely not, it is shipped with Windows Vista and with some other software,
in addition to being available separately. But it's one of the few fonts
that can be expected to be an improvement over each system's default
sans-serif font.

If Calibri is not available, the browser uses the generic sans-serif font.
Whatever that might be, it's most probably better (on the Web) than Verdana.
I would normally expect it to be Arial, or something better.

But if you specify the font size, that means that the lay-out can't
change and will allways be persistant. If the font size changes, so
the layout will.

The font size may and will change whatever you do, and so will the layout.

 

[Fokke Nauta]

If you're not using the menu, then do show menu, then Tools, Advanced,
Dragonfly. I have Dragonfly as a button on my status bar.

OK, I found it. Thanks.
It shows the DIV tag area's.
I guess I have to learn what it does.

Fokke

 

[Fokke Nauta]

Surely not, it is shipped with Windows Vista and with some other software,
in addition to being available separately. But it's one of the few fonts
that can be expected to be an improvement over each system's default
sans-serif font.

If Calibri is not available, the browser uses the generic sans-serif font.
Whatever that might be, it's most probably better (on the Web) than
Verdana. I would normally expect it to be Arial, or something better.


The font size may and will change whatever you do, and so will the layout.

OK, thanks.
I learn a lot here. I will change the font type and use percentages instead
of sizes.

Fokke

 

[Samuël van Laere]

Op 25-1-2011 19:35, Fokke Nauta schreef:

OK, thanks.
I learn a lot here. I will change the font type and use percentages instead
of sizes.

Fokke

I might still be building websites with accessibility problems if it
wasn't for alt.html, must have been mid 2003 when I started posting here
and I learned a lot, and still do.
So stick around, you'll learn a lot here indeed.

cheers,
Samuël van Laere
the Netherlands

 

[Fokke Nauta]

Op 25-1-2011 19:35, Fokke Nauta schreef:



I might still be building websites with accessibility problems if it
wasn't for alt.html, must have been mid 2003 when I started posting here
and I learned a lot, and still do.
So stick around, you'll learn a lot here indeed.

cheers,
Samuël van Laere
the Netherlands

I'll keep it in English so the rest can read it as well
Indeed, I learn a hell of a lot here, and very interesting to read the other
postings.
I learned to build websites in the days that there were only frames, tables
and cells, but times have changed dramatically.

Met vriendelijke groet,
Fokke Nauta