CSS wasted me 4 hours this morning

It all started when I tried to add an item at the upper corner of my web site. And then it turned into a 3+ hours of diagnostic session.

The problem is the fact that while to page looks OK on Internet Explorer, the page was messed up in Firefox in the way that the rollover button were all behavior incorrectly. After some diagnostic I found out that the margin-top value was messed up on Firefox. After tracking eventually I found out that the way how the float and position (absolute, relative) didn't work out as I expected. On the top of that mess, I employed the trick that allows me to keep the text I styled with image on the page. It's such a mess.

Eventually I got it fixed by using span instead of using div to host the entry. It actually makes more sense for semantic point of view. I think the lesson I learned is that instead of just trial and error and hope that things look correct on the page, I should spend more time to actually understand every single CSS keywords and make sure I understand the implication of using every single one of them.