ansaurus

Question

How do I make Standards mode work as well as quirks mode?

Answer 1

+8 A:

The main difference between "Quirks" and "Standards Compliance" mode is a different "box model" which results in different ways of calculating sizes based on width/height, padding, margin and border settings. In Standard Compliance mode, the effective width and height of a box is calculated by adding all these parameters (please search the web for more details).

So, since you specify a 1px-border, your first input fields will be 302px wide (300px + 2*1px for the border left and right). The inconsistency between FF and IE you mentioned may be caused by different "default values" for the "padding" setting. I just tested your code with a DOCTYPE and no padding for the input fields -- both browsers rendered it the same way.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

Now, for the spacer images: Don't use them. You don't need them. Just use a right-margin of "3px" for the input fields for the gap.

Input.quirks {
    margin: 1px 3px 1px 0px;  /* 3px right margin */
    border: solid black 1px;
    padding: 0px;             /* so that IE and FF use the same padding */
}

Then do the math to determine the correct "width" settings so that the sum of all widths (includung padding, border and margin!) in each row are equal, for example:

300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px

Notice that "5px" consists of the 3px-right-margin and 2 times the border (1px).

There you go. If you want to use a different padding for a nicer look-and-feel, just include it in your calculations!

Ferdinand Beyer 2009-01-06 12:25:18

What can I say... I spent all of yesterday involved in problems of this nature... I followed the steps as indicated and it works PERFECTLY! Thank you so much. Is it possible that the images were causing additional problems?.. I love that they are not necessary. the code is even easier to read :D

Rory Becker 2009-01-06 12:37:12

I don't think that the images should cause additional problems. But, since you did not specify "width" and "height" attributes in the <img> tag, the browser needs to download the image before it knows how much space to save for them, likely causing the layout to "jump" on load.

Ferdinand Beyer 2009-01-06 15:09:20

Answer 2

A:

This is an excellent article on getting your DOCTYPE right:
http://www.alistapart.com/stories/doctype/

gkrogers 2009-01-24 22:05:46

Answer 3

A:

Since your problem was mostly caused by different default values in IE and Firefox, you may be interested in a Reset CSS stylesheet, which includes values for things like padding, effectively clearing the defaults for every browser so that they all render similarly.

A. Rex 2009-01-24 22:15:51

ansaurus

tags:

views:

answers:

How do I make Standards mode work as well as quirks mode?

related questions