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:

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)

Jeroen – typo corrected. It was an error on my part getting the article ready for publication. Thanks for pointing it out!

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.

Nice idea! Keep the notes around somewhere once removed though. They’ll be useful to maintainers in the future.

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.

Thanks, Andy, now I can’t get this song out of my head :-)

Still, thanks for sharing this great technique!

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!

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

Nice!

The Safari bug can be fixed by adding “display:block” to the “ol#notes blockquote:before” rule.

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 ;)

I wonder how many people got The Specials pun in the headline? How many SEOs are true ska fans? Not many. Hup hup pick-it-up

Ah yes, good point; I hadn’t thought of that, Drew. That’ll teach me to stop lurking and trying to be clever…

Why not use Andy Budd’s technique for the rounded corners

Be nice too most of the browsers that are being nice to us ;)

I just thought the actual quotes were hilarious :-)

I think I’d use TextMate’s “Persistent Includes” for this, to keep the actual messages in a separate file.

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.

Great idea. I use subversion for development so I’ve created a quick little PHP script to convert a file’s subversion log into notes as described above.

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

According to the spec, the only allowed value for the cite attribute is a URI of the originating document or text that’s being quoted, which spoils this otherwise really nice tutorial.