Level zero starts at black and each additional nested element gets closer to white (with 16 shades in total). To make use of the bookmarklet, visit the author’s page and drag the “Topographic view” link to your Personal Toolbar. Then, just click that link to see the effect applied to the current page.

As you might expect, well formed CSS-based sites barely get out of black, but table-based layouts can easily approach pink (the color designating nesting past 16). All the same, though this bookmarklet is good for an easy laugh at the expense of poorly built sites, I’m not sure if it has any practical development applications :-/.

Q: Why did the XHTML actress turn down an Oscar?
A: Because she refused to be involved in the presentation.

Q: Why was the font tag an orphan?
A: Because it didn’t have a font-family.

Q: Why do CSS designers have too many children?
A: Because they employ lots of child selectors.

Q: Why was IE5’s 3-metre wide cell in the insane asylum smaller than IE6’s 3-metre wide cell?
A: Because the width of the cell included the padding…

Q: Why was the XHTML bird an invalid?
A: Because it wasn’t nested properly.

I think the XHTML/Oscar one may be my favorite, though I liked the IE/cell-width one as well. And considering geeks’ general penchant for tech humor, I’m almost surprised that these jokes have only come about now. In any case, they brightened my day a bit :).

So, what it comes down to is using multiple background images and placing them at each corner (top-left, bottom-left, and so on). Of course, CSS only supports one background image per element, so that doesn’t make things easier. The workaround is simply to use multiple nested elements (such as nested DIVs), each with its own background image.

Nested DIVs can have their own problems, as they can quickly become semantically meaningless (that is, the HTML no longer describes the document’s structure). However, Ryan Thrash has come up with what he calls the ThrashBox — a semantically correct set of HTML & CSS to create rounded corners.

His technique still relies on nested DIVs but he structures them so that the code remains meaningful (one div for the box, one div for the box’s header and one div for the box’s content). It may not be semantically perfect, but I think it’s the best that can be achieved with current CSS. And, the next time I need to create a box with rounded corners, I’ll consider his technique.

Working backwards, he discovered which files the developer’s edition used and applied that knowledge towards older IE versions — he downloaded their respective CAB files and extracted bits as needed. A few tweaks later, and he had stand-alone versions (screenshot). (The tweaks, involving IEXPLORE.exe.local, are further explained in the article.)

Of course, Joe outlines the steps he used to create the stand-alone versions and you could follow along with those. Or — even easier — QuicksMode.org has links to the ready-to-run stand-alone versions of IE download.

I’ve tested this on my XP machine here at work, and it works great! When running multiple versions of IE, it can be easy to confuse which version is which; so, QuicksMode wrote a small script to dynamically prepend the IE version number to the page’s title (so that it’s easily visible in the taskbar).

Joe also includes a link for PayPal donations at the bottom of his page to cover bandwidth costs and the like. And, considering how much time this discovery will save me, I was happy to contribute.

PS As you may have noticed, I’m not one to use exclamation points gratuitously. It could have been two years or more since I last typed two consecutive exclamation points. But, I was so excited about this discovery that I included two in the title of this blog entry ;).

The sites launched last week and its standards-compliant layout includes valid XHTML 1.1 and CSS (just CSS for layout). I’ve also added a section to my portfolio which explains several of the CSS techniques used throughout the site.

The test was $50 but I passed! They don’t reveal the actual score and instead give an aggregate score out of 5.0. They rate 2.75 or higher as passing while 4.0 or higher is passing at the Mastrer Level. I scored 4.53, which I’m very pleased with.

However, I’m not sure about how to integrate this into my resume. I could add it to the Educaion section, I could add it as a bullet to the Profession Profile section, or I could add a separate Certifications section. Any suggestions there? And, if the latter (adding a Certifications section), where would you add that in relation to the other sections?

With a little thought, it’s not hard to figure out how they did it. But, it’s not a techniqure I had seen before.

Error: element “input” not allowed here; possible cause is an inline element containing a block-level element

At first I was confused, but a Google search for that error message quickly pointed me in the right direction. Apparently, <form> must contain a block-level element. And, as <input> is just an inline element, directly enclosing it with a <form> tag wasn’t allowed.

So, I enclosed the tags within <form> by a <div>, and the page now validates as XHTML 1.1. Standards are good :).

Look, Ma, no tables: Lycos Europe will soon move to a new layout that validates as XHTML 1.0 Transitional and uses CSS for layout. (Netscape 4 users will get a plain text version with no formatting.) Can a standards-compliant Google be far behind?

Very nice.

It may not quite be at the level of (say) TextPad, but TextPad isn’t free either. While I don’t believe that shareware is immorral, I do consider free software to better imbody the hacker ethos. I regard Crimson Editor as the current champ of source-code/text editors for Windows. Some features:

• Multi-level Undo/Redo
• Change-detection. That is, if a file changes on disk “out from under the feet” of the editor, the editor prompts the user whether he/she would like to reload the file.
• Syntax Highlighting: HTML, CSS, C/C++, JavaScript, and so many other languages (even Python and LaTeX).
• Auto-indent
• Matching-parens highlighting. This is extremely handy for multi-level if-statements, for instance.

As far as what’s new in the 3.45 beta, I found this list of features to be included in 3.45 Final on the messageboard, and presumably the items that are listed as “done” are included in the beta.