I have a very embarrassing story. It is about 2 e-mails I got today. The first one came right in the morning and it was from one of my website readers. He reported to me that my homepage was all messy at IE 7. At first I didn’t care too much (“oh damn, IE always cracks down”). I am usually happy enough when I see it working on both Firefox and Safari – the rationale being: “if it works in Safari, should work in IE 7”

So I just let it go. Now the ugly part comes on the second e-mail I got tonight, from my boss, Carl. He reported that he was talking to a possible client and decided to proudly show off my website. Surely enough, the client fired up IE 7 and boom! Embarrassment! To Carl’s surprise, my website rendered completely broken and unusable at this client’s web browser! I can imagine the situation. And he tried to amend the situation saying: “but I can assure you he knows XHTML and CSS …”

Damn! I am not expert web designer but I know a trick or two about well formatted XHTML and CSS. So I fired up the W3C’s XHTML and CSS validators. 100 XHTML errors and 2 CSS errors! UGLY!

Ok, this is no good. Let’s fix it. Fortunately the validator gives up good clues on what was wrong. So let me tell you, almost all of my errors were from these elements:

• Facebook badge
• Twitter badge
• Rec6 (brazilian social network) badge
• Soapbox embedded video player
• Slideshare player

Seems like the validator hates them all. Ok, fortunately Facebook has an option to switch from the Javascript badge to a static image based one. Cool. Twitter was no luck. I was not in the mood to tweak it down so I just ripped it off. Same thing about Rec6. The Flash players were deferred to internal pages so they don’t break my homepage. Aside from that, there really were a few of my own mistakes, unclosed tags and so on. After all this clean up, that’s how my status looks like now:

I went down from 100 XHTML errors to Zero and from 2 CSS errors to Zero. Looks like I am ok now. But not by much. Some of the internal pages will break because they still contain the Flash-based video players. My rant is: yes I could try to tweak everything. But this is not the point: the point is that those services offers the HTML for us to just copy & paste into our websites. So why can’t they just produce XHTML-compliant tags, for God’s sake!? I will definitely not waste my time fixing their tags.

So, I won’t have Twitter or any of those embedded players at my homepage until they fix this embarrassment. We bloggers help promote their websites, so the least they should do is not break ours, for crying out loud!

Bottom line is: now my website renders perfectly well on Safari, Firefox 2 (both Mac and Windows) and IE 7. But IE 6 still doesn’t render the sidebar correctly (give it a try). Even though it is now a “perfectly” well structured XHTML and CSS, IE 6 still refuses to render correctly … oh well, IE 6 usually doesn’t render correctly anyway …

Update: Carl send me an interesting tip for Flash in this link. I put my Twitter badge back. This is not the optimal solution, though (Twitter itself should provide us a better solution). Anyway, XHTML check is passing, all good and dandy.