1. For accessibility, you shouldn’t use visibility:none (or display:none if you considered that) to hide the text here, as an element styled with visibility: hidden will not be read by screen readers (those that follow spec).

Instead, use a more robust image replacement technique. I suggest either the Phark method or Gilder/Levin - those are just the better documented names to google to find the basic techniques. I prefer G/L as it also works with CSS enabled but images are turned off.

2. While I don’t see it breaking (using FF3), your implementation of positioning also has inherent risks. An absolutely positioned element is positioned relative to its closest positioned parent. Basically, you’d want to explicitly set a positioning context by applying ‘position:relative’ to #subscription. Then the children (the positioned links) can be positioned within that parent. This method helps ensure more reliable results across browsers.

Also, you should then use the positioning declarations of “top: x” and “left: x” (where x is the offset value, say in px) rather than margins to handle that positioning. Again, I don’t necessarily see it breaking the way you have it, but top and left are meant for this so why not use them? Plus you’ve got floats and margins set on the same element, which under specific conditions cause the “double margin” bug in IE6 (did you test this there?) - while there is a fix, you avoid that issue entirely by using top and left instead of margins for positioning in this case.

3. Finally, why not use a semantically sound unordered list for these links instead of the meaningless div?

Sorry for droning on… I just like to share, b/c I know from experience how there are many different ways to use CSS to get a desired result, but some ways certainly do work better (more reliable, cross-browser) than others. HTH.