Site Ratings & Reviews - Please Critique: doctype, css problems

Author

Please Critique: doctype, css problems

CircleSky

2005-07-28, 11:59 pm

Hi, I'm trying to update our website. I have created the .htm pages
and an external .css file. I have used the W3C validator
http://validator.w3.org/:

- Index.htm was found to be valid HTML 4.01 Strict. (Although there are
still some problems on the other html pages that I'm working to
correct.)
http://validator.w3.org/check?uri=w...ite%2Findex.htm

- My css file was also found to be valid.
http://jigsaw.w3.org/css-validator/...&usermedium=all

The doctype I'm trying to use is <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

When I leave out the doctype declaration, the formatting is displayed
as expected. (I recognize that the browser (IE6) is now using Quirks
mode.) An example of the page without doctype declaration:
http://www.luckyman.ca/testsite/index2.htm
Notice:
- the boxes surrounding the title are displayed as the full width of
div.body minus the padding.
- the background image in div.nav is blended into white along the
bottom of the image.
- the navigation buttons are narrower, as specified.
- the position of div.nav is fixed, as specified (always visible).

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.

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? To word this a different way: The validator indicates that I'm
using standard code. Why is it only rendered correctly in Quirks mode?

My stylesheet is here:
http://www.luckyman.ca/testsite/css.css

I am open to any suggestions, both design- and code-wise. Please go
easy on me, these things are relatively new to me. My only concern is
to have an efficient page which renders correctly for the majority of
users. I will code it in any way necessary to achieve that.

Thanks so much for your help!
Shannon

Chris Beall

2005-07-28, 11:59 pm

CircleSky wrote:
(snip)
> 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? To word this a different way: The validator indicates that I'm
> using standard code. Why is it only rendered correctly in Quirks mode?

CircleSky,

I'm going to answer this general question, then try to take a look at
your specific problems in a separate post.

I'm nearsighted. When I wear my glasses, the world looks clear and
sharp. The defect in my eyes is compensated for by the quirk that the
lenses I wear are curved, thus compensating for the lack of curvature in
my eyes. If I replace my glasses with a sample pair at the
optometrist's, the world becomes quite fuzzy, because those glasses are
'true', they have no curvature and do not compensate for the distortion
in my eyes.

Your HTML (I deduce) contains quirks. When IE is in quirks mode, it
accommodates those quirks and the world appears as you expect. When you
put IE in Standards mode, it shows you the world as it really exists,
following the W3C standards.

How can I be sure? I looked at your site with Netscape 7.1, which has
no quirks mode. With that browser I see most of the problems you've
listed, plus several others that you didn't.

Cheers,
Chris Beall

Ben Measures

2005-07-28, 11:59 pm

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.

Chris Beall

2005-07-28, 11:59 pm

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

Jim Moe

2005-07-29, 4:16 am

CircleSky wrote:
>
> 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%;} ".

<span> applies to inline elements only. So the width attribute is
meaningless.
If you want an <h1> element, use <h1>. It is a block element and
automatically widens to 100%. Change its attributes rather than try to
recreate it (incorrectly). As a bonus search engines like <h1>.

> - 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.
>
Other have commented on these issues.
One thing: the div.nav width plus div.body width exceeds 100% (27 +
74.5 = 101.5).
Look into using the "cascading" aspect of CSS. It can greatly reduce
your HTML markup.

> 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? To word this a different way: The validator indicates that I'm
> using standard code. Why is it only rendered correctly in Quirks mode?
>
Validation verifies "syntax", that your code complies with the rules of
the DTD. It has nothing to do with correct coding.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Leonard Blaisdell

2005-08-01, 4:24 am

In article <1122594437.296708.131650@z14g2000cwz.googlegroups.com>,
"CircleSky" <circlesky78@shaw.ca> wrote:

> My stylesheet is here:
> http://www.luckyman.ca/testsite/css.css
>
> I am open to any suggestions, both design- and code-wise. Please go
> easy on me, these things are relatively new to me. My only concern is
> to have an efficient page which renders correctly for the majority of
> users. I will code it in any way necessary to achieve that.
>
> Thanks so much for your help!
> Shannon

You are using span where you ought to use div or a more specific block
element. It's possible there are other style problems although I
honestly didn't check. CSS is powerful stuff and simple differences in a
CSS file can lead to dramatic change in the main style of the site. See
<http://www.strangebanana.com/>.
It's probable that css alone will solve your problem. The structure
appears sound on a quick glance.
If you're not aware of the CSS spec, it's at
<http://www.w3.org/TR/REC-CSS2/> and saves you a bunch of bucks on a
book. If you're not familiar with what it's trying to say, I'm sure you
can figure it out considering your question in the group was well laid
out.

leo

--
<http://web0.greatbasin.net/~leo/