The Fresh Egg blog

Latest digital marketing news

Top 5 IE6 fixes and tips

Any web designer will know about the perils of building websites that are cross browser compatible.

It's a continuous uphill battle and until we can educate the Internet user to bin those old browsers (cough IE6) and move forward, we need to continue to use tricks and fixes that can keep our beloved designs intact!

I've gathered 5 of my favourite CSS tricks and fixes.... enjoy.

Double Margin Bug

Ok, this is one of the most common bugs, but it's also one of the easiest to resolve. If you use left or right margin on a floated DIV, you'll find that  most of the time (yep its not consistent!) IE6 will double your margin value.

For example you give the DIV a margin-left:10px; but IE6 will double it to 20px!

The solution is simple. Add the display:inline property to the container and it will correct it, don't ask me why, but it does.

Conditional Style Sheets

<!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="ie6.css" />

<![endif]-->

My preferred method to dealing with conditional mark-up is to use a conditional stylesheet, not only is it cleaner but it enables you to ensure your main stylesheet validates. The example above would be used to load a stylesheet specifically for IE6. You can also use this method to specifically control IE7 and IE8 etc. too.

Here are some examples:

To target IE7 only you would use:

(so to target IE6 only, simply change to [if IE6], or for IE8 [if IE8] etc.)

<!--[if IE7]> your css file here <![endif]-->

To target both IE6 and 7 you would use:

<!--[if lt IE8]> your css file here <![endif]-->

Target everything EXCEPT IE

<!--[if !IE]> your css file here <![endif]-->

IE 'Hacks'

If you must , you can also use hacks in your main stylesheet, note however if you do, your stylesheet won't validate, here are some common examples....

For IE6 only

* html .container { height:55px; }

The above example demonstrates how to parse a CSS rule specifically for IE6 by starting it with * html. It doesn’t really make sense I know, but all other browsers will ignore  it.

Ignored by IE7 only

#div {

_height: 300px;

}

Adding an _ before your value will cause it to be ignored by IE7 only.

Hide from IE6 and lower

html > body #div {

height: 300px;

}

Adding html > body before you markup will cause it to be hidden from IE6 browsers and lower.

No Hover States

a:hover

Modern browsers support hover states on pretty much any tag, however IE6 on supports hover states on 'a' tags. In addition to this, these 'a' tags must have an 'href'.

There is no real CSS 'fix' for this but you can get around it with the use of a javascript script called 'whatever hover'.

PNG Fix for IE6

Well it had to get a mention! There are a few options available for this one, my favourite is IE7.js. It's a javascript library created to make Internet Explorer behave like a standards-compliant browser!

It fixes many HTML and CSS issues but one of the best has to be making transparent PNG's work correctly under IE6 (and 5).

To use it, simply include the following code into your page header:

<!--[if lt IE 8]>

<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>

<![endif]-->

Then simply name and transparent PGN's you've created to include '-trans'. So for example logo.png would become logo-trans.png

Alternatively you can set a global variable to apply the fix to all .png images:

var IE7_PNG_SUFFIX = ".png";

Worth noting, if your website uses a secure connection at any point (https) you will need to download the JS file and host it yourself, otherwise you will get a security error when visiting a secure URL, this is because Google only host this file on a non-secure connection (http).

Again, these are my own preferred methods of solving IE6 bugs..If you have any others that you want to share please comment below!



Share this post


comments powered by Disqus