SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    H1 size and a small padding issue

    I was looking at a site I built in IE5, www.ntcadocs.com, and I noticed that all my h1's are huge even though I specified 12px in the external CSS file. It looks fine in IE6 and Mozilla.

    Here's the code:
    Code:
    #text h1{font: bold 12px Arial; margin:0 0 10px 0;}
    #text h2{font: italic 11px Arial; margin:0 0 10px 0;}
    The second problem I was having was that in IE5 the width of the text box is too small. I think the reason is the 12px padding. Is there a different way to do this?

    Thanks in advance

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perhaps you need to break the font info down, font-size, font-weight, etc. for IE5...?

    As a point of interest, you shouldn't really use absolute pixel sizes as it disables people's ability to set their own font size. Try using 80% instead of 12px and 75% instead of 11px. Fiddle around with the values and you'll get the same look and no accessibility black mark.


  3. #3
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by greg.harvey
    As a point of interest, you shouldn't really use absolute pixel sizes as it disables people's ability to set their own font size.
    True, but then it takes away from the design aspect of the site if all the text is much bigger for different people. How do you measure the percentages? I tried 80%, but then the headers became smaller than the text. Also, I know several people who were really upset because they accidentaly set their fonts bigger and couldn't figure out a way to change it. Are there any statistics on how many people actually use the option of font size changing?

  4. #4
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't know about statistics, but it's an accessibility compliance requirement. You won't pass any accessibility validators (such as Bobby) with absolute font sizes I'm afraid.

    I imagine people who have difficulty reading use it a lot. I know my father does. He needs reading glasses but refuses to accept the fact. He's not even that computer literate. I mean, he's pretty good for a 56 year old, but he's sussed it out.

  5. #5
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have no dissability that I know of but at the end of a long day I like to lean way back in my chair, put my feet up and do a bit of casual surfing. And yes, on some sites I need to increase the text size to be able to read them.

    As for what sizes to choose, have a look at his page and the pages linked from it:
    http://www.thenoodleincident.com/tutorials/typography/

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  6. #6
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent link!

  7. #7
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I came across it somewhere in the forums here and it now resides in the CSS/Essentials/ bookmark folder .

    A few more remarks...

    About percentages... There's no way to measuring this of course but I think you might be surprised. It's also a mather of 'doing the right thing', of meeting (future) legal requierments and to provide the user with the best experience possible.

    About the 'design perspective'. Do you design for print of for the web? Follow the link below to see what I mean:
    http://www.zeldman.com/daily/0403b.s...lesbaseddesign

    This next thing I'm quoting freely as I don't remember the original source, somehow it did stick in my mind. It's a conversation between a weelchair bound guy and his car mechanic:

    Guy: Why don't you put in a weelchair ramp to access your garage?

    Mechanic: It's not worth it, you're my only customer in a weelchair.

    Guy: Well yeah... because you don't have a ramp.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  8. #8
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the links, but does anyone have answers to the two questions I had?

    Even if I measure fonts in a different way, the issue of it not working in IE5 is still there...

  9. #9
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tempus
    Thanks for the links, but does anyone have answers to the two questions I had?

    Even if I measure fonts in a different way, the issue of it not working in IE5 is still there...
    Oops... Forgot!

    Ok, I had a little play and made two small alterations which seem to be doing the trick (My comments in caps for clarity ):
    Code:
    #text {
    	position: relative;
    	margin: 0; padding: 12px;
    	width: 583px; /* ie5 gets this:  REAL WIDTH + BORDERS + PADDINGS*/ 
    	border: 1px solid #999;
    	voice-family:"\"}\""; 
    	voice-family:inherit; 
    	width: 557px;/* compliant browsers get this  REAL WIDTH!*/
    }
    html>#text {width:557px;}/*other browsers eg be nice to opera REAL WIDTH AGAIN!*/
    
    /* MOVED THE BELOW 'OUTSIDE' THE BOX MODEL HACK */
    #text h1{font: bold 12px Arial; margin:0 0 10px 0;}
    #text h2{font: italic 11px Arial; margin:0 0 10px 0;}
    The h1 problem dissappeared when I moved the h1 and h2 rules 'outside' the box model hack, ie under the 'nice to opera' rule.

    And about the width problem... The whole point of the box model hack is that you can give different widths to IE5.Xwin and other browsers, you had given them the same width. So I added 26px (2times(1px border + 12px padding)) to the IE5 width and solved!

    Sorry for rambling first and helping later, should have done it the other way around

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  10. #10
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by greg.harvey
    You won't pass any accessibility validators (such as Bobby) with absolute font sizes I'm afraid.
    keep in mind, however, that automated tools such as bobby are not a real measure of how accessible a site really is. in the case of fixed font sizes set via the stylesheet, i would still argue that it's accessible, as users can disable stylesheets. true, they can't in the leading browser (*cough*IE*cough*), but - as i ranted on in a previous thread - people who really need to resize their fonts should really use a browser that allows them this feature (i.e. anything other than explorer). the onus is not just on the web developers, but on users with disabilities.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  11. #11
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    The h1 problem dissappeared when I moved the h1 and h2 rules 'outside' the box model hack, ie under the 'nice to opera' rule.
    wow, that's weird...does anyone know a reason for that? I would think that the "html>#text" would be able to be seperate.
    Quote Originally Posted by Zoef
    And about the width problem... The whole point of the box model hack is that you can give different widths to IE5.Xwin and other browsers, you had given them the same width. So I added 26px (2times(1px border + 12px padding)) to the IE5 width and solved!
    haha...stupid mistake on my part, thanks for finding that!
    Quote Originally Posted by redux
    the onus is not just on the web developers, but on users with disabilities.
    Very good point.

    Thanks to everyone for the help and advice!

  12. #12
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    keep in mind, however, that automated tools such as bobby are not a real measure of how accessible a site really is.
    That's always in my mind, and I often disregard some of the "possibles" that Bobby throws up, however there is plainly, clearly and unequivocally no doubt that a fixed pixel font size is *NOT* accessible. It is well documented.

    I think the onus does fall on the developer since MS clearly don't give a damn and most computer users are not competent enough to get around the issues themselves. We are supposed to make everyone's life as easy as possible, surely!

  13. #13
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by greg.harvey
    there is plainly, clearly and unequivocally no doubt that a fixed pixel font size is *NOT* accessible. It is well documented.
    Technically, pixel measured fonts are accessible by definition to most people. I think the point redux was trying to make was that if something is inaccessable (meaning completly unable to be accessed) to a person, then he or she would have gone out and found a different browser or method if the web was that important to them.

    Quote Originally Posted by greg.harvey
    I think the onus does fall on the developer since MS clearly don't give a damn and most computer users are not competent enough to get around the issues themselves. We are supposed to make everyone's life as easy as possible, surely!
    Yor're right in that we, the developers, are supposed to make life easy for the users. But people who have disablities have others means to access the web. If they don't already have other ways it's not like they can't make a phone call to their computer company, go to some servicing store, or just ask someone and find out other methods to use the internet.

  14. #14
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tempus
    Technically, pixel measured fonts are accessible by definition to most people.
    Precisely. Therefore not accessible.

    I agree, but you're putting up unnecessary barriers IMHO. Of course, where there's a will there's a way, but I think Zoef summed it up perfectly:

    Quote Originally Posted by Zoef
    It's also a mather of 'doing the right thing', of meeting (future) legal requierments and to provide the user with the best experience possible.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    If they don't already have other ways it's not like they can't make a phone call to their computer company, go to some servicing store, or just ask someone and find out other methods to use the internet.
    Just re-read your own words and then put yourself in Rob's place http://www.tunna-resources.co.uk/.

    go to some servicing store
    That's No easy task for Rob.

    I'll admit I am biased towards accessibility as Rob does ask for help (a lot) and obviously personal experience does colour your judgement. I do get to see both sides of the coin and while I don't think designers should be forced to comply, I can't see the harm in taking on-board the accessible point of view.

    Maybe it's the browser manufacturers (Ie especiallly) that should really be addressing this issue and let the rest of us get on with our work ( but I don't think that's going to happen just yet).

    Paul

  16. #16
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Just re-read your own words and then put yourself in Rob's place
    I did, and I still think that if Rob is able to build a webpage, he is able to find other ways of surfing the web like using Mozilla (enables you to resize pixel measured fonts). Also, people that are severly disabled and that cannot do things on their own usualy have people to help them, if not, they probably wouldn't be going online in the first place.
    Edit:

    I do agree, however, that developers should make some effort to make the site accessable if time and money permits. For some designers, that's just not feasible.

  17. #17
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, but changing from pixel fonts to percentage based sizes takes no more time or money. It's simply working practices. You say pixels, I say percentages... our stylesheets have the same number of lines...

  18. #18
    SitePoint Addict
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by greg.harvey
    Ah, but changing from pixel fonts to percentage based sizes takes no more time or money. It's simply working practices. You say pixels, I say percentages... our stylesheets have the same number of lines...
    That's not neccesasrily true. For example, on the NTCA site given at the top, the links on the navigation are pictures and are a bit smaller than the text. Logically, if someone can't read the text, then they can't read the navigation eigther. So I could change the text (after taking time to research the conversions), but there wouldn't be much of a point if I didn't change the navigation, which takes much more time that I don't have. Also, what about sites that have all measurements based in pixels? To change the font to em's, you need to change all the rest of the layout's measurments to em's so the text fits which may take much more time, especially for someone who is not fluent in em conversions. It may be a worthwhile thing to look into for future sites, but "changing from pixel fonts to percentage based sizes" on current sites may not be feasible.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Now imagine that when you visited Rob's site it was unavailable to you and only disabled users with special equipment could use it.

    You would have a choice of either :

    a) Purchasing the special equipment (or alternative browser etc) to view the site and see the information. (Or in your words ("make a phone call to their computer company, go to some servicing store, or just ask someone and find out other methods").

    b) Not bother visiting at all.

    I'd choose option b.

    So now the site has immediately lost xxx number of visitors. Not a good business move!

    Although the number of disabled people per population is low a high number of them do rely on the internet because they can't get about as easy as the rest of us. They are a number to be considered for whatever reasons.

    I think that businesses are aware that cutting a slice of the market out of their business isn't good business practice irrespective of the question of accessibility.

    To be honest it takes a good designer hardly any extra time to develop an accessible site as it does to make a non accessible one. After all whats involved.

    Good Structured mark-up (the basis of this thread)
    Validated code
    Flexible font sizes and clear display properties
    Access Keys and tabindex
    Logical presentation and structure
    Usability

    I'm just trying to offer an alternative way of looking at things without saying that it must be done this way. I respect the views of those that disagree and say "they (the disabled) should get their own accessibility equipment and browsers to do the job for them because it's not my problem". But in the end, in a caring society, it does fall to someone to help.

    Paul

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    but "changing from pixel fonts to percentage based sizes" on current sites may not be feasible.
    I was thinking more about new sites and building the techniques into the site as you go. Obviously re-doing an old site is going to cost more and prove more difficult.

    Paul

  21. #21
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    keep in mind, however, that automated tools such as bobby are not a real measure of how accessible a site really is. in the case of fixed font sizes set via the stylesheet, i would still argue that it's accessible, as users can disable stylesheets. true, they can't in the leading browser (*cough*IE*cough*), but - as i ranted on in a previous thread - people who really need to resize their fonts should really use a browser that allows them this feature (i.e. anything other than explorer). the onus is not just on the web developers, but on users with disabilities.
    On first thought I agreed, on second thought... maybe not .

    What you are saying is that people with a dissability almost have an obligation to be more computer savy then the general population. How many people even know what a stylesheet is? And why should they care, or have to learn this, just so they can visit your website?

    Also consider that many people (disabled or not) don't have their own computer and rely on friends, libraries, community centers, internet cafe's etc to access the internet. These people do not have a choice as to which browser to use.

    Anyhow... back on topic
    Quote Originally Posted by tempus
    wow, that's weird...does anyone know a reason for that? I would think that the "html>#text" would be able to be seperate.
    The thing is that that the 'nice to Opera' rule is not only needed for Opera but also for (guess...) IE5.Xwin. If you use the box model hack without the 'nice to Opera' rule IE5.Xwin has the tendancy to ignore the next rule. In your case, this was your h1 rule. Further down in your stylesheet you were being nice to Opera, but to late for IE5. Keep the boxmodel hack in one piece without interupting it with other rules and you won't have this problem.
    Quote Originally Posted by tempus
    Thanks to everyone for the help and advice!
    You're very welcome!

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  22. #22
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    What you are saying is that people with a dissability almost have an obligation to be more computer savy then the general population.
    not more computer savvy, just have the right tools that help them. just like blind users need to consider the use of a screenreader/braille-display, users with partial sight loss, glaucoma, or just old age myopia, need to make a choice as to which browser gives them the flexibility they need.

    How many people even know what a stylesheet is? And why should they care, or have to learn this, just so they can visit your website?
    not just my site. how many sites do you come across that style their fonts in pixel sizes, rather than percentage/ems/etc ? i try to cater for all markets as much as possible, but IE in that respect is broken, full stop. so IE gets the font size in pixels (while others get the font size sent in ems). if that inconveniences IE users that need scalable text, they should either choose a browser that gives them what they need, or lobby microsoft to include the feature.

    Also consider that many people (disabled or not) don't have their own computer and rely on friends, libraries, community centers, internet cafe's etc to access the internet. These people do not have a choice as to which browser to use.
    in which case they can/should complain to whoever maintains those computers. with the example of a university, for instance, it must make adequate provisions for users with disabilities (under whichever disabilities discrimination act applies to its country).

    sorry for seeming too harsh, but at the end of the day this pragmatism is borne out of a frustration with IE's well known quirks while running some large standards-compliant sites...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •