Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Html page doesn't follow CSS sheet

Reply
Thread Tools

Html page doesn't follow CSS sheet

 
 
Fokke Nauta
Guest
Posts: n/a
 
      01-25-2011
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


 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      01-25-2011
Fokke Nauta wrote:

> 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.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
 
 
 
Fokke Nauta
Guest
Posts: n/a
 
      01-25-2011

"Jukka K. Korpela" <(E-Mail Removed)> wrote in message
news:TUx%o.2770$(E-Mail Removed)...
> Fokke Nauta wrote:
>
>> 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.)
>


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

>> 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.


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.
>
>> 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.


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


 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      01-25-2011
Fokke Nauta wrote:

> 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.)

--
-bts
-Four wheels carry the body; two wheels move the soul
 
Reply With Quote
 
Fokke Nauta
Guest
Posts: n/a
 
      01-25-2011
"Beauregard T. Shagnasty" <(E-Mail Removed)> wrote in message
news:ihmfdq$lqg$(E-Mail Removed)-september.org...
> Fokke Nauta wrote:
>
>> 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.)
>
> --
> -bts
> -Four wheels carry the body; two wheels move the soul
>


Thanks, that makes sense.

Fokke


 
Reply With Quote
 
Brian Cryer
Guest
Posts: n/a
 
      01-25-2011
On 25/01/2011 10:20, Fokke Nauta wrote:
> 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.

<snip>
> 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.
--
Brian Cryer
http://www.cryer.co.uk
 
Reply With Quote
 
Fokke Nauta
Guest
Posts: n/a
 
      01-25-2011
"Brian Cryer" <(E-Mail Removed)> wrote in message
news:ihmg7v$p92$(E-Mail Removed)-september.org...
> On 25/01/2011 10:20, Fokke Nauta wrote:
>> 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.

> <snip>
>> 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.
> --
> Brian Cryer


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

Fokke


 
Reply With Quote
 
Adrienne Boswell
Guest
Posts: n/a
 
      01-25-2011
Gazing into my crystal ball I observed "Fokke Nauta"
<(E-Mail Removed)> writing in news:(E-Mail Removed):

>> 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.
>
>


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

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
 
Reply With Quote
 
Fokke Nauta
Guest
Posts: n/a
 
      01-25-2011

"Adrienne Boswell" <(E-Mail Removed)> wrote in message
news:Xns9E784AAAB841Darbpenyahoocom@81.169.183.62. ..
> Gazing into my crystal ball I observed "Fokke Nauta"
> <(E-Mail Removed)> writing in news:(E-Mail Removed):
>
>>> 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.
>>
>>

>
> Then Dragonfly is your friend - IMHO better than Firebug for Firefox.
>
> --
> Adrienne Boswell at Home



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


 
Reply With Quote
 
Adrienne Boswell
Guest
Posts: n/a
 
      01-25-2011
Gazing into my crystal ball I observed "Fokke Nauta"
<(E-Mail Removed)> writing in news:(E-Mail Removed):

>
> "Adrienne Boswell" <(E-Mail Removed)> wrote in message
> news:Xns9E784AAAB841Darbpenyahoocom@81.169.183.62. ..
>> Gazing into my crystal ball I observed "Fokke Nauta"
>> <(E-Mail Removed)> writing in
>> news:(E-Mail Removed):
>>
>>>> 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.
>>>
>>>

>>
>> 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.
>


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.

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
register css style sheet Lukas Kurka ASP .Net 5 10-24-2006 08:16 AM
CSS style sheet not showing correctly on the server =?Utf-8?B?Q2FtbWllIFdhdHNvbg==?= ASP .Net 5 11-29-2005 09:23 AM
confused - html validates, css validates but validate css from the html causes errors Titus A Ducksass - AKA broken-record HTML 6 11-15-2004 12:59 PM
CSS Sheet not being read for some reason?? cayenne HTML 6 11-25-2003 03:59 PM
Embedding a CSS style sheet within a generated SVG file FC XML 4 10-01-2003 12:55 PM



Advertisments