Warning: Geek Rant!

As I may have mentioned before, this blog is an interim site where I can experiment with different CSS, layouts, and formatting before I code and publish my “final” blog. I may have also mentioned that I am a big fan of Firefox and only use IE when testing sites that I have created for compatablility. That’s why I never noticed that my banner image was all fu*ked up when viewed in IE!

I probably spent at least four solid hours today trying to figure out why IE displayed gaps beneath all of my banner images while good ole’ Firefox displayed everything perfectly (as it should be). After fiddling around with margins, padding, alignments, baselines, relative and absolute positions, and table properties, I finally found that the big bad culprit lied not within the CSS tags, but in the formatting of my CSS! You know those meaningless spaces that are used to make code more readable? Of course you do! Well IE doesn’t quite understand this concept. So I found that, instead of easy-to-read code like this:

<table>
<tr>
<td><img src="banner_01.jpg">Hello!
</td>
</tr>
</table>

lumping everything together in an ugly mess like this works:

<table><tr><td><img src="banner_01.jpg">Hello!</td></tr></table>

But then, after a little more goofing and googling, I found that it was only the <td>’s that had to be on the same line. So… I was able to use cleaner code that now looked like this:

<table>
<tr>
<td><img src="banner_01.jpg">Hello!</td>
</tr>
</table>

All that work for a stupid little <td> tag! Well, it’s all fixed now and should work correctly. Hopefully Microsoft will wake up and smell the coffee. But seeing as how this problem has been around since before 1997 and they’re already up to version 6 of their crappy little browser, I doubt they’ll change their ways any time soon. Oh well. You learn something new everyday.