Well, I signed up with Gravatar, mainly so I could test the plugin.

Basically the idea is that you can define an avatar that will follow you around the Internet, anywhere you post. All that’s necessary is for the site you’re commenting on to be Gravatar-enabled at the time someone visits.

The one thing I’m not entirely thrilled about is that it uses your email address as the basis for your ID. They really didn’t have many options to choose from, since most blog comment forms only have space for your name (not always unique), email address, and website (not everyone has one). To avoid publishing addresses accidentally, they one-way encrypt it using MD5. (MD5 is a hash function, so while you can have two systems generate an MD5 signature from the same data to see if it matches, you can’t restore the original from the signature.)

If you’re interested in Gravatars, head over to their site, see if you agree with their policies, and if you enter your email address when commenting (don’t worry, current and future WordPress versions never display it outside of the admin area), your avatar will show up next to your comments.

Anyway, once I had gravatars showing up, I had to find a layout that (a) looked good and (b) worked in IE. (Yes, that again.) I originally had them showing up to the right of the comments, but that ended up disappearing below the sidebar in IE. (You’d think that positioning something 3 pixels from the right edge of a box would place it at the edge of the box, not at the edge of the page. *sigh*) I tried placing them to the left, which is going to look a bit odd until I set up a placeholder, and that almost worked… except IE insisted on measuring from the inside of the padding (essentially the internal margin, for those non-CSS-familiar folks) instead of from the edge of the box. I finally kept that with a very simple hack:

.gravatar {left: -83px;}
p>.gravatar {left: 3px;}

The first line just applies to anything assigned the class of “gravatar” and is recognized by everything. The second line only applies if it’s just inside a paragraph, and is recognized by everything modern except IE. And the Cascading part of Cascading Style Sheets means that it just uses the latest one it finds, so everything’s good!

3 thoughts on “Gravatars

  1. Andrea

    Ah, the fun of IE. I just had to use the box model hack for my new AWoT redesign for this same reason. First I get all excited about standards-based design, and then I have to “enjoy” all the fun parts of the job that aren’t actually standards compliant. Arg.

  2. Kelson Post author

    Yeah. There are so many things you can do so easily using full-up (X)HTML and CSS, but you run into lack of support — or worse, outright bugs like this one — in the world’s most popular browser. I found a couple of links recently that sum it up: Side-stepping IE (Mezzoblue) and The IE Factor (Stopdesign). They were mentioned in comments on some article I was reading at work a few days ago, and I sent myself the links, but I can’t remember what the article was.

  3. Pingback: Avatars! | K-Squared Ramblings

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.