The stupidity of webbrowsers in simple things...

By Bill Seremetis, 31 October, 2012

I wrote a very simple static page to hold a radio player for one of my clients today. When I say simple I mean it: their logo, a flashplayer and a close link. This page would accomodate the popup radio player so nothing extra was needed. While making it I was amazed by how Firefox and Chromium behaved differently than Opera, and by how my simple page was not the same among three major browsers! So I decided to write about it, just to get it out of me. I over-simplified my page, making it just like the following.

Here is the css code: .close { float: right; } div { border: 1px solid #FFF; } And the html:

some stuff
more stuff
Close Window

 

As you can see it can't get any simpler than that and the border inludes the "close window" link. But of course both Firefox and Chromium refuse to display it as it should be displayed, and do it their own way.

Opera:

Firefox:

Chromium:

It is obvious that the .close class and the float:right make the three browsers behave differently but there is only one correct way of rendering this page and only Opera managed to do it. Sorry for not trying it on IE and Safari, I happen to be a GNU/Linux user for the past few years. If anybody wants to try it and inform me about the results I'll be happy to hear them.