OK,
Here's an almost totally em-based design, with a few graphic interlopers.
http://members.ozemail.com.au/~hughtodd/test/
http://members.ozemail.com.au/~hughtodd/test/teststyle05.css
http://members.ozemail.com.au/~hughtodd/test/test.js
After days of bashing my head against various brick walls, I can say that this mildly complex design works, and does a sterling job of replacing its table-based predecessor. Except for one major issue and two minor ones.
MAJOR ISSUE
The tabs at the right rely on potted JavaScript to make a series of absolutely positioned DIVs visible (one at a time). The problem is not with the JavaScript, but with the DIVs.
And the only browsers to exhibit problems with it are... tadahh! Internet Explorer browsers on the PC.
On every other browser I've tested the page on, these DIVs sit where they are supposed to. In IE, however, they are pushed over (almost disappearing from the page) by what appears to be the width of the left hand navigation column. (Why??)
I have tried various solutions, including floating the "maincol" div to the left, setting both the left hand column and the maincol to be absolutely positioned, floating my little invisible DIVs to the right, and moving the HTML code around. All of them leave me worse off, often with the "visible/hidden" DIVs vanishing for good. Floating my little DIVs to the right (instead of positioning them absolutely top and right) doesn't work because even though they are invisible, they still stake out their space on the page.
One solution I haven't tried, because I don't know how to do it, is to float the DIVs right and turn "display: none" off and on again. This would mean that each DIV would take up only its own space when switched on. Should work.
MINOR ISSUES
1) I have set the height of the horizontal navigation bar in ems. Ems also control the height of the ul li a and ul li a:hover. But I'm finding that the height of the background of the ul li a: hover varies between browsers. On trusty Safari it looks fine. On IE it is too short by 2 pixels or so. How can I control this better?
2) Opera breaks a couple of things. The ul li a:hover on the right of the horizontal navigation bar loses the changed background file. And the graphic link at the top right of the page vanishes.
Any insights would be appreciated!
-Hugh Todd
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
