Internet Explorer’s Selective Understanding of CSS

I've decided to take a gamble and Windows Update into SP2 and beyond again. I've done it a number of times in the past, to disastrous results (a system that's flaky even by Microsoft standards, crashing every few hours). I've been living at pre-SP2 for a long time, with a machine that crashes only every few days, but lately it's gotten worse. I made the mistake of using IE to see something that didn't seem to work in Firefox, and I wonder if I picked up something bad, because the machine seemed much more flaky after that.

So, I did a full Windows Update (having to reboot a miraculously-little three times), upgrade to IE7, and ran Microsoft's anti-spyware Windows Defender. It didn't find anything amiss, and I haven't crashed in the 8 hours since, so maybe things are okay this time? I won't hold my breath, though.

Anyway, so now I'm preparing a web post with more fall foliage pics from my trip yesterday, and in testing with IE7, I realize that if you don't have a <DOCTYPE> declaration, it doesn't understand some CSS, but oddly, does understand some. Specifically, I noticed that it doesn't understand padding ascribed to an image, but does understand margin. This seems..... odd.

Here's a test that should look fine on this page, because it has a DOCTYPE:

(See this blog post for information about this CSS test)

Three images with red borders, each within its own green-background div: the only difference among them is that the center image has a margin, and the right-most has padding (the left-most has neither).

In upper-left——— Should be Centered ———
no margin/padding margin:20px padding:20px

If both margin and padding are understood, the image should be centered within the center and left-most green boxes.

However, if you view it on a standalone page without a DOCTYPE, it suddenly no longer recognizes the padding, so the right-most image is no longer centered within its div.

The solution is to include a DOCTYPE for all pages, such as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

But this just seems silly to me, and of course, Firefox and Safari don't have such a selective understanding of CSS.

Sigh.


One comment so far...

The DOCTYPE thingy is what disables the automatic bug emulation mode that Internet Explorer uses for backwards compatibility.

— comment by Peter Lund on March 31st, 2007 at 10:52pm JST (10 years, 8 months ago) comment permalink
Leave a comment...


All comments are invisible to others until Jeffrey approves them.

Please mention what part of the world you're writing from, if you don't mind. It's always interesting to see where people are visiting from.


You can use basic HTML; be sure to close tags properly.

Subscribe without commenting