Html page doesn't follow CSS sheet

Discussion in 'HTML' started by Fokke Nauta, Jan 25, 2011.

  1. Fokke Nauta

    Fokke Nauta Guest

    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
    Fokke Nauta, Jan 25, 2011
    #1
    1. Advertising

  2. 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/
    Jukka K. Korpela, Jan 25, 2011
    #2
    1. Advertising

  3. Fokke Nauta

    Fokke Nauta Guest

    "Jukka K. Korpela" <> wrote in message
    news:TUx%o.2770$...
    > 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
    Fokke Nauta, Jan 25, 2011
    #3
  4. 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
    Beauregard T. Shagnasty, Jan 25, 2011
    #4
  5. Fokke Nauta

    Fokke Nauta Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:ihmfdq$lqg$-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
    Fokke Nauta, Jan 25, 2011
    #5
  6. Fokke Nauta

    Brian Cryer Guest

    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
    Brian Cryer, Jan 25, 2011
    #6
  7. Fokke Nauta

    Fokke Nauta Guest

    "Brian Cryer" <> wrote in message
    news:ihmg7v$p92$-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
    Fokke Nauta, Jan 25, 2011
    #7
  8. Gazing into my crystal ball I observed "Fokke Nauta"
    <> writing in news::

    >> 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
    Adrienne Boswell, Jan 25, 2011
    #8
  9. Fokke Nauta

    Fokke Nauta Guest

    "Adrienne Boswell" <> wrote in message
    news:Xns9E784AAAB841Darbpenyahoocom@81.169.183.62...
    > Gazing into my crystal ball I observed "Fokke Nauta"
    > <> writing in news::
    >
    >>> 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
    Fokke Nauta, Jan 25, 2011
    #9
  10. Gazing into my crystal ball I observed "Fokke Nauta"
    <> writing in news::

    >
    > "Adrienne Boswell" <> wrote in message
    > news:Xns9E784AAAB841Darbpenyahoocom@81.169.183.62...
    >> Gazing into my crystal ball I observed "Fokke Nauta"
    >> <> writing in
    >> news::
    >>
    >>>> 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
    Adrienne Boswell, Jan 25, 2011
    #10
  11. Fokke Nauta wrote:

    >> (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?


    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.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Jan 25, 2011
    #11
  12. Fokke Nauta

    Fokke Nauta Guest

    "Adrienne Boswell" <> wrote in message
    news:Xns9E7851AF2E3B2arbpenyahoocom@81.169.183.62...

    <cut>

    > 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


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

    Fokke
    Fokke Nauta, Jan 25, 2011
    #12
  13. Fokke Nauta

    Fokke Nauta Guest

    "Jukka K. Korpela" <> wrote in message
    news:qEE%o.2975$...
    > Fokke Nauta wrote:
    >
    >>> (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?

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


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

    Fokke
    Fokke Nauta, Jan 25, 2011
    #13
  14. 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
    Samuël van Laere, Jan 25, 2011
    #14
  15. Fokke Nauta

    Fokke Nauta Guest

    "Samuël van Laere" <> wrote in message
    news:4d3f1ddb$0$81479$4all.nl...
    > 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



    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
    Fokke Nauta, Jan 25, 2011
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bruce .J Sam
    Replies:
    2
    Views:
    421
    Bruce .J Sam
    Apr 3, 2005
  2. Titus A Ducksass - AKA broken-record
    Replies:
    6
    Views:
    630
    Titus A Ducksass - AKA broken-record
    Nov 15, 2004
  3. chad
    Replies:
    14
    Views:
    556
    Arnaud Delobelle
    Oct 13, 2010
  4. dale
    Replies:
    1
    Views:
    95
    Anno Siegel
    Dec 16, 2004
  5. Peter Michaux

    Synthetic click on link doesn't follow link

    Peter Michaux, Jun 4, 2007, in forum: Javascript
    Replies:
    2
    Views:
    160
    -Lost
    Jun 5, 2007
Loading...

Share This Page