links

< home >
< unix stuff >
< code >
< writing >
< archive >
< music >
< photos >
< recipes >
< site map >
< about badcomputer >

Internet Explorer vs CSS

Rational

Note: These screenies are from long before I gave the site a facelift on March 29, 2006, so the main page looks considerably different now.

I have not used windows in a long time. A real long time. So imagine my horror when one day I was at my brother's place and looked at my website from his Windows box. Ouch. This led me to wonder if all browsers ruined my page like this, after all, I was using Konqueror pretty much exclusively whilst developing the site. I found out however, that this wasn't the case at all.

Now I'm not here to convice you that you should only ever use standards compliant code on your site or whatever. If you don't understand why this is important you are probably not a web developer, and don't care. The point is though, that you shouldn't need to care, and you don't have to if you just use a standards compliant browser. If you want to read more about this I suggest you check out The Web Standards Project, The World Wide Web Consortium (W3C), and the Viewable With Any Browser Campaign.

All the thumbnails below link to a fullsize screen dump. Most are 1200x1024 except for the OSX screenies which are 1024x768. The Internet Explorer on Windows shot was taken by a dual-booting friend over at Linux Questions. Thanks!

The major browsers

Internet Explorer on Windows

Here you can see the page is totally broken. First of all, there is no support for the transparent PNG image, as instead of the background colour showing through (blue) you just see white around the image. IE does not display my faded image at all, and it is displaying the header background image relative to the child elements rather than relative to the viewport (0,0) as the CSS spec states. And for some inexplicable reason IE is showing the page background colour instead of the div#content colour for the bulk of the page text. That really blows my mind, as this seems to me to be totally basic interpretation of the CSS spec. Microsoft gets zero marks here because their browser can't even interpret the most basic aspects of the CSS spec, and they turn my page into an unreadable pile of crap. For shame...

---

Internet Explorer on OSX

Interestingly, Internet Explorer for OSX does a considerably better job than it does on Windows. The transparant PNG image is displayed properly, the header image is displayed relative to the viewport as it should, and the div#content background colour is white as it should be. The only problem here, is that the faded image is not diplayed in the correct position, but since it is at least displayed, it is still better than the Windows IE version. So I have to give the IE on OSX team kudos here for doing a far better job than their IE on Windows counterparts. It seems sadly ironic to me that Microsoft has ended support for IE on OSX. Way to reward the people that at least try to do a good job of implementing the spec Microsoft! For shame...

---

Firefox on Linux

What can I say, Firefox nails it no problem. Everything is displayed as per the CSS spec perfectly. This is not really a surprise here, as Firefox is an open source product it stands to reason that it's developers will have a mind to follow the standards. This screenshot here is from Firefox on Linux, but it displays the page exactly the same in the Windows and OSX version. Extra points to the Firefox team for their cross-platform compliance to the standards.

So: Windows users, if you are still using IE please just go get Firefox already! Kudos to the Mozilla Firefox team!

---

Konqueror on Linux

Konqueror also displays the page perfectly. I will state here that Konq is generally my browser of choice, and the one I use for most of my day-to-day browsing. It is also the browser I test my site with whilst designing, so I generally write my CSS based on how it is displayed in Konq. As Konq does a perfect job of implementing the spec this is hardly a problem, as I know the same code will be displayed just fine in Firefox as well.

The only problem is that Konq isn't ported to Windows (yet!), so it is only available on Linux, FreeBSD, Solaris, NetBSD, and pretty much every other UNIX in existence. Kudos to the Konq/Khtml team! Why dont you go check out Konqueror.

---

Opera on Linux

Opera is a browser that falls under the radar of most people. This is too bad as it renders my page perfectly, and it is available on all major platforms (UNIX, Windows, OSX). A lot of people were put off because they either balked at paying for a browser, or they had to deal with the ads in the free version. Opera has recently released a free version that dumps the ads, so there is little reason not to try this great browser.

The only oddity with Opera is that (on the OSX version anyway, and probably the Windows version) it identifies itself as Internet Explorer by default. Come on Opera, have some pride in your product! Presumably they do this to get around all the braindead websites that have browser-sniffing code that gives you a deadend if you use anything but IE. This is no way to solve that problem however. And to all you braindead webmasters that resort to this: Don't do it dumbasses! I cannot say how many sites I have been to that resort to this stupid practice, when simply changing the browser ident in Konq or Firefox displays the page just fine. Again: Don't be a stupid webmaster. Don't do this. All it does is piss off all the people that use alternative browsers, a number which is growing dramatically day by day.

