homepage Welcome to WebmasterWorld Guest from 54.197.215.146
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

This 33 message thread spans 2 pages: < < 33 ( 1 [2]     
Quirks Mode vs. Standards Mode - overview
tedster




msg:614948
 5:56 am on May 28, 2004 (gmt 0)

There's been some question (sometimes a lot of question) about what quirks mode is, and the parallel question, what standards mode is. For many web designers, these are still unknown words - so I hope we can clear some of this up and give a platform for further learning.

Up until version 6 browsers, there was a lot of non-standard rendering built into user agents. A lot of this behavior didn't conform to the W3C rendering recommendations at all, but it was what we worked with and we got very used to it.

And then came the move to standards, with Document Type Declarations (DTD) and all that. But how can new browsers handle those legacy pages all, over the web that depend on "quirky" behavior in order to look good?

That became the question, and the answer is "quirks" mode.

If a browser sees a full DTD as the FIRST element of a document, including the W3C URL for the details, then it renders the page in "standards" mode. Because standards are still relatively young, there is some variation from one browser to another, but it's usually minor.

But if a browser sees no DTD, or a partial DTD, then it goes into "quirks mode", which essentially means rendering the page the wrong way, but the way we were used to up until version 6.

What this all means in specific detail is way beyond the scope of one thread. But I thought it would be very useful to have this explanation and a set of references in one spot, to get people started out on the right foot if this is all new to them. More and more, you will see these two modes mentioned in threads.

REFERENCES

W3C Valid DTDs [w3.org]
Opera re: Quirks Mode [opera.com]
Mozilla re: Quirks Mode [mozilla.org]
Microsoft re: Quirks Mode [msdn.microsoft.com]
DTDs and FrontPage [msdn.microsoft.com]

 

DrDoc




msg:614978
 6:32 pm on Jun 9, 2004 (gmt 0)

who ever heard of padding going outside a box

It doesn't... not even according to W3C.
The box is defined by its border. Margin (as you said) separates it from other boxes. The contents reside inside the box, and are padded...

As SuzyUK so excellently describes it:


[color=800080]#############################[/color]
[color=800080]#[/color][color=008000]###########################[/color][color=800080]#[/color]
[color=800080]#[/color][color=008000]#[/color][color=ccaacc]#########################[/color][color=008000]#[/color][color=800080]#[/color]
[color=800080]#[/color][color=008000]#[/color][color=ccaacc]#[/color][color=ffffff]#######################[/color][color=ccaacc]#[/color][color=008000]#[/color][color=800080]#[/color]
[color=800080]#[/color][color=008000]#[/color][color=ccaacc]#[/color][color=ffffff]#######################[/color][color=ccaacc]#[/color][color=008000]#[/color][color=800080]#[/color]
[color=800080]#[/color][color=008000]#[/color][color=ccaacc]#########################[/color][color=008000]#[/color][color=800080]#[/color]
[color=800080]#[/color][color=008000]###########################[/color][color=800080]#[/color]
[color=800080]#############################[/color]

Gift in The Box
The white area in the center is the heart of the element, it represents the priceless gift inside the box, I'm sending a 290px wide gift this year.

The Gift is Fragile!
The priceless gift inside the box is fragile, so makes sure it's well padded. I chose to give it 20px of light pink padding.

Choose your Carton wisely...
The border represents the carton that you pack the gift in, in this instance I chose a 15px thick green carton

Get out of my space!
The margin represents the gift wrap. The thicker the wrapper the further away from the next box yours will be. So I have gone for nice violet coloured 20px thick wrap.

It all adds up.
So now your whole box is ready to go, but all those components add up. The element itself is 290px wide but with all the rest of the components added it becomes 400px wide, so your invisible box surrounding this whole element is 400px wide.


isitreal




msg:614979
 6:48 pm on Jun 9, 2004 (gmt 0)

drdoc, you're missing the point, pretty much completely. The box, what you set the width on, if you've ever seen a real shipping box, is what contains the contents, the contents are the padding and the 'gift', the thickness of the box has nothing to do with the outer dimension of the box, that's the border.

Maybe this makes sense to me because I've done real work in the real world, with real boxes, that do not follow the convoluted logic of the w3c box, but have external dimensions, that's because these boxes have to fit with other boxes in piles and stacks, the padding is what goes in the box, the external dimension of the box is not modified to adjust to the padding/box thickness, it's constant. Again, you would need to have seen a real box in the real world for this to make sense to you.

Microsoft in this case did pay attention to what real world people think and do when it comes to this model, which is why their model is reasonably intuitive and coherent. Apparently somebody at microsoft took a look at the packages they received every day and thought to themselves, ok, that makes sense. this will probably be one of the very few times you find me agreeing with the MS version of the web, but only because it's so inherently rational and coherent in terms of utility.

The w3c version asks that all layouts be fixed in advance, hardly what I'd call flexible, say you have all your divs laid out, the design is great, now client says, oh, I'd like 8 px padding instead of 6px, in the IE model that would make no difference in the layout, in the w3c model it requires a full redo of the layout, or, if you've already learned this problem from experience, requires using nested divs, primary container and sub for padding/margins, very sad state of affairs, which is what I tend to do. Same goes for borders, you should be dealing with a 200px box in the layout, not a 156px + 40px + 4px box, that's so completely stupid it's hard to see how anyone ever came to accept that, hence my conclusion that too many years, especially the crucial formative years for the human brain, spent manipulating tiny characters on a monitor, cause some type of damage to common sense, asberger syndome is merely the first public mention of this problem.

tedster




msg:614980
 2:46 am on Jun 10, 2004 (gmt 0)

This thread is straying from the topic, probably because of the phrase "standards mode".

-- IS NOT --
We are not having yet another abstract debate on whether "standards" are good, or if they are well thought out, or anything like that. There are plenty of other threads that discuss those issues.

-- IS --
Browsers today render the same exact body mark-up differently, according to whether standards mode or quirks mode is triggered BY THE DTD YOU HAVE AT THE TOP OF YOUR DOCUMENT.

The minute you use a standards mode DTD, then there are practical issues about browser rendering you also need to know about. And that's what we are discussing. The issue for this thread isn't whether the standard box model is the best it could be. We've got what we've got, and our mark-up needs to work in the real world. So you've got to know what browsers are going to do with a rule like width:200px;

-- BOX MODEL & THE 'TAN HACK' --

Standards: width rules define the width of the content only.
Quirks: width rules define the width of content + padding + border.

That difference can be nasty when your mark-up may be rendered by any variety of browsers. For me the big breakthrough was the "Tan Hack" (named after Edwardson Tan.) It works because IE, and only IE, is written as if there is a container element that is senior to html in the document hierarchy.

div {
width: 200px;
padding: 15px;
border: 5px solid black;
margin: 10px;
}

* html div { /* Tan hack */
width: 240px;
w\idth: 200px;
}

Only IE will think that this final rule makes any sense - no other browser acts as though "html" is a child of anything (that's what the '* html' means)

So, we can tell IE that the width is 240px and get the same rendering as the standards model. The last line -- with the escaped "i" -- is read by IE6 in standards mode (and by IE5 mac which never had the quirky box model in the first place) to put the width rule back to the "standard" 200px. It's a bit techie, but trust me, that's what it does and it works fine.

Much relief can be had from these few lines of CSS. Just plug in the appropriate class or id for your divs and the various browsers will cooperate.

This 33 message thread spans 2 pages: < < 33 ( 1 [2]
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved