Re: Please Critique: doctype, css problems

CircleSky wrote:

http://www.luckyman.ca/testsite/index.htm
http://www.luckyman.ca/testsite/css.css

My question is, if the files are valid as the W3C validator indicates,
why are all my css settings not rendered as expected while in standards
mode?

A computer can check your spelling and grammar but cannot tell you if
your book is a good read, or whether it affects readers in the way you
expect.

To word this a different way: The validator indicates that I'm
using standard code. Why is it only rendered correctly in Quirks mode?

So we have that quirks mode renders your code as you'd expect. Suppose
your expectations about how the code should render are wrong - what does
that say of the rendering given by quirks mode?

Let's address your immediate concerns.

- the boxes surrounding the title are only as wide as the text itself,
even though "span.h1 {width:100%;} ".

Span is an inline element. If you want it to take the full width
available to it, you need a block level element, such as h1.

Replace:
<span class="h1">Lucky Man Cree Nation</span><br>
with:
<h1>Lucky Man Cree Nation</h1>

And do likewise for all your headings. If it's a heading, mark it up as
such.

- the background image in div.nav is cropped at the bottom.

There are too many things wrong here to go through in a reasonable
length of time.

Simple solution: place the background on the page, not the div.

- the navigation buttons are wider.

Now they're exactly as you specified - 190px. In quirks mode they weren't.

- the position of div.nav scrolls off the screen.

You've set "overflow: hidden" on the body element - a very bad idea.

To be brutally honest, your website needs more work.

The HTML isn't marked up semantically, probably caused by your overuse
of classes and elements such as div and span. Avoid these until you can
use them judiciously.

As for the CSS, I'd recommend you read a few more books and tutorials
and walk before you try to run. Perhaps most notable is the unnecessary
level of control you try to wield, such as "width:74.5%;". The key to
using CSS successfully is to specify your designs as succinctly and
simply as possible.

Hth,
--
Ben M.