Re: Validating & presentation problems

At 15:46 15/09/02 -0500, Bridgett Schneider wrote:
>Now about presentation.  I know your pages can validate, both the
>HTML coding and CSS coding and still have your pages being presented
>in the browsers with less than optimum results.

<snip/>

The first thing to do is to take all of the CSS and put it into one 
external style sheet. This will make it much easier to work out what is 
going on.

Then remove _all_ inline styles (styles declaired with the style="" 
attribute). Inline styles are all that is wrong with CSS combined with all 
that is wrong with HTML 3.2 and then some more wrongness added. This will 
make it much, much easier to work out what is going on.

Then convert the whole page to either HTML 4.01 strict, or XHTML 1.0 
Strict, depending on your mood. It doesn't make any difference which one 
you choose, but the advantage of strict is that all presentational 
information is removed. This makes it much, much, much easier to work out 
what is going on. While you are doing this, be on the lookout for things 
like `<br><br>', which should probably be replaced by something more 
meaningful.

You will find that there are some elements and attributes that are not 
allowed in Strict. These can all be safely replaced using CSS - see 
http://aamcf.co.uk/html/ for some tips on removing these `deprecated' 
elements and attributes.

One thing that I don't cover there is vertical centering of tables. This is 
problematic to say the least. You should be able to center a table or any 
block level element like this:

table {
         margin-left: auto;
         margin-right: auto;
}

but this doesn't work.

However, if you had a table that was 60% wide, you could center it like this:

table {
         margin-left: 20%;
         margin-right: 20%;
         width: 60%
}

See http://aamcf.co.uk/temp/center_table for an example.

Once you are working with Strict, and no inline styles, it becomes much 
easier to solve problems because you only have ONE source of formatting 
information - the external style sheet - rather than many (the external 
style sheet, the embedded style sheet, the inline styles, and the 
deprecated elements and attributes) that interact in all sorts of odd ways.

I've just done most of these changes on 
http://aamcf.co.uk/temp/mailing_lists . I have annotated the HTML and CSS. 
There are still a few things that could be done to improve things, in 
particular the CSS needs to be tidied and reorganized. It's not the most 
elegant at the moment. The images at the bottom of the page have borders 
round them, which you may want to remove (in the CSS!), and I haven't 
tested in Netscape 4.

Andrew

--
http://aamcf.co.uk/

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA