xhtml + CSS… #3

…functional separation…


I don't like the word “separation”… it almost sounds like divorce. However, to keep different tools in different drawers isn't such a bad idea.

One drawer where xhtml can carry the content, and another where CSS can carry my styles out on the web. Together they become a web page, and here's where I find it a bit problematic.

CSS can't style non-existing elements, so how am I to keep style out of xhtml? Sure, some browsers can give me a lot of extra style-hooks on the content-carrying xhtml-elements, but the witch in browserland—IE/winis unable to do that stuff.

I think “complete separation” is nonsense no matter how well the browsers can do their job. I want it all – as usual, so I'll go for optimal division, not total separation. The result is best viewed in Lynx.

the real world…

I salute those who try to work around limitations in web design and web standards without breaking anything. I do to, but I won't let my efforts in that direction limit me. I don't have time for standards and browsers to catch up, so I break or bypass both when I think they fail.

Some web designers go too far in my opinion. Replacing useful content with CSS-styling is “over the top”, like replacing a perfectly good headline with a heavy image-construction. That's “image replacement” for no good reason at all.
What is so good about 1KB saved in the source-code, when 150KB of images with hard-to-read text has to be added instead?

non-semantic grumble…

I hear that grumbling at times, when some of my carvings (web designs) actually work across browser-land. Here's more or less how it goes:
It isn't semantic. This is how it should be done—​if only it would work…

Well, what's meaningful in semantics(?) if it doesn't work? I thought the real meaning (semantics) of web-design was that it should work. Anything that doesn't work is by my definition: non-semantic nonsense.

Some of my designs are not as semantically correct as they could've been. Additionally: I don't have Skip to content links since the content comes first in the page anyway, and I don't replace perfectly good headlines with images or Flash. I even use “some” elements for styling-purposes only.

Think I've mentioned these things already – somewhere, but the web is full of copied text. Even what's false gets copied and presented as fact, again and again. Where's the semantics in that?

Frequently checking the value of what is presented – regardless of the source, makes perfect sense, in my opinion.

non-semantic grumble continues…

…with a quasi-list of quasi-semantic notes:

- This page is just another dish of tag-soup (validated by W3C, but anyway).
- Serving xhtml 1.0 as text/html (W3C ok's it, but what do they know?).
- There's an xml-declaration on top in my source-code (poor IE6).

In short: I should be shot on sight…

- Dropdowns and flyouts are nowhere to be found ('cos I don't like 'em).
- No fixed-width designs (except in IE6's "high security" setting on XP-SP2 — and IE/Mac).
- Most pages create scrollbars (too much content around – sorry).
- I don't validate my pages very often ( I leave them to HTML Tidy).
- I choose and apply ID and class names as I see fit for the task at hand.
- I use all valid elements for the doctype I choose.

I must be deprec-i-ated – or something even worse…

And on top of all that: my designs usually work quite well in all browsers I care to test them in.
The other browsers? Well, I guess I didn't care to test in those. Besides, I don't have access to all browsers.

Maybe this approach isn't semantic, but who cares.
It gets through to the end-users.

not frozen in time…

I've noticed that some readers can't separate what's updated from what's outdated and/or undated, so this article is probably in need of frequent revisions if it is to stand the test of time. I'm still pretty happy with most of what I wrote initially though, so I think I'll keep it on line pretty much as is.

sincerely  georg; sign

Hageland 09.nov.2004
last rev: 05.jan.2009

xhtml + CSS…

Do I have to know what I'm doing?
I just did it and it's working … so what?


  • introduction
  • Table of Content


  • this is PTL web-design
  • CSS sledgehammer
  • accessibility
  • Print enhanced page
  • Projection enhanced
  • Small Screen enhanced page
  • validity of xhtml and CSS
  • more xhtml & CSS
  • html tidy
  • Opera and me
  • Firefox vs. IE
the usual
  • the author
  • Copyright
the unusual
  • Molly speaks up
the additional
  • Examples
  • Demo pages


…one dead browser…
+ RIP +

Dear web design experts:

Standardized tools are great.
Standardized limitations are not.

No, I have not shut out IE5/Mac from our site…
- That old bugger doesn't understand my code – that's all.

Yes, IE5/Mac may render this page.
Guess we felt sorry for that old bugger.
Molly 'the cat'

Yes, I am sorry, but IE6 does understand my code…
…in its own buggy way...

I know how to kill IE6-bugs you know, and IE7 can't get its bugs past me either…
…preparing for the next one now.
Molly 'the cat'

Yes, this page probably renders best in Opera
…it's not my fault!

Sure, you can surf here with Firefox, Safari, and others too…
…we won't bite.
Molly 'the cat'

…2005 - 2009