Bad manners, I agree. I was looking to see if I could delete that thread because I thought this was a better place as well.
So this is about the <a> tag being inline for sure. When I add display:block to the rule I see that they do not collide, but now I would have to set the width statically. That's not what I was looking for.
Your suggestion works for the case that everything in the list was going to be about the same height, but I am not sure of that either.
Do you know where this behavior is documented? I would like to get a better understanding of the different display types and how they are contained inside their ancestor elements. What I am building is more academic anyway so the final result isn't as important to me as understanding what is going on here.
It appears that what I was looking for was to set the <a> elements to display:inline-block. This achieved exactly what I was looking for (in webkit at least).
This page is very helpful in understanding the concepts http://www.quirksmode.org/css/display.html