Yambo's Blog
Our Blog » Internet explorer 6 issues
Internet explorer 6 issues
Browser inconsistencies make up a lot of our work as web designers, in particular Internet Explorer. The average web user will most likely be using Internet Explorer as their main browser.
Internet Explorer, known as IE, is pre-installed on all Windows operating systems. And whilst IE 8, and IE 9 (currently in beta mode), have vastly improved the way they handle CSS, there are still niggling issues.
So we have put together this post to explain some of the most common problems we have encountered with Internet Explorer over the last 5 years, and have listed below workarounds/fixes in getting websites browser compatible. Luckily, Internet Explorer supports 'conditional statements' - these comments allow for us to specifically target Internet Explorer and its version number.
To be or not to be , IE 6 support?
Internet Explorer 6 seems to be the most problematic. It's a browser which doesn't properly support PNG files and constantly struggles with CSS coding - The Double Margin Bug, Height Issues, Padding Problems and Layering nightmares. So our rule of thumb with IE 6 is if the project allows for us to work fixes for it then we will. What I mean by this is; IE6 was released in 2001, now over 10 years old, and to support many of the new web 2.0 features we feel we have to make a decision on whether or not it is worth-while for us to support such an old out-of-date browser.
The easiest solution is to not support IE 6 at all and simply set-up a 'IE6 detection script'. This script allows for you to target only Internet Explorer 6 browsers with a java-script alert box:-
<script type="text/javascript">
if($.browser.msie && $.browser.version=="6.0")
alert("Sorry, this website no longer supports Internet
Explorer 6, please ugrade your browser.);
</script>
The downside to this approach is you are requiring the user to take action to solve their browser problems - some users may not feel comfortable in doing this. The next solution involves targeting IE 6 browsers and correcting issues by writing custom style sheets - this option requires CSS knowledge. To target only IE 6 browsers use the code below -
<!--[if LTE IE 6]>
<link rel="stylesheet" href="LINK-TO-CSS-FILE/ie6.css"
type="text/css" media="screen" />
<![endif]-->
Basically this is saying 'If Less Than or Equal to Internet Explorer 6' show this custom style sheet, if not show the default stylesheet. This also works on IE 7, 8, and 9. You only need to write the styles that do not work correctly in IE as the main style sheet is still loaded.
A variation of this is by using hacks in the CSS style sheet to target individual browsers. The main downside to this method is it usuallly invalidates your CSS coding. It can be used to serve as a quick way of regonising an IE problem though. Conditional statements in HTML have cross-browser support, but CSS hacks such as these do not.
Another issue IE 6, 7 and 8 suffer from is they do not support CSS 3 - IE 6 can actually be forgiven for this as it is a very old browser - A brilliant work-around we have found and constantly use is CSS3 PIE. Basically it enables Internet Explorer to render CSS3 properties with just a little bit of code. Some of the features supported are rounded corners, soft drop shadows, gradient fills, and so on.
For more information please visit the CSS3 PIE's website.