Today we would like to talk about Microsoft’s next attempt to release their new browser. IE9 is new and we were really excited about it’s release until recently. As you all know or maybe not know, we have just launch a new version of our website. Match all browser as far as looks and styles worked out any bugs. Everything was working fine on IE7, IE8, Firefox, Chrome, Safari, Opera. All major browsers working all displaying just fine. Along comes IE9, we have all been pretty excited. I guess the problem with IE is that for some reason flash is no longer working. At least not the way it was intended. Correct me if I may but when something works on all other platforms maybe you would want this to continue. Microsoft continues to try to make their own standards once again. Now This browser does not work right. It’s extremely hard to find any kind of information on the subject. How why this problem is happening. To all of us it is a complete mystery. It seem everything is working fine as far as a functions of the website. How do you mess up flash anyway. I guess leave it to Microsoft to do that for you.

Web Designers Solution for IE9 bugs

For those designers out their that are having problems and they are increasing your blood pressure we have a solution. Your best be is to use conditional comments. The best way to explain this so that everybody gets what this means is that if the conditions are correct then do this. In order to do this for IE9 you have to be very specific in targeting. As of writing this I have not been able to find very much information on this subject. Lots of IE6 or IE7 even IE8 information around the net, but not hardly any for IE9. So you want your website to look good on all browsers, even IE9. So what is the solution?

With conditional comments it’s easy to say display this style instead. This is really simple if you understand inheritance in CSS. external style sheet are the lowest followed by styles on the page itself, then inline styles have the highest priority. I don’t very often use inline styles. I would avoid this as this can prevent you from changing global styles. However it is useful if you don want to anything to change it.

The pages of this site are controlled mostly through external style sheets. With this in mind understanding inheritance if I do decide to place to place a style with the same name this will override my external style sheet. If I combine this with a conditional comment for IE9 then I can override my styles and display an alternate for just IE9.

<!–[if IE 9]>
<style type=”text/css”>
#apDiv12 {
position:absolute;
left:0px;
top:92px;
width:811px;
height:444px;
}
</style>
<![endif]–>

From the example above it would override apDiv12 but only for IE9 all other browser it would display the same as if it was not there.

So what about Objects like flash, photos, and any other stuff that I want to on the page that I might not want to display for IE9? In cases like this you might run into problems say you have flash on the page. This was our case. How to make something else display but only for IE 9.

First I create a new div but only for IE9 like this.

<!–[if IE 9]>
<div id=”apDivtopie9″>
<img src=”../flash3/frame2.jpg” width=”800″ height=”435″ />
</div>
<![endif]–>

This would never display for any other browser but IE9.

Next we need a style sheet to override our current styles

<!–[if IE 9]>
<style type=”text/css”>
#apDiv12 {
position:absolute;
left:0px;
top:92px;
width:811px;
height:444px;
display: none;
}
#apDivtopie9 {
position:absolute;
left:0px;
top:92px;
width:811px;
height:444px;
</style>
<!–[endif]–>

we use the display: none; to make the other div disappear. Thus we have told IE9 to display different content and make the other content disappear.

So we now have 2 ways to control IE9. Thus giving back some control to the designers and giving IE9 time to work out the bugs. You still can look good to visitors on using IE9 and don’t have to compromise your design just because Microsoft can’t seem to get their act together or decide to release a buggy version of their browser.