Drawing Blanks

Premature Optimization is a Prerequisite for Success

HTML standards WTF

leave a comment »

<html>
<head>
    <title></title>
    <style type="text/css">
        .box
        {
            padding: 2px 2px 2px 2px;
            border: solid 1px #7aa0c0;
            margin: 2px 0x 6px 2px;
        }
    </style>
</head>
<body>
    <div class="box">Lorem</div>
    <div class="box">ipsum</div>
    <div class="box">dolor</div>
</body>
</html>

 

Try this html in IE – you’ll see the Expected Result. Try it in Firefox – no margins. “Don’t you know that FF collapses margins because the Standard allows to interpret itself in this way, and collapsing margins are in fact awesome?”. Blah-blah-blah! Of course I know that. But you should have read the code carefully – look, the boxes have borders. And padding too. And margins aren’t supposed to collapse if there are borders or padding. Your creative interpretation of Standards is not supposed to cross those borders!

So WTF is going on?

First of all, “web standard” is an anagram of "trend was bad"

Well I made a simple typo in the CSS: the 0x in the margin style instead of 0px.

I’ll tell you more: add the XHTML 1.0 Transitional doctype to this html, and IE will not render the margin too.

Gosh, I like Expected Results and I dislike the Standards.

Advertisements

Written by bbzippo

08/12/2010 at 4:21 am

Posted in programming

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: