This example forms part of the Position is Everything article, In Search of the One True Layout.

About the makeover

A copy of the page this is a makeover of can be viewed here

This is just a demo of what's possible. It is not a fully stress-tested solution being proffered up. Consequently to keep that clear (and hopefully keep the BBC's lawyers off my back), only the main content has been reproduced and styled up. Plus, who'm I kidding, it's not like I'm getting paid to do this...

All layout tables have been removed and the content reordered as a first pass at making it more appropriate for user agents without styling. However, one compromise has been made to maintain the original design. Personally, the explore search box would be grouped together with the browse categories and follow the highlighted feature, what's on today and the localised info, but that would make it impossible to make the explore and highlighted feature boxes line up vertically (unless we set a guesstimated em-based height for them - perfectly feasible but it wouldn't be a useful demonstration of the techinques involved).

The layout is now completely em-based and so is scalable.

IE Win 6 and 5.5 (and 7 beta 2)

li elements are spaced too far apart

Resizing is ropey - bumping up the size causes the top "row" to shunt rightwards. Probably because in my haste I've actually got the numbers wrong, but have massaged it so it appears to work and now can't be bothered to figure out just what's up.

IE Win 5.01

A, er, fair amount of space before the main content kicks in. Plus the today bar isn't long enough. Don't know, don't care. Other than that it's as good as the other IE Wins.

IE Mac 5

Doesn't get the equal height columns and degrades accordingly.

Firefox/Netscape

Firefox 1.5 and 1.0 work. So does Netscape 8 and 7.2. And so does Firefox 1.5 beta (it doesn't have any columns after the negatively shifted one so no problems arise).

NB. Weird scrolling effects occur in Firefox 1.0 when trying to select text. This bug has been fixed in 1.5 and since I'm not getting paid for this... Details in this [css-d] thread.

Opera

Operas need a fair bit of hand holding, with Opera 9 beta being the easiest to knock into line. Opera 7 has the incorrect absolute positioning bug and so the "see full directory" and the date vanish. Plus a bizarre enormous amount of horizontal scrolling appears - no doubt related to the absolute positioning wackness...

As for Opera 8, it's so bust because of the overflow: hidden bug that I've not even bothered to cater for it. The text displays - the columns are elongated far beyond what is needed though.

iCab 3.0 beta

Close, but no cigar. Well, no that close at all. The "Where I live" content disappears (except for the map and the "change location" button) as does the childrens telly section. The plugins block shunts upwards to appear just below the "Today" bar. And the main images start doing some kind of hierarchical indentation dance. Things look much better when the equal heights business gets removed. Hack, anyone?