What are the top three or four CSS "gotchas"? At the end of Chapter 1 in my book, Pro CSS and HTML Design
Patterns, I have a section on Troubleshooting CSS. It lists 12 CSS gotchas. Here are my top three.
Gotcha number 1: invalid XHTML. It is the top culprit because CSS selectors choose which elements to style based on XHTML structure. Invalid XHTML structure causes some elements not to be styled or can actually style the wrong elements. This can be very subtle and can really cause you to pull out your hair.
Gotcha number 2: invalid CSS. It is the second top culprit because CSS requires browsers to ignore errors on individual properties. Thus, it is very easy to have a typo on a property that causes the browser to ignore it. This is very hard to track down unless you use a tool like the error console in FireFox. The easiest way to prevent this type of problem is to validate your CSS.
Gotcha number 3: incorrect CSS selectors. It is easy to have a typo in a selector that causes it to select no element or to select the wrong element or to select too many elements. To solve the problem, you can add a blatantly obvious CSS property to the selector in question so you can see exactly what the selector is selecting. For example you could assign border:10px solid red; to the selector so that each selected element is surrounded by a fat red box.
For the rest of these troubleshooting tips you can get my book at
http://www.apress.com/book/view/1590598040 
