Use every tool you can

I just spent a chunk of time figuring out a problem with the way the content of one of the sites I work on flows. We have theme templates, and so on, but all of a sudden the sidebars of the site were no longer sidebars, but shown at the bottom of the page, and there were a few other oddities.

We couldn't figure out anything that had been recently changed that would affect this, so I basically had to start sifting through the HTML to try to see what it could be. I suspected a missing ending div tag or similar, that would thus pull the sidebars into the main content area's div.

To solve this, I started with the Web Developer plugin in Firefox, but that wasn't leading anywhere. I checked some things in CSS Edit. I then used Web Developer's View Source with my associated editor (TextMate) and pulled up the code. The code was messy as hell (no thanks Drupal and the theme we are using), and using code folding, re-indenting and various things was going to take forever.

Next up was Dreamweaver. Voila! This is probably the third time I've used Dreamweaver in my life, but I opened up the source for the page in it, and turned on it's ability to "Highlight Invalid Code". Immediately it showed two div tags that did not have closing tags. Just as I suspected! Now, how to figure out what code within that was eating the ending div (i.e. that itself did not have ending div's, because I could see that the matching ending div for these particular two divs was there (I'd edited the theme to put in comments showing the matching ending divs).

Now it was back to TextMate to manually look at the enclosed HTML. This was tedious for sure, but after some time, I found what looked like some missing closing div's. I identified which blog entry it was in, went to the site and looked at the content for that blog entry, and voila, wacky use of divs! This appeared to have been remnants from some kind of formatting the TinyMCE WYSYWYG editor had been doing. Thankfully we've bailed on TinyMCE and are now using FCKeditor which appears to work much better so far.

Anyway, wrapping up, I fixed up the two blog entries that had these weird div uses, and voila, that fixed the site layout! For me at least, I found a new useful tool, which is Dreamweaver, or specifically Dreamweaver's "Highlight Invalid Code" feature.