Archive for January, 2006

I’m curious. When designing sites using css layout is there value in setting a bar for browsers you’ll bend over backwards for? Is there ever a point where it is okay to say, “I’ll design for standards complaint browsers, and I’ll even degrade gracefully down to a point…but past that point, I’ll strip the css and you will just get the unstyled page.”

Now, while I’ve got a really good idea what the philosophical answer would be, I’m much more interested in your real world answer.

If I said the following browsers get the CSS (and browsers not listed do not get the CSS), would you think I was evil?

  • Firefox (all versions)
  • Internet Explorer on the Mac (version 5.22 and higher)
  • Internet Explorer on the PC (version 5.5 and higher)
  • Konqueror (all versions)
  • Mozilla (all versions)
  • Netscape (version 7.1 and higher)
  • Opera (version 8.0 and higher)
  • Safari (all versions)

What if I added the fact that according to our Urchin browser stats, that only 1.3% of my viewers would see the page without styles.

Okay, now….hit me with your best shot. I asked ’cause I really want to know what you think!

Last night I arrived home to the usual chaos and mayhem. A single sheet of paper quietly sat on my counter. My eyes skimmed the paper and caught on these words:

U.S. Department of Defense
News Release

DoD Identifies Air Force Casualties

The Department of Defense announced today the death of two airmen who were supporting Operation Iraqi Freedom.

Killed were:

Tech. Sgt. Jason L. Norton, 32 of Miami, Okla.

Staff Sgt. Brian McElroy, 28 of San Antonio, Texas.

Time stopped.

I’ve just been tagged by the ever so entertaining and accessible Bruce Lawson with the Four Things Meme. Considering Bruce was tagged by the driver of the love bus full of hippies, I find this request impossible to resist. So here goes:

Four jobs I’ve had in my life

  • Grid Girl – lining up cars prior to races and checking the driver’s safety equipment
  • Resident Assistant in Blanton Dorm
  • Manager Human Resources Information Systems
  • Self-appointed accessibility goddess

Four movies I can watch over and over

  • Willy Wonka and the Chocolate Factory
  • Henry V (with Kenneth Branagh)
  • The Wizard of Oz
  • Princess Bride

Four places I have lived

  • Houston, Texas
  • Odessa, Texas
  • Austin, Texas
  • My Imagination

Four TV shows I love to watch

hmmmm, this is a hard one for me, I practically gave up TV for blogging

  • Rose Bowl
  • Tour de France
  • Clean Sweep
  • Extreme Makeover: Home Edition

Four places I have been on vacation

  • Playa del Carmen, Quintana Roo, Mexico
  • Taos, New Mexico
  • Lake Louise, Alberta, Canada
  • London

Four of my favourite dishes

  • Chili Rellenos at Tomasita’s in Santa Fe
  • Mezza Plate at Armen’s (Hummus, dolma, baba ganoush, oliveh and pita)
  • frozen Girl Scout Thin Mint CookiesBananas Foster
  • Rosemary Garlic Roasted Pork Loin oh Curtis, come cook for me!

Four websites I visit daily

Four places I would rather be right now

  • Grecotel Mykonos Blu, Mykonos, Greece
  • Walking the labyrinth at Chartres
  • Boston in the Fall with my dear friend Meesh
  • In a MoMA on a backstage tour with a cool curator

Four bloggers I am tagging

Imagine my surprise, when I pointed my PDA browser (Pocket Internet Explorer aka PIE, Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240×320)) to www.cnet.com and my browser crashed! Ouch. There seems to be a bug in my PIE!

I couldn’t resist lifting up the hood to see if I could identify the culprit. Surprise, surprise, it is what I call the “the siamese twin float listing whammy”. Poor little PIE, can not handle two elements in a row that are both styled with a float and width followed immediately by an ordered or unordered list. Here is a simple example so you too can experience the pain.

<head>
<style type=”text/css”>
<!–
#thing1 {
float: right;
width: 10px;
}
#thing2 {
float:right;
width: 10px;
}
–>
</style>
</head>
<body>
<div id=thing1>
<img src=”../images/thing1.jpg” alt=”Thing 1″ />
</div>
<div id=thing2>
<ol>
<li>Float</li>
<li>Float</li>
<li>List</li>
<li>#$%^!</li>
<ol>
</div>
</body>

I also posted a sample page that will crash pie.

Solutions? Well, other than avoiding the float/width, float/width, list combo, if you will insert anything in your code (another tag, text, a non-breaking space) any where between the floated elements and/or the list you will solve this problem.

So don’t get caught by the vicious “siamese twin float listing whammy” there are a lot of us out here browsing with PIE!

XHTML 1.0 Strict is my new best friend. Designing pages using this doctype is the perfect new year’s resolution to ensure that my site is slim and trim.

So, we could get into the argument about whether HTML 4.01 Strict is better than XHTML 1.0 Transitional, but personally I think that argument is not worth having until you can tell me why you are not adopting the W3C standard of XHTML 1.0 Strict.

Here are the reasons I’m choosing XHTML 1.0 Strict:

  1. I want my web pages to be easily interpreted by any user agent whether it be a screenreader, a browser on a laptop or on a mobile phone. XHTML’s cleaner and more stringent syntax is a language based on all that we’ve learned over the past 10+ years of the web. It includes the power of XML to define date with the strength of HTML’s ability to display data. Any coder can quickly see the advantage of having all tags closed, properly nested and well formed.
  2. But XHTML 1.0 isn’t good enough for me without the Strict. What does Strict mean? Clean separation of content from presentation. This separation makes a web site modular and easier to maintain while drastically reducing page size.

I’m beginning to think of my XTHML 1.0 Strict New Year’s resolution as a diet for my web sites.

Only new trick I had to learn when moving from XHTML 1.0 Transitional to XHTML 1.0 Strict was how to get my forms to validate. I had made the “old-fashioned” mistake of wrapping a <div> around my <form>. I kept getting the following errors from the XHTML validator:

  • document type does not allow element “label” here; missing one of “p”, “h1”, “h2”, “h3”, “h4”, “h5”, “h6”, “div”, “pre”, “address”, “fieldset”, “ins”, “del” start-tag.
  • document type does not allow element “input” here; missing one of “p”, “h1”, “h2”, “h3”, “h4”, “h5”, “h6”, “div”, “pre”, “address”, “fieldset”, “ins”, “del” start-tag.

Scratching head. Huh? What do you mean I can’t have a “label” and an “input” here? Did you know that in XHTML 1.0 Strict the <form> tag can only contain block level tags? This means that the <input> and <label> tags need to be wrapped in a block level tag within the <form> tag or you too will suffer the two errors listed above.

If you used to do this:

<div>
<form …>
<label…> … </label>
<input… />

</form>
</div>

To be XHTML 1.0 Strict you’ll need to do this:

<form …>
<div>
<label …> … </label>
<input … />

</div>
</form>

So, what is your new year’s resolution for your web site? Will your code be ready for bikini season?

As Mack Brown says, “Now we are just living the dream.”

Thank you Vince. Thank you Horns. Vince, you are the football legend of the century.

Longhorns 41
Trojans 38

And as thrilled as I am about the invinceable finish, I want to take a moment to recognize the amazing Trojans. 34 game winning streak. Two time national champions. You had me holding my breath until the very last second.

The eyes of Texas are upon you,
all the live long day.
The eyes of Texas are upon you,
you cannot get away.
Do not think you can escape them,
at night or early in the ‘morn.
The eyes of Texas are upon you,
’til Gabriel blows his horn.