Support for Older Browsers

Probably the biggest problem with using tables to define your page layout is that there are lots of older browsers out there that don't support them. There are several alternative approaches that we can take to this particular problem.

The first option and one that almost certainly isn't what you want to do is to just ignore those browsers and take the view that anyone using an antique web browser that doesn't support table layouts gets to see whatever the site ends up looking like.

A better option than that is to at least view your page in a browser that doesn't support tables and make whatever changes are necessary in order to ensure that the page content is at least readable and appears in an acceptable arrangement even though it isn't even remotely close to the way the page looks in browsers that do support tables. As long as the web page looks acceptable those using antiquated browsers are not even going to know that the way the page looks for them isn't how the page looks for those using more modern browsers.

The biggest difficulty with this approach is in how to determine which browsers do and don't support tables so deliver the modified versions of the code to those browsers that need it. Unfortunately, with most of the antiquated browsers there is no way to identify that it is an antiquated browser and so no way to apply a fix for those browsers. Fortunately, the antiquated browsers that don't support tables and which still do have a significant enough number of users to want to do something about the layout for them are those where a means of identifying the browser does exist.

Microsoft developed an idea called conditional comments which allow them to generate a single file in their own proprietary version of HTML that can be read by the various versions of Internet Explorer (IE) and Microsoft Office (MSO) where the conditionals identify which parts of the proprietary HTML are intended to be used by the particular program and program version. They are known as conditional comments because while the condition tags work regardless of whether they are inside or outside an HTML comment, by placing them inside an HTML comment we can hide the conditional from other browsers and thus use them to distinguish particular versions of Internet Explorer from other browsers.

At the time of writing the only two antiquated browsers that don't support tables and which have any significant market share are Internet Explorer 6 and Internet Explorer 7. We can therefore apply any patches that we need in order to make our page look more reasonable in those two browsers by adding the extra styles needed to make the content look more reasonable inside Microsoft conditional comments that specifically target IE7 and earlier.

This means that our code to attach the styles into our web page will look like this:

<link type="text/css" rel="stylesheet" href="master.css">
<!--[IE lte 7]>
<link type="text/css" rel="stylesheet" href="ie.css">

All browsers except for Internet explorer will see the last three lines of that code as an HTML comment and will therefore ignore it. Internet Explorer (versions 5 and later) will see the conditional code inside the comment and will perform the test. If the version is 7 or earlier then the additional link statement will be included in the page and the styles in that stylesheet will be applied to fix the layout for those browsers.

You could go so far as to attempt to use one of the other two page layout methods (floats or positioning) to attempt to replicate your page layout so that it looks the same in those old versions of IE as it does in modern browsers. This is another approach that I do not recomment. The code that you would need in order to replicate the page layout using one of those other methods will be somewhat more complex than the simpler table approach (if it isn't then why are you using tables?). The code that you end up with would also work in those browsers that also support the table code and also in some other browsers which aren't going to see that code and which will not work with the tables either. So if you are going to go to all of the trouble to replicate your table layout without using tables I suggest that you forget the table layout completely for the moment and use the more complex alternative that works for more browsers as the only code for the page layout.

The whole point in using table layouts is to make coding grid layouts with equal height and equal width elements without having to fake that appearance using more complicated code. The number of people still using IE6 and 7 is falling all the time as more and more people upgrade to IE8 or switch to using some other modern browser.It makes no sense therefore to spend huge amounts of time developing complex page layouts for those old browsers. Also there is no reason why a web page necessarily needs to look the same in all browsers (if it did then no changes to HTML or CSS would ever have been adopted). Providing a simpler layout to those people using older browsers may even give them a reason to upgrade to a better browser if they ever find out what they are missing.

Just exactly when you start using tables for layout will depend almost entirely on your attitude toward those of your visitors using older browsers that don't support tables. If presenting them with the same page layout as everyone else is important to you then it is too soon for you to adopt tables for layout yet. Eventually those using the older browsers will fall to the point where you decide that giving them a simplified layout is acceptable and then you can start using tables where you need them.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow