SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 29 of 29
  1. #26
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I mentioned it via PM, but to further elaborate here it's both Opera and IE7 (and 8/9 if you turn off the new behaviors) on a 120dpi system. This is most likely caused by your designing on the notion that certain elements would remain fixed in size and/or height, when your fonts are still dynamic. The entire POINT of things like the WCAG saying to use %/EM fonts is so that they auto-enlarge WITHOUT the user having to dive for the zoom on every page... so your layout needs to be flexible enough to handle that.

    I think it's why many developers stick with "just do everything in PX" along with the "crap out a fixed width" approach, is the mere notion of things automatically adjusting their size is "too hard" for them -- sad since in many ways it's EASIER because, well... Everything automatically adjusts to it's content instead of constantly having to declare sizes on everything. It also REALLY ties your hands behind your back when it comes time to do what's now being called "responsive design" -- a new name for what was the ENTIRE POINT of HTML from the beginning - marking up content in a manner where the user agent can best adjust the content to the capabilities of the target device... In that way HTML 2 based sites were more about "responsive design" than most of what people have churned out since the PSD jockeys took over "design".

    Another of the issues -- the overlapping lines -- is caused by changing your font-size without redeclaring the line-height, which can result in VERY unpredictable behaviors cross-browser. Some people say you can omit the metric on the line height (line-height:1.5 for example, instead of 1.5em) and it will inherit properly, I've found that not to work worth spit on a boot. My rule of thumb is if you change the font size, change the line-height.

    Even in Firefox (which I'm assuming is rendering right) it's not great -- on the accessibility front there are things like color contrast between text... the ochre text in the header for example is well below contrast minimums compared to the image behind it -- the pattern of the image further exacerbating the issue. Same goes for the 'redundant' red text at the top of the content column... let's use that one as an example.

    The easiest formula for color contrasts is to convert to emissive luminance:

    L= 0.3 Red + 0.59 Green + 0.11 Blue

    If the luminance of two colors is less than 50% apart, there will be legibility issues for a LOT of visitors... 50% is 'minimum', 75% is ideal... so let's plug in that red and the uniform grey from the bridal pic behind it.

    The grey is roughly #888888 or 136,136,136 -- which after the above math equals.. 136. The red is #CC3333 or 204,51,51 -- which is 61.2+30.09+5.61 = 96.9... divide by 2.55 to get percentage and the grey is 53.33%, the red is 38% -- so that's only 15.33% when you want at least 50% separation. For some people that text might as well be invisible. The footer uses that same red, with black text. Black is 0, so that's only 38% which is why it too is hard to read. Even the black text on that gray is 53.33%, barely over what's considered minimum.

    In the 'rewrite' I did I took that same red (because it IS a nice color choice) and went with white on it (100%) for a 62% contrast... a little below the ideal, but entirely adequate. Colors when it comes to text cannot just be about what's pretty -- you HAVE to make it legible too. (something I don't think is even covered anymore in graphic arts programs given what I've seen the past five or six years).

    Off Topic:

    ... and don't sweat things getting a little heated -- It's why I went the extra mile on that rewrite to illustrate what I'm talking about as I'd really like you to understand why I reacted as I did to it, and how to fix/improve all those things I pointed out as flaws.

  2. #27
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, i added a £ html entity which fixed it :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  3. #28
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    David, you should test your site in the following, in no specific order:

    • Google Chrome
    • Mozilla Firefox
    • Opera
    • Safari


    Then, after it works right in all of those standards-compliant browsers, take a deep breath, have a slug of tequila, and open it in IE.

  4. #29
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    Then, after it works right in all of those standards-compliant browsers, take a deep breath, have a slug of tequila, and open it in IE.
    You mean versions below IE 8+? Because 8 and 9 are just as standards-compliant as the others.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.



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
  •