Don’t forget DOCTYPE in your Blogger Templates

It took me 4 hours to figure out why there was a difference in rendered layout between Mozilla/Firefox and Internet Explorer. I chose a template for my blog from the gallery (and did some minor changes, nothing special). Then I tested it and the width of the left part (where the blog items are displayed) was always a lot smaller in IE than in Mozilla. I changed the CSS definitions (“width” property) for the div tag, but again no success.

Next, I viewed the sample of my template from the gallery. Voila, the rendered layout in IE and Mozilla was the same. Why on earth did mine break?

After some minutes of copy and paste I found the problem: the template had no DOCTYPE statement, e.g.

I didn’t know that this statement makes such a big difference in IE!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: