[Javascript] XHTML/CSS *long* (was: separating structure, style, and behavior)

[Shawn Milo]

----- Original Message -----
From: Paul Novitski <paul at novitskisoftware.com>
Date: Thu, 06 May 2004 11:38:58 -0700
To: "[JavaScript List]" <javascript at LaTech.edu>
Subject: Re: [Javascript] separating structure, style, and behavior

> Shawn,
> 
> I'm still using the Transitional doctype (or none -- "quirksmode") but 
> would like to move to Strict -- IFF it helps me write more robust 
> pages.  Can you share some of the bumps along your learning curve while 
> moving to Strict?  Was there anything you had to sacrifice?  A handy list 
> of things to avoid?  Subtle lessons you had to learn the hard way because 
> they weren't well documented?  (I know there must be good descriptions of 
> making the doctype transition somewhere on the net, I just haven't seen 
> them yet.)

<snip>

Well, to me, moving to "strict" seemed like a pleasure.  XHTML 1.0 Strict
is really just HTML as it should have been all along.  Case-sensitive, 
close every tag you open, etc.  It forces you to do things like add
alt text to images, stuff like that.  The main thing I've had to change
was adding the 'id' attribute to everything instead of 'name'.  In HTML
form objects, like text, select, and textarea, for example, you can have
'name' and 'id', although the 'name' attribute is not allowed in a <form> tag.

Just write your JS to use the id instead of the name.  The only reason I still
use the 'name' attribute at all is for ASP, which doesn't bring back values
for Request.Form from ids.

Now, when you asked about quirks, you really made me think of using CSS extensively
for layout.  Not that CSS is quirky, but it can really seem like it when something
really weird is happening.  Especially when your page looks three different ways
in three different browsers.  In this regard, it's kind of like Javascript.  
What I mean by that is:  You can do all your development in IE, and find that it's
okay in IE, but later see that it's screwed in Mozilla/Firefox.  You can have it
perfect in Mozilla, and find that it's got a major visual flaw in IE.  Or, you can
keep both browsers open while you design, and get it right in both.

Having said that, IE really pisses me off as far as CSS compliance.  I fully admit that
I am a Linux user and open-source advocate.  However, my annoyance with IE is, I think,
justified.  Many a time, I've had a situation where I could not get the same page to look
the same in IE6 and IE5.5 in the SAME browser size and screen resolution.
I had an intern at my workplace for six months whom I worked
with on our new intranet design (based on Gila Two), and between the two of us (he's not
a Linux user), we were cursing IE's name almost daily.  The (happy?) ending of the story
is that we managed to lay out the pages so that, although they don't look the same in both
browsers, it's still pretty good.  The kind of things I'm talking about are mainly issues of
things wrapping to the next line in different places in the *same* screen resolution.

Speaking of wrapping, while the Gila Two layout is awesome, I frequently find myself removing
the right side-bar for applications with forms or returned data, because if the content is too
wide, the entire main-content div drops  down and only begins where the bottom of the 
right side-bar ends, even if the content is visually small enough to fit, and doesn't
extend into the boundries of the right-side bar.  For the intranet
portal, I have retained the right side-bar, and made all the menus dynamic via ASP.

The only CSS annoyances that come to mind are two:
1.  The behavior of some divs with a float attribute
2.  Centering certain non-text objects (divs, tables, etc)

I have figured out work-arounds, and overall CSS helps a lot more than it impedes.

Having said all that, I would be glad to volunteer any/all of my code as an ASP application
template.  I have created an entire intranet site and set of web applications with ASP,
XHTML, and CSS, based on my modification of Gila Two.  I'm calling it Anole internally.

So, if anyone would like any of my code, or just want to ask for some CSS layout help if
you get stuck with appearance or Javascript behaviour, you can always e-mail me.  By the
way, if any of you missed it, take a look at Gila Two and either print or do a print-preview.
With CSS, there is finally an end to having to make a separate, printable view of a page.


Sorry for the novel.  Think I can get this published by O'Reilly? ;o)

Shawn