Windows Vista »Development» Software »Internet» CSS

How bear IE6 and live happy

Wednesday, November 26, 2008

I always find some "ill" when he faces the "compatibility between browsers. Furthermore, and I have yet to understand the real reason, of all the browsers that I know that most "disagreeable" he always remains: Microsoft Internet Explorer 6! Unfortunately, the release of IE 6 is still in circulation and are frequent reports of problems viewing the pages.
A Web Developer should therefore be organized so as to have all the tools for monitoring and verification of your (sweaty) work on all possible browsers (and platforms) are available. Microsoft Internet Explorer, more than others, makes this task more difficult because - now - you need to check their web pages with both the latest version 8 (still in beta) or with previous versions, such as 6 or 5.5 . There are several ways to bring together different versions of Explorer (see Using Microsoft Internet Explorer 6 and 7 simultaneously) and alternatively there are also excellent (if a little 'lenses) online services.

image

Another good option that works well on Windows Vista, is represented by IETester, a free application and built by the same developers DebugBar and Companion.JS. IETester, although it is still in beta and some crashes in ambush, allows quickly it to check our pages - simultaneously - both on IE5.5, IE6, IE7 and IE8 beta.

CSS Patch

If by IETester we can find a flaw in the styles, that is a different interpretation between IE6 and IE7, or IE6 and Firefox, for example, found the solution we need to make sure that only IE6 uses the new definition. To me, for example, it happened with a margin! I had a class that sets the right margin to 28px and on all browsers, the result was identical, except with IE6! On the latter, to make the layout the same, I had to use a value of 8px.
One way a very simple and extremely easy to remember to solve the immediate problem is to "override" our style by uploading a different file ad hoc only if the browser is - feared - IE6:

PLAIN TEXT
CSS:
  1. / ** File ie_override.css ___
  2. * Use this file to override a style
  3. * /
  4. margin-left : 8px } div. mystyle (margin-left: 8px)

PLAIN TEXT
HTML:
  1. <! - Styles for all browsers ->
  2. "stylesheet" href = "css/style.css" type = "text/css" > <link "stylesheet" rel = href = "css/style.css" type = "text/css">
  3. <! - Styles only for IE6 ->
  4. <!--[ if lt IE 7]> <link rel="stylesheet" type="text/css" href="css/ie_override.css" /> <! [endif] ->

Related Post

Was this article helpful?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags:

7 comments to "How to withstand IE6 and live happily"

  1. getAvatar 1.0
    November 27, 2008 Francis:

    Finally, a simple workaround simple ..
    Congratulations to the many technical articles very interesting, keep it up!

    Reply Share
  2. getAvatar 1.0
    November 27, 2008 Julius:

    I hate IE 6 for no mention of 5, I will return this very useful tool

    Reply Share
  3. getAvatar 1.0
    November 30, 2008 Gioxx's Wall »Blog Archive» Best of Week # 31:

    [...] How withstand IE6 and live happily [...]

  4. getAvatar 1.0
    09 gen, 2009 simo:

    To avoid the bug of doubling the margin on IE6, not just add display:inline

    Reply Share
  5. getAvatar 1.0
    09 gen, 2009 Giovambattista Fazioli:

    @ Simo:

    to avoid the bug of doubling the margin on IE6, not just add display:inline

    Yes, in fact, see Internet Explorer 6: Eliminating the double margin bug. In this post, however, I did a different kind of example, and for more general situations where, unfortunately, not enough to add a display:inline : D

    Reply Share
  6. getAvatar 1.0
    February 26, 2009 ennio:

    Definitely the worst browser in use, this little trick I use often and I solved my trouble a lot in my site but I refused to use it and put a link to download IE 7, it is time that people realize that browser is eradicated.

    Reply Share
  7. getAvatar 1.0
    February 26, 2009 Giovambattista Fazioli:

    ennio @: I agree ... P

    Reply Share

Leave a comment

TAG XHTML PERMISSIONS: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre>         // blocco generico [code][/code]       // blocco generico [as][/as]           // Actionscript [css][/css]         // CSS Style Sheet [html][/html]       // HTML [js][/js]           // Javascript [objc][/objc]       // Objective-C [php][/php]         // PHP [sql][/sql]         // SQL