Kudos to the Opera team for standards compliance, but a big old boo-hiss for their self identity problem.

---

Safari on OSX

Safari is the default browser for OSX developed by Apple. As Safari's rendering engine is based on Khtml provided by the Konq/KDE team it is little surprise that Safari displays my page perfectly as well. Kudos to the Safari team for borrowing code from an open-source project that allows your browser to render websites properly. Yes, that was tongue in cheek. There is some contention out there that Apple is not fully allowing the improvements they make to the rendering engine find their way back to Khtml in the true spirit of open source. I don't really have much to say about this, as I am not aware of all the facts here. As I say, it is a contention.

I should say here that rendering abilities aside, I really can't stand Safari. I don't know why, I just think the interface sucks. So when I am working on My OSX box I generally just use Opera.

---

light/text only browsers

Dillo on Linux

Dillo is a lightweight browser designed to run with little resources and render pages fast. To attain these ends it dispenses with a pages background images (notice it does display inline images) and fancy CSS formatting. However, the Dillo developers state on their website that full CSS conformance is a goal that is in progress. Notice that in the absence of a full blown CSS rendering engine Dillo still degrades my page fairly well, and presents the page in a simple no-nonsense fashion that fits with their goal of creating the fastest page rendering possible. Notice though that Dillo ignores my rule to not underline links. I cannot give Dillo full marks here for its performance, but please keep in mind that Dillo is maintained by a very small group of volunteers who work with a budget that is microscopic compared to Microsoft's. If you want to try a fast lightweight browser then go get Dillo.

---

Links -g on Linux

Links is a browser that operates in two modes. With the '-g' switch links operates in 'graphics' mode similar to Dillo. Unlike Dillo, Links has no stated goal to ever implement full CSS, and as Links was created as a class project at the Charles University in Prague, and the four developers are now graduated there is little reason to think it ever will. Notice that the browser degrades my page well, much as Dillo does. In fact, the only difference seems to be the background colour, and the fact that Links does respect my no links underline rule. Odd. So again, no marks for CSS compliance, but keep in mind that four students created a browser that displays my page much more elegantly than the billion dollar Microsoft Corporation!

If you want to check out this browser you can get Links here.

---

Elinks on Linux

Elinks is a spinoff (or codefork) of Links which was created because Elinks development was not moving along fast enough. You can read more on the history page. Elinks does not implement CSS standards very much at all, but it is a stated goal of the developer(s). This does bring up the fact that it seems to be better in the interest of presenting information to a user to simply ignore advanced CSS rules that are not understood rather than to render them just plain wrong. Even without the CSS you can see that my page degrades very well, and the page text is presented sanely.

Also notice that Elinks will display a transparent background if you are running it in an Xterm, an attractive feature for all those alpha-geeks out there. You can download Elinks here.

---

Links2 on Linux

This is Links in text mode. My page is rendered pretty much exactly like Elinks except for the background, which is to be expected from a code fork. One thing I want to mention here is that all the text-mode and lightweight browsers have various degrees of ECMAScript (JavaScript) compliance. All the text browsers I have tested here seem to have difficulties dealing with an external JavaScript script. That is why you see the "linuxquestions.org" hanging around for no apparent reason. This is different now that I use an XML source for my feed, which gets rendered to XHTML by my the PHP backend.

As I already mentioned, you can get Links here.

---

Lynx on Linux

Lynx is one of the oldest browsers out there, text or otherwise. It is probably the oldest browser still in development. It was first written at the University of Kansas in 1989, and was created not as a browser per se, but as a method of connecting documents at the university independent of the internet. There is an interesting history of the browser available. For best results, read it in Lynx ;)

I often check my own pages in Lynx, as this is the closest to how a web spider (ie: googlebot) will see it. And much like all the other text browsers, Lynx does a great job here. You can download Lynx here.

Results

So what have we learned from all this?

Browsers that display my page in an unreadable pile of crap: Microsoft Internet Explorer on Windows
Browsers that display my page in an elegant and readable fashion: Every single other browser I have ever tried.

You are free to draw your own conclusions.

stats

It is Friday May 09, 2008 8:03 am
This page served 3296 times
This page last modified: April 14, 2008 11:28 am
Your IP address is: 38.103.63.18
You are browsing using: CCBot/1.0 (+http://www.commoncrawl.org/bot.html)
You are browsing from: United States.
badcomputer.org's uptime: 08:03:29 up 15 days, 08:45, 1 user, load average: 0.02, 0.05, 0.01