Version 7 "and into the light"

The site has chan­ged and I would like to dub these edits and impro­ve­ments an upgrade. The old black and orange layout, shown below, was my first attempt at crea­ting a site com­ple­tely from CSS, more than a year ago now. This tur­ned out a fai­lure, after hours of mes­sing and con­ti­nual frus­tra­tion with the disc­re­pan­cies bet­ween Inter­net explo­rer and Fire­fox and the bas­tar­di­za­tion of CSS ren­de­ring, in des­pe­ra­tion I resor­ted to methods I knew best — tables and those drea­ded font tags. This resul­ted in for­mat­ting that was half con­tro­lled by a hac­ked IE-fixing style sheet and half by ran­dom style and for­mat­ting strings pla­ced spo­ra­di­cally throughout the design. To say the code was messy was an unders­ta­te­ment. Another pro­blem became the acces­si­bi­lity of con­tent — all the links to older posts, archi­ves, spe­cial pages, my web­si­tes and other ran­dom artic­les became obs­cu­red, hard to find and ulti­ma­tely hid­den from the rea­der. Thirdly the site, although loo­king rela­ti­vely sty­lish on a flat screen was almost ille­gi­ble on a clas­sic CRT. For these rea­sons, and pro­bably a few others I deci­ded to address my dis­taste with this blog and fix everything that was once wrong.

My aims were thus to create a clean crisp appea­rance that looks good on all screens, where links are in visi­ble and logi­cal posi­tions and the sepa­ra­tion of posts, con­tent, ads and infor­ma­tion is obvious. This was to be brought about using a pure CSS design, no tables — a site that’s con­tent can be com­ple­tely sepa­ra­ted from its appea­rance. I am pretty plea­sed with the results, my aims have been ful­fi­lled and the style sheet did not have to revert to a sin­gle IE fix. The big­gest pro­blems I had to over­come were firstly the cen­tral posi­tio­ning of the main table and the right column.

My first attempt at crea­ting the centre-piece was to use an auto-margin on either side of the <div> using margin-left and margin-right, yet Inter­net explo­rer doesn’t like this in the sligh­test. I remem­ber having a num­ber of sim­ple mar­gin issues with IE during pre­vious esca­pa­des. I switched to the ‘all-in-one’ defi­ni­tion and defi­ned only the left mar­gin as auto: “margin:0px auto;” and then set the table width to a fixed amount before appl­ying the ‘work-around’ which is to pro­vide the body ele­ment with a “text-align:center”, this posi­tions the <div> in the cen­tre of the page from the start. A second text-align is then requi­red within the <div> so that all the text within it is not also centered.

Fixing the column issue has a less ele­gant solu­tion. In fact the first method was the best, it uti­li­sed the float para­me­ter and allo­wed text to flow around the column once it had ended, the height of the main <div> would adapt to inc­lude all the con­tent. Howe­ver appl­ying my design to blog­ger pre­ven­ted this, on each post Blog­ger adds an irre­mo­va­ble <div> with the style “clear:both” which ren­ders all floa­ting around said ele­ment impos­si­ble. I ima­gine this is a secu­rity mea­sure to pre­vent users hiding mali­cious things, etc. Going back to the drawing-board yiel­ded an abso­lu­tely posi­tio­ned column with mar­gin to get the correct align­ment and a res­tric­tion on the post <div> to pre­vent over­lap. A new pro­blem pre­sen­ted, by pla­cing the con­tent abso­lu­tely the main con­tai­ner would not stretch to encom­pass the full con­tent, a crude fix for this was to inc­lude a minimum-height tag within it. If anyone has some bet­ter sug­ges­tions on sol­ving this dilemma I am all ears.