Warning: geeky web content below! Proceed with caution.
Anybody who builds websites knows that different browsers render websites differently. Most web designers will also agree that Internet Explorer 6 was a horrible at rendering websites correctly. Thankfully Microsoft fixed most of the IE6 bugs in version 7, but not everyone that was using IE6 has moved over to IE7. So, I’m stuck with the task of creating a website the way that it is supposed to be done, and then changing what I have to so IE6 will display it properly (or as close as possible).
This afternoon I was checking a new website in IE6 and everything was moving along nicely until I got to one particular page that had a random character at the end of one line of text. I checked my HTML and PHP and I couldn’t find the character in the code anywhere. It was like it just appeared out of nowhere.
So, I searched the interwebs and found out about the IE6 ghost text bug (ooh, spooky). This seemed like a similar symptom to what I was facing since it appeared as characters from nowhere, but I didn’t have any HTML comments between floats (the most common trigger). So I kept searching but only found more articles about this same bug no matter how I described my problem. I thought, “Maybe this is the right solution after all.” So I started messing with the CSS.
I was using a list (ul) and each list item (li) contained a header (h3) and image (img) and a definition list (dl). So, I had a few tags to mess with to try to find the problem. I floated things, I un-floated things, I made sure everything had layout… nothing worked. And then I read something online that mentioned one cause of the ghost text bug being whitespace. The space between HTML tags.
You see, whitespace isn’t supposed to matter in HTML. Browsers are supposed to only pay attention to the stuff inside the tags (or tag pairs) and not the space in-between them. Keyword: supposed. IE6 apparently does not conform to these “standards” and chooses to do wacky things if it finds space between certain tags like repeating random characters in strange places. Who knew?
The solution: take out the whitespace (in this case a new-line character) between my definition term (dt) and definition definition (dd). And it’s fixed. Lesson learned: burn all copies of Microsoft Internet Explorer 6… or just keep down the whitespace in HTML.