Touchy WordPress Tags and Fun CSS
Today I was back-filling a lot of journal entries from my old HTML-based work journal to my WordPress work weblog and I noticed that there was a serious problem with the table representation. There was a hugs gap at the top of this one table, and on another the gap was smaller. I could not, for the life of me figure out what the problem was until I glanced at the page source one time and looked at the data in the table.
I'd been focusing on the CSS and classes and such, but when I looked at the table's data, I saw that there were TD tags and not td. This may seem very innocent, but I've learned from experience that WordPress does not like the upper-case tags, and will not even recognize them. What was happening was that WordPress was putting line breaks ('br' tags) at the end of each row, and somehow that was getting turned into the large gap at the top of the table.
When I went back and made all the TD tags td, the gaps at the top of the tables were exactly the same. Then I went into the CSS for the theme I was using and made classes for the header row, and even and odd rows so that I didn't have to remember the coloring of each row. This is going to make the tables all look the same and that's a lot nicer.
Also, I learned an interesting point. In a margin: statement, you can use negative values to "encroach" on someone's space. I used this to offset what I thought was an excessive buffer at the top of the table. Works like a charm now.