The first technical decision when designing the site was what screen size to support. My initial decision was to create resizeable pages so that they would fit on any browser. However it soon became clear that this would cause legibility and usability problems with browsers on high resolution monitors. Elements of the design would be spaced out too far and it would require a lot of mouse movement to navigate around.
Although most monitors support 800 x 600 resolution, I designed the site for 640 x 480 resolutions as I felt it would be negative to exclude the lower resolutions and people don't always open their browser to full screen (like myself) translating to a smaller screen size. The navigation, main image and introduction to the page fall above the fold. Users can decide whether to scroll to read the rest of the page.
Cascading Style Sheets
I initially designed the site so that it would be supported by version 4 browsers upwards.
The main problem encountered when attempting to do this is that the implementation of cascading style sheets(CSS) properties was at best inconsistent, at worst not supported at all, even in the latest versions. The least flawed implementation of CSS was on the Mozilla/Netscape 7 browsers which gave predictable results but even then some attributes are not supported. This was followed by IE 5.x. All of the browsers treated the inheritance of styles very differently hence the need for a lot of duplicate lines to ensure that certain formatting is used.
Some properties that did were badly implemented are :
vertical-align; background-repeat; background:position; border-width; padding;
Netscape 4 had particular problems with the CSS conflicting with attributes defined in HTML. The content is supposed to be centered but certain pages are rendered with the menu and/or content aligned left.
XHTML is an XML compliant version of HTML 4 and so it imposes very strict rules about use of tags and their related attributes. In relation to this a lot of attributes have to be placed into style sheets which are not always reliable (see above). For example 'width' cannot be used in the td tags and align attributes are deprecated.
The use of XHTML is also very much browser dependent. I have had problems with the XML tag in IE 5 on some platforms (Mac0S 9.2/Windows NT) thus incorrectly rendering the page. I have since removed the tag on all the pages. This does not invalidate the XHTML.
Opera 5 on the PC seems to have a issue with the cellpadding of tables forcing the cells out. Maybe this is the actual way the table should be rendered and that other browsers are wrong. It is difficult to tell. All other browsers seem to render the tables correctly.
A general browser problem is the rendering of forms. Specifying the number of columns in a textarea will result in wide boxes on one browser and narrow ones for another. It really depends on the font chosen. The solution was to use a compromise value.
Again browser render ordered lists with a lot of variability. I wanted to use them in conjunction with the image map but the rendering of the page anchors caused presentational problems so I reverted to using 'div' tags instead.
Text Only Version
The colours on a Mac monitor appear brighter than the PC even on a variety of monitors. I have used web safe hex colours for any colour block area e.g. orange and crimson in order to reduce any unpredictable rendering. There is of course no guarantee what the main images will look like on monitors with reduced colour.
Mac and PC browsers of the same major version also renders things differently. Internet Explorer editions vary greatly depending on the build version, this is especially true in terms of their CSS and XHTML support.