Now that we have stopped using that messy old HTML markup and moved up to using strict XHTML syntaxes for our web pages we need to get to grips with CSS. Fortunately it is remarkably easy to get started with CSS. It would be even easier if the browsers could keep pace with the W3C standards. Most browsers correctly support CSS level 1, albeit with quirks. CSS level 2 support continues to improve but CSS3 can still be an issue. Becoming proficient with CSS does take quite a bit of practice and tool support is not very helpful, but don't let that deter you, practice makes perfect.
Remember that these exercises are an important part of the course, are relvant to your coursework and and may be relevant to your assessment.
Complex tables can cause problems with screen readers and so we are being encouraged to use CSS to arrange the layout of our web pages. While this is an excellent idea, resulting in pages that still work without the CSS and hence are very likely to work well with assistive technology, a good three column CSS only layout remains a holy grail. Until the browsers and the standards improve developers may find life considerably easier if they stick to using a tables.
Table accessibility problems are certainly less pronounced with very simple (definitely not nested) tables. The following example uses a reasonably simple four column table with three rows to create an elastic page layout with three columns, a header and a footer. This example renders well in most old and new browsers as it does not require much CSS support.
While there are clear accessibility advantages it remains a challenge to create complex page arrangements that render correctly across a range of browsers, especially when using the browser zoom facility. The following example works well in Mozilla and other newer browsers, even under extreme zoom. Unfortunately it doesn't work so well in other, especially older borwsers.
Nested div elements are used to avoid the box model bug in IE. While this works there other problems are evident with this layout in IE. I have shaded the inner div elements so that this padding of the columns can be easily seen in this example (clearly you would not do this in practice).
The next example is hideously complex using a combination of CSS and JavaScript to create a page template with top, bottom, left and right borders. The left menu is created using JavaScript but the pull down menus are pure CSS which don't work in IE version 6 and lower. The page renders well in all tested browsers but uses a lot of code to avoid using tables, avoid the box model bug and create an elastic centre panel. Coping with browser re-sizing is particularly tricky. Such a complex layout is probably best avoided although you may want to use some of the ideas in a simpler page.
Just in case you thought the above should have been easy
.
.
