CSS and HTML tricks for IE6 compatibility
If you have ever coded a website you will know how difficult it is to get your site to work in IE6. IE6 is an antiquated and ancient browser which unfortunately just wont go away.
So how can you build that fancy website using pure CSS and make it work in every browser? Read our top tips and tricks for ensuring your site works in IE6 and every other browser without requiring a separate stylesheet.
Using clear all!
The clear all is a big tool in your arsenal when wondering why a div container refuses to appear where you want it. The clear all or clear both property forces the html to clear its surroundings and can be applied after any div class.
The two types of clear is <br clear=”all” /> or defining a class with the clear: both; property. Both do a similar job but I personally prefer the <br clear=”all” />” as it gives a clean break between CSS elements.
As a standard we apply a <br clear=”all” /> before the last div container on every html page – this ensures IE6 clears everything before it before the site ends – and solves problems such as misalignments and mysteriously repeating text.
<html>
<body>
<div id=”container”>
<br clear=”all” />
</div>
</body>
</html>
Using padding instead of margin
The biggest difference between IE6 and ALL other modern browsers is the way it interprets Margin. Most web developers use a separate stylesheet to overcome this problem and adjust the margin on the IE6 specific stylesheet.
What we prefer to do is to use Padding wherever possible as IE6 interprets padding the same as other browsers. For example:
If you wanted to space a piece of content 20px from the left hand edge don’t use margin-left: 20px; – instead add 20px of padding to your container reducing the width if required i.e.
.mycontainer
{
Width: 680px
Height: auto;
Float: Left;
Margin: 0;
Padding: 0 0 0 20px;
}
This ensures your container is still 700px wide but all content will start 20px from the left hand side.
Initialise all your html elements
IE6 has a nasty habit of having its own inbuilt margin and padding already assigned to html elements which means a <table> tag, <p> tag, <form> tag as well as <h1>, <h2> and <h3> tags will all have an element of margin and padding already applied.
At the start of your css document initialise your common used tags by adding a little block of code such as:
p form h1 h2 table
{
margin: 0;
padding: 0;
}
This will reset them all back to 0 and ensure your CSS definitions are recognised when you start building your website.
How to use PNG files in IE6
For the most part web developers use jpeg images when building web pages – when the need arises and you require an image with transparency you have been forced to use the low resolution gif format as IE6 does not know how to render PNG images with transparent backgrounds properly.
There are a number of PNG fixes around but the one we have tested and extensively is the IEPNGFIX from twinhelix.
The fix only requires you to add a file to your website root and one line of CSS to your stylesheet.
img, div, input { behavior: url(“iepngfix.htc”) }
This will then process all PNG files in IE6 without that ghastly background.
Have your say...
Developpement Web: posted on 2013-02-05 04:33:29
Thanks for the good writeup. It in fact was once a amusement account it. Glance advanced to more brought agreeable from you! However, how could we keep up a correspondence?
Leave a Reply