Skip to content

24 ways to impress your friends

A Message To You, Rudy - CSS Production Notes


Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

Nick Fitzsimons

Very nice technique. One potential issue is that scrolling the page makes the notes inaccessible; using “position: fixed;” instead of “position: absolute;” in the rules for ol#notes keeps them available whatever the vertical position of the page.

Nick Toye

Good idea would certainly help explain to non css people what I am doing or how I am doing it.

There seems to be a bug though in Safari, the names appear twice once you start scrolling. It will say:

Andy said:
Andy said:

Jeroen Zaalberg

Well, what can I say. Looks fancy but don’t know if it’s gonna work in real life, scrolling back and forth through the source code.

On the other hand it’s nice to see something very different, especially using the tools that you’re normally use at their best purpose for your client but now in strict compliance for yourself, too .

But isn’t there a typo with the blockquote (which, also, to my limited knowledge should have a in it for text, to be strict): In the 8th code-block the opening tag of the blockquote isn’t closed properly and has a – element in it.

Thanks for the fresh idea!

Jeroen Zaalberg

(and I hope to pick up your book, which looks great, in the near future)

Christian Ready

This is really impressive work, and I can see how having that, coupled with a dynamic form entry would allow a team to easily add notes during the project’s development. What I think could get tricky, though, is trying to dynamically figure out how many pixels the notes stack should be moved up in order to get it out of the way of the page.

Gordon Burnett

This looks great and works well in Firefox, etc. But doesn’t seem to work at all in IE, the notes wont pop down and the scrollbar on the main page doesn’t work.

I’m guessing this is to do with the way IE handles the hover and z-index classes, not a huge issue but be nice to have it working across all browsers as in the real world it may be used so a contact at the client’s office, etc could leave notes on how they feel the project is progressing. Anyone know if it’s possible to get it working?

Great article though, most interesting to me so far.


Hi Gordon,

I’m assuming that a great many CSS designers and developers will be using Firefox (or similar) as their development browser, and so there was no attempt to make this work in Internet Explorer 6.


Very nice. And might even be useful. But it’s certainly cool to see something like this done with css. Your book just arrived this week Andy, it’s beautiful!

Drew McLellan

Francis – the examples give valid URIs as values for cite. For instance, if your document lived at, a cite value of ‘andy’ would resolve to


Drew’s right (as usual). If you wanted to, you could include the URL of that person’s web site and use attribute selectors to bind the cite to the style rules, but as this is generally a technique that is used internally, that might be a little over zealous ;)

Nate K

Looks like a very nice technique. I personally don’t have a use for it at this point, but I am sure this could help many people out there trying to manage projects. I like that it keeps everything central. Now, integrate it with basecamp and there will be a 2 way connection and the ease will still be there (just a far thought).

Seriously, I love the work just for its innovation.


You can rock this is Safari etc too with -webkit-border-raius: #px; just in case you have beef with FireFox or something, all the other properties mentioned would work on there as well. That property should work in all of the Webkit based browsers just like moz

Impress us

Be friendly / use Textile