Following standards or popularity

By | July 3, 2006

Are you one of those prestige web developers that wants to create websites for as large a public as possible? Yes, good for you! But what to do when browsers can’t agree on what is standard and what is not?

Most professional web developers will agree when I say that you should try and stick with the standard as much as possible. (Note that with standards I mean W3 Consortium) But what if most of your visitors use Internet Explorer or Firefox and something works only in one of them but not in both at the same time.

I’ll make a more practical point of it, one I actually encountered several times when using CSS to build the lay-out. Lets say you have two layers that are laying next to one-and-other. Using tables would be a very easy option, and will work. But it won’t comply to the standards as these dictate you should use DIV elements combined with CSS to style and position objects. No problem just write a bit of CSS code to do that for you. Well wrong!

Let me sketch a better picture of the exact situation. You have a navigation bar at the left, a banner at the top (which is right of the navigation) and a content area that is below the top banner and right of the navigation bar. All of these parts of the websites are DIV elements which should make their alignment easy according to the CSS 1.1 standards. I used the following code:

 #divNavigation{
   background-image: url(img/nav_background.png);
  background-repeat: no-repeat;
  background-color: #93AC2D;
  height: 80%;
  width: 100px;
  float: left;
  }

#divTopBanner{
  background-image: url(img/top_background.png);
  background-color: #42D2A2E;
  background-repeat: no-repeat;
  background-position: right top;
  text-align: right;
  padding-right: 3px;
  padding-top: 3px;
  right: 0px;
}

So far everything is alright and all the browsers handle the CSS and webpage similar. Well given the fact that Internet Explorer tends to start counting borders from a different location then Firefox, but that’s not to big of an issue. When you add the next part of CSS for the main body content the trouble starts.

#divMainBody{
  background-image: url(img/body_top_left_corner.png);
  background-repeat: no-repeat;
  background-color: #FFFFFF;
  width: auto;
  right: 0px;
  height: 85%;
}

No I’d expect this to show beautifully next to the navigation menu and below the top banner. Here comes the big surprise: “It doesn’tâ€?.

If you open this page in Internet Explorer you get to see everything as you would expect it, but for some reason it adds space between the content DIV and the navigation DIV (removes it if you leave the height out of the CSS). But even worse is the fact that Firefox chokes on this CSS style. Instead of displaying the DIV right of the navigation it displays it below it. Granted the text does appear right of the navigation DIV, but any background image disappears behind the navigation DIV. Even worse is the fact that the content div seems to wrap to the left below the navigation.

Now either I’m really stupid (could it be??) or Firefox does not seem to abide by the defined standards. I don’t blame them, but this does make developers have to choose for one platform over another. So like in the past it comes down to looking at your visitor base and which browser they use.

Given all this, trust me my example is just the tip of the iceberg (the different colour pallets is even worse), it makes you wonder. Is it really best to develop according to the standards if browsers tend to ignore them for their own versions?

 I’ve come to the conclusions that for the moment it is better to either develop with a table style lay-out or focus on one browser for compatibility. Don’t get me wrong you should try and optimize the website for as many browsers as possible, but be realistic you probably won’t. If you disagree don’t be shy and let me hear so.

Leave a Reply