New media has met its match.

Internet Explorer 6 is the bane of any web developer’s existence. Unfortunately it still has a grasp on the browser market share. And when you’re doing work for law firms, pharmaceutical companies, or any industry whose target customers are more likely to have older equipment, those few people who still use IE6 become pretty important. Fortunately it’s not that hard to make a website that looks almost identical across every browser. Here are my list of fixes for the most common style related problems I’ve come across while testing in IE6.

• In IE6 the margins are doubled for elements that are floated and have right or left margins. To fix this simply add display: inline to the styles of that element.
• PNG transparency is not natively supported in IE6, but sometimes you need images that have feathered transparency. Use the script found here to solve this: http://www.twinhelix.com/css/iepngfix/
• Sometimes absolutely positioned elements that are next to each other in the HTML will disappear in IE6. Surround each with a dummy <div> tag to fix this. See this link for more info: http://www.brunildo.org/test/IE_raf3.html
• When using z-index, logically you would apply the higher index on the element you want above and a lower index on the element you want below. However in IE6 you need to put the higher z-index on the containing block otherwise you may run into issues. So if you have a main container, and a nav container with a <ul> and you want the <ul> on top (for example if you were making a drop down) put the higher z-index on the nav container, not the <ul> itself.
• You may notice a <div> with a small height that has no margins or padding has an extra margin under it or is larger than the specified height. Set the <div> styles to font-size: 1px; to fix this. If the <div> needs to be one pixel high, you may not be able to get the font small enough. Instead, try using a 1px border on the <div> to achieve the desired effect.
• Use this resource to view how a page looks in different browsers. It only returns a screenshot so there is no functionality, but it can be helpful just to see how the static layouts are flowing: http://ipinfo.info/netrenderer/
• Looking to get fixed positioning to work in IE6? Try this solution here: http://ryanfait.com/position-fixed-ie6/
• You can download a standalone version of IE6 for testing from here: http://browsers.evolt.org/?ie/win32/standalone (click “ie6eolas_nt.zip” to download). When I tried to run this through Parallels on my mac, I couldn’t get it to connect to the internet, but comments in other forums suggest that it does in fact work. At the very least you can test local files this way.

Share your tips and tricks in the comments.