Article
HTML Utopia! Design Websites Without Tables - Parts 1 and 2
Editize.com -- Two Distinct Layout Templates
One of the features of the EditizeTM product is that it works in all browsers. Therefore it was important that the site looked as good as it could in Netscape 4.
All the pages would use the one template, as most were databased and edited via a Content Management System.
For template-based Websites, all content is displayed in a container. That container is typically a <div> or a <td>. For www.editize.com, I made two containing structures (layout files) into which our content could be inserted.
Then I simply used a browser detection script to choose the right template.
Browser Detection Scripts
A fair bit of thought has gone into how the browser detection scripts should work.
It's important to detect the old browsers like Netscape 4, in order to serve them their specially limited layout, while presenting every other browser with the new CSS layout. We do it this way, rather than pick out the new browsers, because:
This is my PHP script (updated 5-20-03):
// Grab Netscape 4 on all platforms
// (This isn't fullproof but it's pretty close)
$tmp = explode(" ", $HTTP_USER_AGENT);
$brvers = explode("/", $tmp[0]);
$brvers = (float)$brvers[1];
if ($brvers > 4.01 and $brvers < 4.99)
$version = "old";
else
$version = "new";
// Here's a 'find' function to
// specifically grab some other browsers
function find($component)
{
global $HTTP_USER_AGENT;
$result = stristr($HTTP_USER_AGENT,$component);
return $result !== FALSE;
}
// Use this to get IE5 on Windows (optional)
if ((find ('MSIE 5.0')) and (find('Win')))
$version = "old";
// At this stage WebTV seems to cope much
// better with a Netscape style page so
// lets grab it
if (find ('WebTV'))
$version = "old";
You can I see I used the decimal increments to weed out Netscape 4. These increments are platform independent and in my experience not used by any other browsers.
In the above script I chose to class IE5 as an old browser because it gets a lot of CSS wrong, and fewer people use it these days. Note that I specifically look for IE5 on Windows because the Mac version is a CSS-friendly browser.
CSS Layout Techniques
The following is an overview of the techniques you can use to lay out your pages with CSS. For an excellent article on CSS Positioning that goes into more detail check out BrainJar.com: CSS Positioning.
Float
Although this is not really the intended use for the CSS property "Float", this technique is a good, simple way to lay out 2 columns.
I prefer examples 3 and 4 of the above because: