Introduction
Welcome to Purple Haze: a simple, standards-compliant webpage design. The HTML of this design is very simple and easy to follow since it isn't cluttered with obsolete formatting tags. Most measurements are font size-relative, thus allowing the viewer to zoom the text size without compromising the layout.
top Standards Compliant
The markup of Purple Haze is 100% compliant with XHTML 1.0 Strict. Additionally, it uses CSS extensively, thus separating formatting information from HTML content. Changing color schemes is simple: all you need to do is change four color values in the stylesheet. So if you hate the color purple... no problem!
Due to its compliance, both Internet Explorer and Mozilla-based browsers render Purple Haze in standards-compliance mode. This ensures that users of both paradigms see (almost!) exactly the same web page in terms of formatting and layout.
The markup is also compliant with the fairly new XHTML 1.1 standard. Just add an XML declaration to the beginning of the HTML document and change the doctype.
No Tables
Tables are for displaying tabular data... not for use as design elements!
Tables are for displaying tabular data... not for use as design elements! Purple Haze uses no tables for layout purposes. This is true for the menu on the left, the text boxes, the header, and the footer.
Instead, Purple Haze makes use of the <div> and <span> tags as well as CSS. Use the position: absolute; attribute-value pair in your stylesheets to align text into columns.
Browser Specificity
Unfortuately, Internet Explorer (version 6.0 inclusive) is not completely standards compliant. This means that some styles may be rendered differently between Internet Explorer and Mozilla-based browsers.
As a workaround, browser-specific styles are employed in Purple Haze. Most websites achieve this by using JavaScript to match separate stylesheets to specific browsers. Purple Haze, in contrast, doesn't use any JavaScript nor does it use separate stylesheets.
Instead, two versions of the troublesome styles are written: one using CSS1 and the other using CSS2. Both browser types understand the CSS1 version, but only the Mozilla-based browsers understand the CSS2 version. The outcome: browser-specific styles!
Conclusion
I hope you enjoy Purple Haze as much as I've enjoyed coding it. This design, like so many others, once again demonstrates the power of CSS and standards-compliant XHTML. You don't need to sacrifice style to be compliant!
(1)
