ISO50

RSS

Preparing Your Sites For IE 8

Posted by Scott

ie8.jpg Yes, I have been quite kind to Microsoft lately, but if you count yourself among the ranks of web designers you know that Internet Explorer is still the bane of our collective existence. At some point, long ago, when Microsoft ruled the browser universe, some genius over there decided to give a big middle finger to all of us designers and our so-called “web standards”. The result is that things just don’t look the way we as designers intend in IE: CSS elements don’t render properly and various functionality breaks down forcing us to implement IE-specific hacks and tweaks to make it all work. Well, MS, in their infinite wisdom, have finally decided to back down and have announced that the forthcoming eighth iteration of their Internet Explorer browser will embrace web standards. What a novel concept! Embracing web standards in a web browser? What will they think of next?

This certainly is cause for some celebration, no more tweaking and comparing, writing IE-specific code to make things look right across all the browsers. But wait, we’re dealing with IE here, so of course there’s a problem with this new development, sort of the last stand of IE’s stubborn unwillingness to play by the rules. Because IE8 now adheres to normal web standards, it can actually break sites that were written to accommodate it’s older versions. Thankfully the solution is an easy one and Ed Bott has a great article over at ZDNet explaining the issue and how to apply the rather simple fix (one line of code!). We’re not out of the woods yet, but at least we can look forward to a day when the IE8 install base becomes large enough that we can all but forget about making our sites look pretty for the previous, less accommodating versions.

Anybody out there done much testing with IE 8 yet? Have you implemented the fix and if so, how is it working out? Let us know in the comments…

20 Comments Leave A Comment

1

Bas says:

December 23, 2008 at 6:02 am

As you said: we will still have to take the old versions of IE into account, which will probably drag on for another 5 years or so. I’m still running IE6 here consciously, besides Chrome. And for instance the University of Amsterdam, where I’m studying, still uses IE6 too. Not because a lack of money, by the way.

2

Kevin says:

December 23, 2008 at 7:13 am

Yes, IE7 will last for 4-5 more years, but thats no so much a problem. IE6 is the bitch and still has a large share of the market and hopefully when IE8, and not forgetting Windows 7, is released this should drop dramatically.

Also, I have downloaded the IE8 beta, curiously like just to see, and I must say, pretty shocking. Almost all the websites I’ve worked on and are currently working on had problems in IE8. Lets hope they fix it or lets hope that little fix… fixes it!

Peas Out

3

Zach says:

December 23, 2008 at 7:29 am

I downloaded IE8 beta and the number of sites that work in IE8 are about 50%. You’re correct that IE6 is the bitch. If the entire internet community would force IE6 into non-existence, developing would be much easier.

IE7 may be a pain in the ass, at least it follows standards closer than 6. I find myself writing hacks for 6 more often than 7.

Maybe we as developers need to make that push and just stop or even slow developing for IE6 users. Maybe we don’t leave out IE6 users but maybe we don’t spend as much time making sure it’s a picture perfect website in IE6 (still fully functioning just not pixel perfect) and instead focus on the big 3 (Firefox, IE7 & 8, Safari/Chrome). Just a thought.

Great article btw.

4

rafalski says:

December 23, 2008 at 8:07 am

IE8 proves what I’ve been bitching about for years: that standards are poorly designed and none of the browsers currently “supporting” them does it well.. in part due to the nature of the standards.

The reasons IE8 displays sites badly is that it is the most (if not only) compliant browser – the sites are not.

Nobody explains it better than Joel Spolsky:
http://www.joelonsoftware.com/items/2008/03/17.html

6

Matt Good says:

December 23, 2008 at 10:36 am

This one-liner is a nice work-around, but not a real fix. Many of these sites display just fine in existing standards-compliant browsers (I think Safari and Opera are the only 2 to pass the Acid3 compliance test). I’m more interested in seeing how successful people are getting IE8 to work without the IE-specific hacks. Using conditional comments to restrict the hacks to older versions of the browser would be a simple way to start.

7

Grant says:

December 23, 2008 at 10:48 am

As far as sites that I work on, IE8 is a huge improvement, but I’ve noticed it still has a couple of its own quirks. So, at least the beta I’ve used doesn’t make it as easy as, “code once and have it work in FF, Safari, Opera, IE8, etc.” Getting closer, though.

8

Kenny Villacorta says:

December 23, 2008 at 10:53 am

Running now in a basic and updated Win XP Virtual Machine. Tried the Acid 3 test, crashed. The automatic restart is funny because it starts the Acid 3 test again and it crashes WIE 8 again. By the way the score was 13/100. Here’s my results from alternative browsers:

9

Brian says:

December 23, 2008 at 11:38 am

I just completed my first web design class at school and IE gave me nothing but problems with the standards. Firefox and Safari of course worked like a beautiful charm. I totally understand the IE frustrations and hope IE 8 will take care of all the problems (wishful thinking I’m sure). I was hoping that the guys over at Windows would give up (like there slogan says) and completely get rid of IE (especially 6) and just realize that they don’t have what it takes to make it work like the other browsers. But of course most web designers don’t design for other web designers 96.53% of the time so most viewers to our designed sites don’t know any better and understand our frustrations with IE and they will continue to use it because of…damn.

p.s. Sorry for my vent.

10

Jasper Agterbosch says:

December 23, 2008 at 11:45 am

Been working with Outlook 2007 lately and it’s terrible what it does to CSS promotional mailing creations.
It does not understand CSS and had the Word HTML kid on board, which is .. well what it is.
CSS is so common in this market, but Microsoft seems to care like a deaf, dumb and blind kid.

11

Ruben Vandenbussche says:

December 23, 2008 at 2:32 pm

Nice article! I just can’t understand that people are still using internet explorer. I think if they would know why we arent using it they will all use better browsers. If all the designers just stand up and put a big middle finger to IE and make there sites good for the standards.

12

Ric says:

December 23, 2008 at 3:57 pm

At work I don’t have to care about IE, because that is our programmers job. When blogging I don’t even care about IE, because I’ve grown sick and tired of it. And if ppl don’t think IE is crap, they wont mind if my website looks like crap! j/k.. kinda..

13

Clint says:

December 23, 2008 at 5:47 pm

-Ruben
The reason so many people still use IE is because it comes with their brand new vista desktop and its lovely cornflower blue “e” is familiar. Downloading a NEW browser is totally outside their realm of understanding.

“why do i need new internet? i already have the internet!”

i kid you not i have heard this. a lot.

14

Kenny Villacorta says:

December 24, 2008 at 9:22 am

Oops! I forgot the Acid 3 Test scores. Here it goes.

Win XP SP3 PC. Out of a possible 100.

Opera 10 (alpha) 100
Opera 9.63 85

Firefox 3.1 (beta 2) 93
Firefox 3.0.5 71

Chromium build 2778 100/100
Chrome 1.0 79

Safari 4 100
Safari 3.1 75

IE 8 beta 2 13 (Wikipedia article the score is 21)
IE 7 12 (Wikipedia article 14)

All I can say is that the IE team better have something up their sleeve when IE 8 comes out of beta. Even if there is no standard to measure up to, this shows that the other four are trying at least. A score of 12, 13, 14, or 21 seems unacceptable.

15

Scott says:

December 24, 2008 at 3:51 pm

oh man, that’s sad….well maybe we’re not off the hook yet after all… I just hope they fix the CSS box model, that’s my main gripe.

16

H says:

December 25, 2008 at 4:49 am

I guess many of you are already familiar with this script, bur for thoose that read this post a great script to use is Dean Edwards IE7-javacript:
http://code.google.com/p/ie7-js/

Used it recently so that IE7 would behave like the other modern standard browsers such as Firefox and Safari.

17

Ryan says:

December 29, 2008 at 9:29 am

I noticed though that IE8 does render things properly compared to earlier releases. However, leave it to Microsoft to still keep things screwy with us developers! IE7 has its known set of pains in our side but IE8 (which I have installed but dont really use) has issues rendering white space in the HTML! I had to modify scripts (such as the Adobe Flash Javascript code) to remove whitespace as IE8 takes whitespace literally!

They did improve but Microsoft is still the bain of our existence and most likely always will be!

18

teddY says:

December 30, 2008 at 9:15 am

Thanks for sharing! I guess it’s the best workaround available without using any kind of CSS hacks or IE conditional comments in one way or another. I could still remember when IE7 was released, many people were complaining about how it breaks websites made specifically for IE6 browsers – and now with IE8 in the pipeline… I foresee more angry backlashes at Microsoft They should’ve just pack all the improvements into a single release.

In addition, I am fairly disappointed that IE8 still performs poorly in the face of the Acid 3 test. Other browsers were trying hard to have the beautiful, maddeningly-close perfect score, while the developers of IE8 mentioned in an interview (sorry that I couldn’t find the link) that passing the Acid 3 test isn’t the team’s priority.

Anyway, thanks for sharing again and a big happy new year to you!

19

David Bellerive says:

January 6, 2009 at 6:56 am

The new META element that was introduced in IE 8 does work.

Here’s what I currently do and will keep on doing UNTIL IE 8 is out of beta and shipping:

I use the new META element in all of my pages: .

I use a main style sheet for all browsers and I use a special style sheets with hacks for IE 5 through 7 (don’t have to worry about IE 8 because of the META element) using a conditional comment like this: .

The new sites I build once IE 8 is out of beta will probably be the same except that I will remove the META element. That way, IE 5 through 7 will get the special hacks style sheet while IE 8 will only get the same style sheet as other standard compliant browsers (its supposed to be as good… we’ll see…).