Re: Please Critique: doctype, css problems

CircleSky wrote:

(snip)

The problem I'm having is that when I add the doctype to the beginning
of the htm file, the formatting doesn't display as expected. (I
recognize that the browser is now using Standards mode.) An example of
the page with doctype declaration:
http://www.luckyman.ca/testsite/index.htm
Notice:
- the boxes surrounding the title are only as wide as the text itself,
even though "span.h1 {width:100%;} ".
- the background image in div.nav is cropped at the bottom.
- the navigation buttons are wider.
- the position of div.nav scrolls off the screen.
(snip)

Thanks so much for your help!
Shannon

CircleSky,

I said I'd try to address the 4 problems above, but I'm going to change
my mind. There's a fundamental problem here that no amount of tweaking
will solve: you are trying to be too precise.

When you work with a paper document, you can position things exactly
where you want them. This works because you know in advance the exact
size and shape of the paper and the exact size and shape of the things
you want to display.

HTML does not work that way. The size of the 'paper' (the user's
browser window) is determined by each user and may change from moment to
moment. The size of the text can also be adjusted by each user to suit
his or her preference.

CSS can be used to suggest to the browser how the image will be
displayed, but each user can override your suggestions with his or her own.

If your site is designed in a flexible manner, it will adapt to most of
these changing conditions. If it designed in a rigid manner, it will
appear strangely to any user who's environment does not exactly match yours.

Some specific things you should do differently:

HTML
Put here only the content of the site, no styling.
Image height and width are not considered to be styling. You can
specify them right on the <img tag:
Example <img src="yadda.jpg" height="253" width="400" instead of
<img src="yadda.jpg" style="width:362px; height:385px;">
border:0px;">
Use the defined HTML tags to identify the semantics of your content.
Example: <h1> to identify the primary heading, not <span
class="h1">. Even the oldest browser (and audible browsers) will put
some sort of appropriate emphasis on the text and search engines will
know that it should be given extra weight in categorizing your site.
Avoid unneeded tags. Instead of:
<div class="nav">
<span class="outline">
:
</span>
</div>
just use (div class="nav"> and style it appropriately in the CSS.

CSS:
Add things up. Your div.nav is 27% wide and the adjacent div.body is
74.5% wide. That's a total of 101.5%, guaranteeing that your content
will be wider than the screen. Since you've specified that the body
should be overflow:hidden, that extra 1.5% is invisible. (IE gives you
a horizontal scroll bar to see it; Netscape doesn't).
Avoid absolute positioning, absolute font sizes (use %, preferably
100% or more), and absolute dimensions of boxes that will contain text.
Use 'em' for margins and padding around text, so they will grow and
shrink as the user plays with the text size.

I can't be sure what is causing your four problems. Netscape does not
truncate the nav background, so that may be an IE bug. The other things
I'd look at are that 101.5% width, the absolute positioning, and the
specification of height:100%.

Chris Beall