An All Web Browsers Box Width Solution

As the Mozilla Firefox Web browser is more widely used, people are becoming aware that the Internet Explorer web browser does not behave the same way. This is the problem of cross-browser compatibility. To an extent, Internet Explorer is being unfairly labelled since the problem is more complex as will be explained in this post. For those who would like to explore more on this, you will find a thread at the Cre8asite Forums entitled, “CSS – The Single Best Rule No one Told Me“, which goes into more details on the issues involved.

This is slightly more technical than the usual BPWrap post, but no one else seems to have highlighted the approach to be described. This approach will help many people who are designing websites to simply get over a major problem. The description may also help you understand better what web design standards are all about and why they are important.

Many people now know that for websites that are designed according to standards, web browsers such as Mozilla Firefox, Netscape and Opera will all display them in exactly the same way. Internet Explorer will display them differently often causing designs to “break”. One particularly thorny problem is creating a box in which to put text and images. For example a two-column design involves two boxes side-by-side. If padding is put inside the box, then IE will display the boxes differently than will the other browsers.

So the usual advice at present is to design a website so that it displays well in say Firefox. This then means that it will display well in the other browsers as well. It will look broken in Internet Explorer but there are hacks that have been devised to bring the IE display back to what all the others are showing. This whole post stems from a redesign of a website that followed this approach but where the process turned out not to work. A display that looked fine in Firefox and Internet Explorer did not display correctly in Opera.

There are two important rules in ensuring most browsers will display what you intended.
1. Start the web page code with a correct DTD (Document Type Declaration). An excellent AListApart article explains exactly what is appropriate.
2. Ensure that all coding is done following web standards and validate the code using a code validator.

If Rule 1 is broken, then web browsers switch to what is called quirks mode. In quirks mode, the browser tries to make the best interpretation of the code it finds. Unfortunately different browsers have developed different quirks modes, since of course they are not following any standards at this point. So every browser may be different. If Rule 2 is broken, then whether the browser is in standards mode or quirks mode, an unexpected display may occur.

Having errors in coding so that websites do not validate is far more prevalent than you might think. Indeed it puts in to question whether the standards really are working yet. Benoit Bisson in Montreal has done extensive research and has summaries from time to time in his Blog Cafe. The latest account of French media shows only 1 in 31 is using valid code.

I decided to do my own test of some of the most common web pages I visit. The results are shown below. In summary out of 20 very well known web pages only 2 were following standards. The other 18 do not validate and in some browsers might ‘break’ in some way.
Test of most used web pages

Home pages unless otherwise specified

No DOCTYPE Found! Falling Back to HTML 4.01 Transitional (6)
Google Personalized Search Page
Google Classic Search Page Top Stories
Ask Jeeves Search Page
Montreal Gazette News Top Stories

No Character Encoding Found! Falling back to UTF-8. (5)
National Geographic Photo Of The Day
Yahoo! Search Page
Canada Post

This page is not Valid HTML 4.0 Transitional!
BBC World News

This page is not Valid HTML 4.01 Transitional! (5)
Cre8asite Forums
Globe & Mail

This page is not Valid XHTML 1.0 Transitional!
Bloglines Results

This Page Is Valid XHTML 1.0 Transitional!
Weather Canada

This Page Is Valid XHTML 1.0 Strict!
MSN Search Page
Returning to the box problem, the story has a happy ending since there is a very robust solution, even if you have small coding errors in your web pages. The best advice is of course to code the web pages according to the standards. Without the solution below, even with code that validates you are then faced with some hacks to make the pages display correctly in Internet Explorer. This is because Internet Explorer uses a different definition of width from the other browsers.

The alternative solution involves using two divs, with one inside the other. For example the outer div might be called SideBarBox with another div, SideBar, within it. The SideBarBox is only used to specify the width of this column that is the Side Bar of the web page. That’s all that SideBarBox is used for. The inner div, SideBar, then holds all the styling and positioning information such as borders and padding. By using this box within a box approach, the web page design will look correct in all browsers even if the pages do not validate. It’s a bit like using a corset to maintain your bodily appearance. It may not be elegant, but it works.

Tags: , , .