CSS and div layouts

While I have long been a fan of fixed width 3 column site layouts, here’s a reference site which has a library of percentage based column layouts.

Looking forward to trying them with images in some of the columns. I have employed my own three column div layout designs on several of my sites using a fixed width method – for example view source at Success Foods, the Medicine Room, Mike Jackson, Eurofilter Asia Pacific and Richard’s Corner.

Mike Jackson – Australian Family Entertainment

Sibagraphics has completed the code revamp and optimisation for the site of famous Australian children’s and family entertainer, Mike Jackson. Well known for his Dr Knickerbocker song, Mike is now launching his new Uke ‘n Play book and CD kit.

The site has been upgraded to a 3 column div layout in XHTML 1.0 which has streamlined the markup, reducing page size and loading times. Pages have been individually metatagged and matched with content.

LimePlus site

Soil enrichment specialists, LimePlus have launched their new site which promotes their supply, delivery and spreading of organic and inorganic fertilisers on the Sunshine Coast.

The site employs advanced CSS list rollovers and positioning.

Styled Scroll Bars

Although IE only styled scroll bars can look ‘pretty’, I’ve lost patience with them because they are a proprietary, non-web standard addition which needs to be dodged round to ensure W3C CSS validation. And since IE only has 87% or thereabouts of the browser market these days and coloured scroll bars only work in DTD Quirks mode … why bother.

Here’s how I include them when desired, in a way that permits validation. Firstly, use a free visual scroll bar styling program like this online tool or this one and obtain the scroll bar css. Then convert it to javascript (HTML Kit has a nifty plugin that does it with a click of a button), save it with a .js file extension and link it in the head of your markup document/s.

<script language="JavaScript" xsrc="js/css.js" mce_src="js/css.js" type="text/javascript"></script>

Font sizing

As well as through the font checking utilities on this site, the perennial problem of font sizing methods acceptable for all browsers is discussed by Owen Briggs at his site. He supplies some handy cross-browser comparison screen shots.

Owen leans towards using percentages due to their compatability. I’ve recently started setting html {font-size:100%} then body {font-size:90%} and em units throughout the rest of the style sheet. Wondering whether it may be best to go back to using percentages only as it doesn’t seem to make much difference as long as the base font is set at 100%.