[thelist] xhtml+css, how's my code?

[Seth Thomas Rasmussen]

Looks like a very good start overall.

[CODE]
<div id="hide"><a href="http://webstandards.org/upgrade/">Why this site
doesn't look right&#8230;</a><br /><br /></div>
[/CODE]
This is a hair-splitter to start with, but nonetheless, since you don't
really need a logical page division but simply a link to display for
non-CSS browsers, why not ditch the <div> and put the <br />'s within'
the <a>. Then, move your ID to the <a> and hide it that way. In general,
it is also better practice to name your elements with respect to their
structural meaning, not their presentational(i.e. "hide") or behavioral
attributes.

Next, you have two <div>s called "top" and "bottom" comprising your
header or banner. Within' those you've got a few <img>s and a list of
links. Since part of a standards based approach is a stepping away from
the GRID-based design mindset and into a RULES-based design mindset, I
would suggest you not think of how those elements are broken up
visually, but rather structurally. Think of the logo and tagline as ONE
element, the main navigation as ONE element, and mark it up that way.
You could easily have one <div> containing one <img> and one <ul> to get
the same effect visually, while achieving more compact and more
meaningful markup.

Now, inline styles: you've got a few images with "float:left;" and a
handful of other scattered inline style rules. First thing: why? Do you
need them, is what I'm getting at? One obvious "no" is this:

[CODE]
<div id="content" style="margin-left:412px;">
[/CODE]

Similarly, you might want to consider applying IDs to those <img>s and
floating them using ID selectors in your stylsheet as well.

Moving on, your form makes use of the <legend> (kudos!) but then your
CSS says to hide it(huh?). You have that <h4> in there titling the login
form, but why not use the <legend> instead since that is its intent. (I
know its intent is to describe a fieldset, not a form, but since the
form is just one fieldset, the legend's job effectively becomes to
describe the form...) If you want it to look like your h4s, then just
style it that way.

One last but very important note: If you are going to use the Tantek box
model hack like you have done in specifying different font-sizes on the
body element, one for IE5 and one for modern browsers, you need to
remember to include the "Be Nice to Opera" rule which is typically a
rule that uses a child selector to reiterate whatever value you are
passing to compliant browsers.

[CODE]
body {
font-size: x-small;
voice-family: "\"}\"";
voice-family: inherit;
font-size: small;
}
html>body {font-size: small} /* be nice to Opera */
[/CODE]

I'm not sure exactly how it is nice to Opera, but one big purpose it
serves is to recover IE5 from the hack initiated by funky voice-inherit
declaration. The bug in that funky string of characters that causes IE5
to ignore everything after it also causes it to ignore the end of that
particular style rule. So without the "Be Nice" rule to follow, you will
have IE5 ignoring the next VALID rule instead.

And there you go. I'm gonna try and not think or talk about Web design
and computers for the rest of the nite now... aye yaye... ;p

-----Original Message-----
From: thelist-bounces at lists.evolt.org
[mailto:thelist-bounces at lists.evolt.org] On Behalf Of Theodore Serbinski
Sent: Monday, July 26, 2004 5:05 PM
To: thelist at lists.evolt.org
Subject: [thelist] xhtml+css, how's my code?

hey all! so i'm redoing our company site using the latest and greatest
tableless css design technigues and the template has turned out great.

old site: http://www.washsq.com
new site: http://www.washsq.com/test/index.html

anyways i was wondering if anyone could look over my xhtml+css and see
if there is anything i could be doing better. i think it's good but i
know there is always room for improvement and especially since this will
be the template, easier to make changes now then later. and i'm
constantly trying to make my code the best possible.

also, does anyone have any idea why when i try to validate the CSS i get
a document structure error? i can't seem to figure that one out.
otherwise it validates fine.

and oh yeah, there is one small layout bug i can't seem to get around.
if you notice the checkbox in the member login form, i can't seem to
justify that to left of it's box. i set margin-left:0 in firefox and
that works fine, but in IE6, doesn't work. any ideas? thanks all!

ted
-- 
* * Please support the community that supports you.  * *
http://evolt.org/help_support_evolt/

For unsubscribe and other options, including the Tip Harvester 
and archives of thelist go to: http://lists.evolt.org 
Workers of the Web, evolt !