Category: xhtml

HTML Altimeter Bookmarklet

Ashley Bischoff3 Comments

I heard about this an intriguing HTML Altimeter bookmarklet via Asa (or “Topographic View”, as the author calls it). It’s a bit hard to describe, but it essentially reassigns the CSS background for each element on the current page to represent the number of nested elements at that point.

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 :-/.

XHTML Jokes

Ashley Bischoff1 Comment

I found these XHTML Jokes at Photo Matt though they’re originally from HTML Dog. I’m guessing that only standards-aware web developers will get these, but I found some of them rather amusing:

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 :).

Semantically Correct Rounded Corners in CSS

Ashley Bischoff3 Comments

It seems that rounded corners are making a comeback in web design (or, maybe it’s just the designers I work with). And there’s not really an easy way about it since the current versions of CSS have no native support for rounding corners (however, I believe something may be in the works for CSS3).

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.

Multiple IE Versions on One Box!!

Ashley BischoffLeave a comment

Joe Maddalone of Insert Title Web Designs has discovered a method of running multiple versions of IE on one box! He made the discovery when he noticed that a developer’ edition of IE was able to run concurrently with his installed version.

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 ;).

PlainsCapital Relaunch

Ashley Bischoff1 Comment

My most recent freelance work was as lead developer for PlainsCapital’s relaunch of its site and subsidiary sites (PlainsCapital Bank, PlainsCapital Insurance, and others). Formerly PNBFinancial, the company decided to redesign its sites as part of its company-wide rebranding.

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.