« Thirteen Ways of Looking at the Polyphonic Spree | Main | Labels for Character Types #1: Necrophoniac »

Masochistic Fun with CSS: An iTunes Stylesheet for the Web

Sidebyside_copyHoping to sharpen my CSS chops with a project as amusing as it was challenging, I recently dressed up my home MP3 server with an iTunes CSS skin.  Building an exacting stylesheet to work across machines and browsers without using tables for page layout was demanding to say the least.  But despite the fact that I am by definition (or at least by law) the only active user of the site, I stuck to my guns--even adopting the strict XHTML 1.0 DTD.  It's all about self-edumacation, see.  The stylesheet is pretty much there at this point, with a few trivial hacks to accommodate IE's block model rendering.  I'm still stuck with scrollbars that pop up pointlessly (allowing you to scroll a pixel or two horizontally within a window, for instance.  I have yet to figure out how to fix that in one browser without horking the layout in another).  Other things simply can't be fixed: Safari restricts styling on form text input elements, so the stylin' search box is a lost cause there.  But otherwise the layout renders fairly well in everything I tested.  Namely: Firefox 1.0 and IE 6.0 on Windows XP, Firefox 1.0 and Safari on Mac OSX.  I abandoned pixel-perfection in IE 5 for Mac for the time being, and ignored Opera because I'm a man of principle. 

Here's hoping there's no such thing as a CSS and desist order.

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8342189d553ef00d8354158f569e2

Listed below are links to weblogs that reference Masochistic Fun with CSS: An iTunes Stylesheet for the Web:

Comments

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment