www.scius.com.au version 2.0

I've finished updating the company's website. The original design (below) was a bit incipid and dull, something that I managed to throw together in my spare time. We decided to spend a little more time and effort on the design and implementation for version 2.0 (on the bottom of the post).

The website runs on our home grown product - a web content management system written in Domino. This is primarily so that the non technical members of the team can update content easily without effecting the design and layout.

I wanted to target four of the most popular browsers, IE version 6 and 7, Firefox 2.0 and Safari 3. I've managed to achieve this, XHTML and CSS W3C validation by following some simple rules.

CSS

1. for height use both the HEIGHT and MIN-HEIGHT
2. for width use both WIDTH and MIN-WIDTH
3. for BORDERS, MARGIN always use the LEFT, RIGHT, TOP and BOTTOM qualifiers rather than the MARGIN:5px 10px 5px 10px even though its CSS 1 valid
4. use MARGIN-LEFT:AUTO rather than TEXT-ALIGN:LEFT/RIGHT/CENTER

XHTML Transitional

1. only have one occurance of id="identifier" for elements (if you need more than one then it's a class="" approach)
2. close all tags with either a forward slash of closing tag i.e. <img src="" alt="" /> or </img>
3 ensure that each IMG tag has an ALT attribute
4 keep all tags lowercase (even through I've used uppercase for clarity in this post...ok)
5 avoid nesting elements unless its in a div. i.e. don't nest a <h1> in a <p>

There you go, one css file and a simple design which displays the same for all of my target browsers and validates against XHTML and CSS.