So as indicated previous post, I’ve begun updating, overhauling, and scrubbing the Awards database and index, step by step, beginning with a reformatting of the Nominee Index pages, which I’ve felt were a compromise layout to begin with…
The history of web page layout, in a tiny thumbnail, began with bulleted lists and indents (such as Locus Index to Science Fiction pages still use), advanced to grid layouts using ‘tables’ (with borders usually hidden), such as many websites including Locus Online still use, then moved beyond to spans and floats, such as typical blog templates and actual blogs (e.g. Making Light) use.
With spans and floats you needn’t worry about figuring out a grid layout, you surround blocks of content by div or span tags, with classes pointing to definitions in your style sheet, which include settings to ‘float’ left or right, and let the relative positions of those blocks determine how they land (e.g. left column, center column, etc.) when the page is displayed in a browser.
I didn’t know about floats when I designed the original Nominee Index pages, but after trial design I didn’t want to rely on tables either. Ideally, I thought, the date and title along the left, and the award citations on the right, should be level across the page. To use a single table for an entire page would force all the titles to wrap, on the left, and all the citations to wrap, on the right, to the same dimensions. To use a separate table for each nominee, or title, would put so many tables in one page of html that the browsers I was using, back in 1999 or so, choked. So I avoided tables and used very basic block tags, aligned left and right for titles and citations. Even though that meant the citations began one line down from the end of the title…
So now I’m determined to find current html/style sheet/float settings to overcome that. Floats assigned to divs are really cool but have some restrictions, including the necessity of specifying exact width — so the notion of free floating wraps for every title/citation entry, with the same set of tags, evaporated.
A bigger headache is that not all browsers interpret html, especially the more abstruse stuff like floats, the same way. A couple of times I had a layout refined perfectly in IE, only to discover the page was mincemeat in Firefox. IE, it seems, not only has bugs, but it is less strict in some ways than the other browsers, more forgiving of what might be considered minor html coding sins. So now I have five browsers installed on my home machine — IE, Firefox, Chrome, Safari, and Opera — and have a layout for the Nominee Index that looks good in all of them. Take a look, and let me know if anything looks wonky in *your* browser…
