The Boston Diaries

The ongoing saga of a programmer who doesn't live in Boston, nor does he even like Boston, but yet named his weblog/journal “The Boston Diaries.”

Go figure.

Tuesday, July 31, 2007

Stupid CSS tricks

I thought of maybe trying to spruce up Pornfinity to maybe make it more attractive at auction (and no, I didn't spruce it up—I got distracted as you'll see) by adding some links or something.

I wanted to do a bit more than just present a simple list of sites. I mean, sure, I could do something like:

(And no, these aren't porn sites, these are blogs that I read. I'm using them for an example. If you want porn, you'll have to go on your own and find some)

A lot of sites now have a favicon so I thought it might be nice to include them with the links (yes, that's the extent of my “snazzing up” the list of porn sites). So, first off, is it possible to change the default glyph used for lists?

The answer: yes. By using the CSS attribute list-style-image, you can have custom bullet points.

Now, I have noticed that Firefox will store the favicon when you bookmark a site. Curious as to where that information was stored (if I already have the data (and yes, I do have one or several dozen porn sites bookmarked—ahem) why bother re-downloading it all again?), I found that Firefox stored the data in a rather curious looking URLthe data: scheme.

Hmmm … I wonder … would this work?

<li style="list-style-image: url(data:image/x-icon;base64,AAAB...A==);">
  <a href="">Flutterby!</a>

Well … what do you know? It works:

Well, probably not under Microsoft Internet Explorer, but I don't care about that browser.

Pretty neat trick, actually.

Well … I thought it was anyway.

Obligatory Picture

[The future's so bright, I gotta wear shades]

Obligatory Contact Info

Obligatory Feeds

Obligatory Links

Obligatory Miscellaneous

You have my permission to link freely to any entry here. Go ahead, I won't bite. I promise.

The dates are the permanent links to that day's entries (or entry, if there is only one entry). The titles are the permanent links to that entry only. The format for the links are simple: Start with the base link for this site:, then add the date you are interested in, say 2000/08/01, so that would make the final URL:

You can also specify the entire month by leaving off the day portion. You can even select an arbitrary portion of time.

You may also note subtle shading of the links and that's intentional: the “closer” the link is (relative to the page) the “brighter” it appears. It's an experiment in using color shading to denote the distance a link is from here. If you don't notice it, don't worry; it's not all that important.

It is assumed that every brand name, slogan, corporate name, symbol, design element, et cetera mentioned in these pages is a protected and/or trademarked entity, the sole property of its owner(s), and acknowledgement of this status is implied.

Copyright © 1999-2024 by Sean Conner. All Rights Reserved.