Simplify your business
Friday, 29 August 2008 9:18 am

Testing browser compatibility

Tuesday, 24 April 2007  

Unless our clients can give us a compelling reason to do otherwise, this is our preferred methodology for testing browser compatibility with CSS:

  1. Test everything using the standards compliant Firefox browser.

  2. Validate the generated markup for accessibility.

  3. Repeat (1) and (2) until it looks and behaves as it should.

  4. Test everything using the stylistically-challenged IE browser.

  5. Apply any star html hacks and “stupid browser” fixes as needed.

  6. Repeat (4) and (5) until it looks and behaves as it should.

If we rule out dabbling in some very unusual layout styles, there’s usually no need to do additional tests for Konqueror, Safari and Opera as all three offer excellent support for web standards.

Posted in CSS, Design, HTML, Usability by Ivan
Blinklist icon Del.iocio.us icon Furl icon Reddit icon Technorati icon Yahoo! icon

 two comments:

  1. Gary - Wednesday, 6 June 2007 3:05 pm  

    When you say to "apply any star html hacks and stupid browser fixes as needed", what do you mean exactly?

  2. Ivan - Wednesday, 6 June 2007 4:32 pm  

    Gary,

    Have you followed the link I provided? Maybe because it didn't point to a specific website, it discouraged you from investigating? If you look at our own stylesheet, you'll see that we mainly used it to subtly control stuff like widths and margins of some of the page elements:

    decrease the title top margin:

    * html .title, .title a {
       margin-top: 0.5em;                  /* stupid ie hack */
    }
    

    decrease the tagline left margin:

    * html #tagline {
       margin-left: 70px;                  /* stupid ie hack */
    }
    

    decrease the searchform textbox width:

    * html #searchform input.textbox {
       width: 80%;                         /* stupid ie hack */
    }
    

    increase the tagcloud line height:

    * html div.tagcloud {
       line-height: 2.6em;                 /* stupid ie hack */
    }
    

    decrease the simplechart width:

    * html div#simplechart table {
       width: 85%;                         /* stupid ie hack */
    }
    

    I won't go into the theory behind what makes "star html" hacks work, just follow the original link in the post, above.


Got something to say?

To protect your privacy, your email address will not be displayed.





Some basic rules for commenting:

  • Watch your language.
  • Keep comments on-topic and relevant.
  • You can use basic XHTML tags for formatting and linking but not bbcode.
  • Comments are moderated, so don't double post if your comment doesn't appear immediately.
  • Please proof-read your comments for spelling and grammar mistakes.
  • Watch your language.