Category: css

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.

PNG Alpha Transparency Support in IE 5.5+

Ashley Bischoff2 Comments

A coworker was asking me about PNGs the other day, and I pointed him to the LibPNG page — one of the more comprehensive sites I’ve found on the PNG format. For those not aware, PNG is a lossless image format (like GIF) but it supports up to 24 bit color (like JPEG). It’s also supported by all the major browsers and many desktop applications.

Another advantage to PNG is that it supports alpha transparency. Unlike GIFs which have on-or-off transparency, PNGs support up to 256 levels of transparency. So, a properly designed PNG image with alpha transparency can look good against a background of any color.

Basic PNG functionality is supported by almost all browsers (Netscape, IE and so on), and support for PNG’s alpha transparency is also widespread. In fact, just about every browser — even the Sega Dreamcast browser — supports alpha transparency… except for IE on Windows (PNGs work there, just not the alpha transparency part).

And, as IE/Windows currently has the largest market share, it was thought that PNGs with alpha transparency essentially weren’t usable on the web. However, after re-reading the IE/Windows section, I see that there’s now a workaround to get PNG alpha transparency support in IE 5.5+!

As I understand it, IE can be induced — via some proprietary HTML — into using DirectX to render PNGs. And, as DirectX supports alpha transparency, you get alpha-channel support in IE. As all the other major browsers already have alpha channel support, it’s conceivable that PNGs with alpha channel transparency could be used throughout a site.

Andy Budd on CSS Margin Collapsing

Ashley Bischoff2 Comments

Margin-collapsing can sometimes be tricky to CSS beginners; especially as modern browsers support CSS better, collapsing margins is something that you could easily run into. However, Andy Budd has written an extended blog entry on the workings behind collapsing margins.

For the most part, margin collapsing has few rules:

At its core, margin collapsing is very easy to understand. Basically when two vertical margins meet up, instead of adding together, the largest margin takes precedent and the other one “collapses” to nothing. […]

For example, if you have two adjacent paragraphs, the first with a 20px bottom margin and the second with a 15px top margin, the space between them will only be 20px — since the smaller of the two margins (15px) collapses into the larger one (20px).

It can get a bit tricky when borders come into play. In the case of borders, the two elements’ margins are no longer directly touching and so the margins don’t collapse. I’ve run into that one a few times when I’ve turned on borders on an element (for debugging) and then found the layout to be wildly different after I finished debugging and turned off the borders.

The article also goes on to talk about how margins collapse around floated elements. But, most beginners who would run into collapsing margins may not be using floats as a layout technique anyhow. In all, I found the article informative and I won’t hesitate to refer to it if I run into some weird collapsing issues.

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