An Example of Working with One Specific Browser | Practical Intranet Development

Working with one specific browser has both benefits and flaws. In this section we'll take a look at an example case. Due to the prevalence of Windows as an operating system and Internet Explorer as the current browser of choice, we will be focusing on this set p. As we've mentioned previously, standards are the way to go to help ensure that our sites are both usable on multiple browsers but also to set you up for the future. Let's look at what can be achieved on IE5 upwards that will also work both in IE6, Netscape 7, and Mozilla 1.1. This will give us a broad base for what we can achieve now and also what will work well in the future.

Choosing a DOCTYPE

One of the most important things to consider when coding pages is which DOCTYPE to use. A DOCTYPE should be the first line of code in a page and tells the browser exactly what type of document it is looking at, that is, is it an HTML 4.01 Transitional document, an XHTML 1.0 frameset, or maybe an XHTML 1.1 page? A DOCTYPE isn't mandatory on a web page, but should always be included if you want your code to validate. In HTML4.01 and XHTML1.0, there are three different DOCTYTPES available: Transitional, Strict , and Frameset (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.2 and http://www.w3.org/TR/xhtml1/#dtds respectively). These tell the browser what type of document it is looking at, and how it should interpret the code.

Pages with Transitional DOCTYPEs will include depreciated (X)HTML elements, pages with Strict DOCTYPES should include none, (and browsers such as Internet Explorer 6 will switch and display CSS more correctly). The Frameset DOCTYPE should be used, not unsurprisingly, for framesets. As the push towards standards increases, more and more WYSIWYG editors are adding DOCTYPES automatically. Dreamweaver MX now contains a partial HTML4.01 Transitional DOCTYPE with all new pages.

If you are currently working with a browser earlier than version 6, I would recommend using an HTML 4.01 Transitional DOCTYPE that doesn't contain the final URI:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

While not being an ideal solution standards-wise, using this has several advantages for intranets:

A page with this DOCTYPE will still validate without the URI - a document with no DOCTYPE will not validate at all even if the rest of your code is perfect. In some intranet environments, because of the many security features your company will have installed, you may not be able to use an online valuator. Dreamweaver MX now comes with a built-in Results panel that will validate to, amongst other things, HTML4.0, all three "flavors" of XHTML1.0 and WML. The excellent TopStyle (http://www.bradsoft.com) also includes validators for both XHTML and CSS.
Since this DOCTYPE triggers "quirks" mode in newer browsers it will look the same in older browsers and newer ones. If you suddenly change to Netscape 6+ you won't find that your images have large blocks of whitespace beneath them (see http://devedge.netscape.com/viewsource/2002/img-table/ for information on this). It also won't trigger "standards mode" if you suddenly switch to Internet Explorer 6 which may be a good thing if you use a lot of CSS for layout. since there are major differences in the box model (see sidebar).

Versions of Internet Explorer earlier than version 6 didn't implement the CSS box model well. The box model allows everything on a page to be thought of as being in a box to which padding, a border, and a margin can be applied http://www.w3.org/TR/REC-CSS2/box.html. The incorrect model in IE5 or less causes no end of problems which has led to several hacks having to be used, the most famous of which is Tantek's Box Model Hack, a description of which can be found here: http://www.tantek.com/CSS/Examples/boxmodelhack.html. Internet Explorer 6's DOCTYPE switching means that by altering the DOCTYPE of a page you can change the way that the browser interprets standards.

Cascading Style Sheets

Cascading Style Sheets allow you to customize the presentation of pages and, with a little knowledge and care, keep them looking the same in all browsers. Stylesheets are also the major tool for controlling the presentation of XHTML and XML documents. For example, you might be using the bordercolor attribute of the table element to apply a color to the border of your table. That's all well and good, but it's an IE-only attribute, and as such won't validate or work in non-IE browsers. You can however happily use CSS to apply this to all tables. For example:

In your external stylesheet file (mystylesheet.css) you would have:

 .datatable, td, th {border: 1px solid #eee;} .datatable th {background-color:#fc0; color:#009;}

and then in your actual HTML page you would apply a class to the table, allowing it to be formatted accordingly.

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Music</title> <link rel="stylesheet" href="mystylesheet.css" type="text/css"> </head> <body> <table width="580" cellpadding="0" cellspacing="0"  summary="table of rock bands"> <caption>Music from across the globe</caption> <tr> <th>Name</th><th>Genre</th><th>Comments</th> </tr> <tr> <td>The Wildhearts</td><td>Rock</td><td>Excellent UK based rock group</td> </tr> <tr> <td>Godspeed You! Black Emperor</td><td>Post Rock</td><td>Canadian 9 piece, mainly instrumental</td> </tr> </table> </body> </html>

Now you can get consistent colors on any table that has the class of datatable. Every time you use a <th> element for table heading information you will get the same formatting and color scheme. This is incredibly useful, and by using a linked external stylesheet on all pages you can have consistent presentation across the entire intranet.

Internet Explorer 5 tends to get a bad rap when it comes to implementation of the CSS standards. To be fair, it is an older browser, but one that is probably still used a great deal in companies who had computers with IE5 pre-installed. It is capable of handling a good part of the recommendations but does fall down on some things that are quite frustrating such as not understanding how to center using margin-left: auto; margin-right: auto; (to fix this, use text-align:center; in the body element and then text-align-left; on everything else). For a full list of exactly which browser supports what, the following link has an up-to-date list of the main browsers: http://www.westciv.com.au/style_master/academy/browser_support/index.html

You can still produce some quite complex table-less page layouts in IE5. If you're looking for a good starting point for this, the Layout Reservoir at http://www.bluerobot.com/web/layouts is a good place to start. It contains examples of many common page layouts, which you can take and customize for your own use.

JavaScript DOM Support

Internet Explorer 5 was the version of Microsoft's browser to start supporting the W3C DOM. However, it was below average to say the least and still contains much proprietary functionality, meaning that at the time it was still essential to write endless browser sniffing checks to see exactly which browser the user had. As intranet developers we do have the luxury of knowing what the browsers are capable of and the standards that they support. So a suitable choice here might be to use the minimum of DOM-based JavaScript that will work, and avoid other code since it may break when upgrades occur.

XML Support

Internet Explorer 5 has only a partial implementation of the XML standard. When that browser was released Microsoft based its implementation on the XML Working Draft specification, which differed from the final release. You can implement XML using IE5 but you have to include numerous workarounds, making it a far from ideal solution. IE5.5 + browsers support the full XML 1.0 specification. Total support for the XML 1.0 standard is still not complete in any modern browser, which is fairly shocking as it has been complete since 1998.