Stylesheet problem - Resizing text

Discussion in 'HTML' started by Richie Bisset, Nov 25, 2003.

  1. HI All,

    hopefully someone can help me. The W3C accesibility guidelines state
    that visually impaired users should be able to resize text within a
    page. My client at the moment wants a site that complies with these
    guidelines, but i also have to use a stylesheet. At first i used
    embedded stylesheets, but when i put the pages up to our server the text
    wasn't scaleable. As a result i switched to linked stylesheets, and it
    worked fine on our server.

    The problem is that the client has now put the site up to their server
    and they can no longer resize the text.

    Can anyone suggest a way round this for me?

    at present i am using this to link in the stylesheet:
    <link type="text/css" rel="stylesheet" href="/css/styles.css" />

    and this is all i am defining within the stylesheet:
    ..bodytext { font-family: verdana, arial, helveica; font-size: 11px;
    font-weight: normal}
    h3 { font-family: Verdana, Arial, Helvetica; font-size: 12px;
    font-style: normal; font-weight: bolder; font-variant: normal}
    ..titlebar { font-family: Verdana, Arial, Helvetica; font-size: 11px;
    font-style: normal; line-height: normal; font-weight: bolder; color:
    #666666}
    ..h3 { font-family: Verdana, Arial, Helvetica; font-size: 11px;
    font-weight: bolder}

    thanks in advance for any help.

    Regards,

    Richie
     
    Richie Bisset, Nov 25, 2003
    #1
    1. Advertising

  2. Richie Bisset

    Steve Pugh Guest

    Richie Bisset <> wrote:

    >hopefully someone can help me. The W3C accesibility guidelines state
    >that visually impaired users should be able to resize text within a
    >page. My client at the moment wants a site that complies with these
    >guidelines, but i also have to use a stylesheet. At first i used
    >embedded stylesheets, but when i put the pages up to our server the text
    >wasn't scaleable. As a result i switched to linked stylesheets, and it
    >worked fine on our server.
    >
    >The problem is that the client has now put the site up to their server
    >and they can no longer resize the text.


    How the styelsheet is linked to should make no difference. Were you
    always using the same browser to test with? Was the stylesheet being
    applied at all every time?

    >Can anyone suggest a way round this for me?


    Some browsers do not allow the user to resize text sized in certain
    units. (At least not without wading through preferences in order to
    turn off _all_ font sizing or _all_ stylesheets.)

    Windows IE will not resize text specified in px or pt
    Netscape 4.x will not resize text specified in pt

    So don't use pt or px for text sizing in your stylesheet.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Nov 25, 2003
    #2
    1. Advertising

  3. Hi Steve,

    thanks for that. can you give me any suggestions as to what to use to specify
    text size rather than pt or px? i know you can use semantic text ie. large,
    small etc. but what level of control do you have with that?

    it is bizzarre as i can look at it in ie 6.02 on our server and the text
    scales fine. exactly the same code and style sheet in the same browser on
    their server and the text wont change size at all.

    thanks again for your help.

    richie

    Steve Pugh wrote:

    > Richie Bisset <> wrote:
    >
    > >hopefully someone can help me. The W3C accesibility guidelines state
    > >that visually impaired users should be able to resize text within a
    > >page. My client at the moment wants a site that complies with these
    > >guidelines, but i also have to use a stylesheet. At first i used
    > >embedded stylesheets, but when i put the pages up to our server the text
    > >wasn't scaleable. As a result i switched to linked stylesheets, and it
    > >worked fine on our server.
    > >
    > >The problem is that the client has now put the site up to their server
    > >and they can no longer resize the text.

    >
    > How the styelsheet is linked to should make no difference. Were you
    > always using the same browser to test with? Was the stylesheet being
    > applied at all every time?
    >
    > >Can anyone suggest a way round this for me?

    >
    > Some browsers do not allow the user to resize text sized in certain
    > units. (At least not without wading through preferences in order to
    > turn off _all_ font sizing or _all_ stylesheets.)
    >
    > Windows IE will not resize text specified in px or pt
    > Netscape 4.x will not resize text specified in pt
    >
    > So don't use pt or px for text sizing in your stylesheet.
    >
    > Steve
    >
    > --
    > "My theories appal you, my heresies outrage you,
    > I never answer letters and you don't like my tie." - The Doctor
    >
    > Steve Pugh <> <http://steve.pugh.net/>
     
    Richie Bisset, Nov 25, 2003
    #3
  4. Richie Bisset

    jake Guest

    In message <>, Richie Bisset
    <> writes
    >HI All,
    >
    >hopefully someone can help me. The W3C accesibility guidelines state
    >that visually impaired users should be able to resize text within a
    >page. My client at the moment wants a site that complies with these
    >guidelines, but i also have to use a stylesheet. At first i used
    >embedded stylesheets, but when i put the pages up to our server the text
    >wasn't scaleable. As a result i switched to linked stylesheets, and it
    >worked fine on our server.
    >
    >The problem is that the client has now put the site up to their server
    >and they can no longer resize the text.
    >
    >Can anyone suggest a way round this for me?
    >
    >at present i am using this to link in the stylesheet:
    ><link type="text/css" rel="stylesheet" href="/css/styles.css" />
    >
    >and this is all i am defining within the stylesheet:
    >.bodytext { font-family: verdana, arial, helveica; font-size: 11px;
    >font-weight: normal}
    >h3 { font-family: Verdana, Arial, Helvetica; font-size: 12px;
    >font-style: normal; font-weight: bolder; font-variant: normal}
    >.titlebar { font-family: Verdana, Arial, Helvetica; font-size: 11px;
    >font-style: normal; line-height: normal; font-weight: bolder; color:
    >#666666}
    >.h3 { font-family: Verdana, Arial, Helvetica; font-size: 11px;
    >font-weight: bolder}
    >
    >thanks in advance for any help.
    >
    >Regards,
    >
    >Richie
    >

    Redefine your text sizes as '%' (percent).

    regards.
    --
    Jake
     
    jake, Nov 25, 2003
    #4
  5. brilliant, thanks for that.

    Richie

    jake wrote:

    > In message <>, Richie Bisset
    > <> writes
    > >HI All,
    > >
    > >hopefully someone can help me. The W3C accesibility guidelines state
    > >that visually impaired users should be able to resize text within a
    > >page. My client at the moment wants a site that complies with these
    > >guidelines, but i also have to use a stylesheet. At first i used
    > >embedded stylesheets, but when i put the pages up to our server the text
    > >wasn't scaleable. As a result i switched to linked stylesheets, and it
    > >worked fine on our server.
    > >
    > >The problem is that the client has now put the site up to their server
    > >and they can no longer resize the text.
    > >
    > >Can anyone suggest a way round this for me?
    > >
    > >at present i am using this to link in the stylesheet:
    > ><link type="text/css" rel="stylesheet" href="/css/styles.css" />
    > >
    > >and this is all i am defining within the stylesheet:
    > >.bodytext { font-family: verdana, arial, helveica; font-size: 11px;
    > >font-weight: normal}
    > >h3 { font-family: Verdana, Arial, Helvetica; font-size: 12px;
    > >font-style: normal; font-weight: bolder; font-variant: normal}
    > >.titlebar { font-family: Verdana, Arial, Helvetica; font-size: 11px;
    > >font-style: normal; line-height: normal; font-weight: bolder; color:
    > >#666666}
    > >.h3 { font-family: Verdana, Arial, Helvetica; font-size: 11px;
    > >font-weight: bolder}
    > >
    > >thanks in advance for any help.
    > >
    > >Regards,
    > >
    > >Richie
    > >

    > Redefine your text sizes as '%' (percent).
    >
    > regards.
    > --
    > Jake
     
    Richie Bisset, Nov 25, 2003
    #5
  6. Richie Bisset

    Steve Pugh Guest

    Richie Bisset <> wrote:

    Please don't top post.

    >thanks for that. can you give me any suggestions as to what to use to specify
    >text size rather than pt or px? i know you can use semantic text ie. large,
    >small etc. but what level of control do you have with that?


    Very little. In CSS 1 the steps were scaled at 1.5 (so medium was 1.5
    times larger than small which was 1.5 times larger than x-small and so
    on) but in CSS 2 this was changed to 1.2. I think all current browsers
    use 1.2 or thereabouts. There's also the flaw whereby IE 4 - 5.5 (and
    6 in quirks mode) treats small as equivalent to the browser's default
    whereas other browsers treat medium as the browser's default.

    If accessibility is a goal then I'd recommend the following:

    Don't set anything at all for the main content. Then it will appear at
    the size the user has chosen, or at the their browser's default if
    they have chosen not to choose a size.

    Size text that should be larger or smaller than the main content
    (headings, legalese, etc.) with percentages.

    h1 {font-size: 160%;}
    ..copyright {font-size: 90%;}

    Note that these are percentages of the parent element's font size. So
    if you nest two elements with class="copyright" inside each other the
    inner one will have text that is only 81%.

    You can use em instead of percentages (1em = 100%)
    h1 {font-size: 1.6em;}
    ..copyright {font-size: .9em;}

    There are a few bugs with em in IE. Conversely there are bugs with %
    in NN4 and Opera 5/6. I prefer % as an em bug is still present in the
    latest IE whilst the latest NN and Opera have lost their % bugs.

    >it is bizzarre as i can look at it in ie 6.02 on our server and the text
    >scales fine. exactly the same code and style sheet in the same browser on
    >their server and the text wont change size at all.


    Hmm, my IE6.2800.1106 won't resize text specified in pt or px, ever,
    as far as I've ever noticed.
    The stylesheet is definitely being applied? And it hasn't been changed
    at all? Can you post URLs so we can confirm?

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
     
    Steve Pugh, Nov 25, 2003
    #6
  7. Cheers Steve,

    The percentage thing has sorted it out.

    I'd post the URL, but at present it's still in our secure site, and i can't really
    post the password on an ng. As far as I can see though the stylesheet is applied
    on our server.

    if it's any help my version of ie is
    6.0.2800.1106.xpsp2.030422-1633

    and apologies for the top posting (it's not a term i've coem across before, but i
    assume you mean leaving the message you're replying to in at the bottom of the
    reply?) won't happen again.

    Thanks again,

    Richie
     
    Richie Bisset, Nov 25, 2003
    #7
  8. Quoth the raven named Richie Bisset:

    > Cheers Steve,
    >
    > The percentage thing has sorted it out.


    Good. body { font-size: 100%; ... }

    I don't believe anyone mentioned your choice of Verdana as the main font.

    ..bodytext { font-family: verdana, arial, helveica; font-size: 11px;
    font-weight: normal}

    http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

    helveica is spelled incorrectly, and font-weight: normal is the
    default, so is unnecessary. Should also end with sans-serif in case a
    visitor has none of your declared fonts.

    You don't need ".bodytext" - just set for the body element. You also
    don't need to keep repeating font-family declarations for every
    element. The Cascade (of Cascading Style Sheets) will handle it.

    <snip>

    > and apologies for the top posting (it's not a term i've coem across
    > before, but i assume you mean leaving the message you're replying
    > to in at the bottom of the reply?) won't happen again.


    Correct. You should post your reply below (or within, as I have done
    here) a well-trimmed quote.

    > Thanks again,


    Surely.

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Nov 25, 2003
    #8
  9. Cheers,

    that's been really helpful

    > I don't believe anyone mentioned your choice of Verdana as the main font.


    nope, i'd never seen any of that before. I'l certainly be bearing that in
    mind in future

    > helveica is spelled incorrectly, and font-weight: normal is the
    > default, so is unnecessary. Should also end with sans-serif in case a
    > visitor has none of your declared fonts.


    doh! my html skills are well rusty. i used to do sites fairly regularly, but
    all my work seems to be in director these days. A big thank you to all who've
    bailed me out on this one.

    Regards,

    Richie
     
    Richie Bisset, Nov 25, 2003
    #9
    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. =?ISO-8859-1?Q?J=F8rn_Tommy_Kinder=E5s?=

    Stylesheet referanse i stylesheet

    =?ISO-8859-1?Q?J=F8rn_Tommy_Kinder=E5s?=, Jul 3, 2004, in forum: XML
    Replies:
    3
    Views:
    591
    =?ISO-8859-1?Q?J=F8rn_Tommy_Kinder=E5s?=
    Jul 4, 2004
  2. Steven An
    Replies:
    1
    Views:
    512
    Martin Honnen
    Nov 23, 2004
  3. David Blickstein
    Replies:
    3
    Views:
    1,054
    David Blickstein
    Aug 2, 2005
  4. David Blickstein
    Replies:
    14
    Views:
    6,383
    Harrie
    Oct 16, 2005
  5. Pil (Trustworthy from Experience)

    Resizing a div by resizing its borders

    Pil (Trustworthy from Experience), Apr 18, 2009, in forum: Javascript
    Replies:
    9
    Views:
    360
    Proper
    Apr 21, 2009
Loading...

Share This Page