CSS padding issues in IE and Chrome_问答_开发者

开发者 https://www.devze.com 2023-03-16 19:02 出处：网络

Please check out the following http://healthfacilitiesgroup.com/pm/phaseinfo.php in IE and in Chrome. I want the site to be 8.5in wide with 1in \"margin\" on either side (meaning 6.5in wide paragraphs

Please check out the following http://healthfacilitiesgroup.com/pm/phaseinfo.php in IE and in Chrome. I want the site to be 8.5in wide with 1in "margin" on either side (meaning 6.5in wide paragraphs etc.). I thought the way to do this was a div that was 8.5in wide and 1in padding. That's how the CSS is set up but for some reason IE and Chrome handle this totally differently. I'm less than novice to html, so thanks开发者_StackOverflow for anything.

You don't have a doctype, so your site is rendering in Quirks Mode. Quirks Mode + IE = hopeless.

You can escape Quirks Mode and achieve consistency simply by adding this as the very first line:

<!DOCTYPE html>

That's the HTML5 doctype, and it will trigger Standards Mode.

Because screen resolutions differ, it is difficult to get the same amount (1 inch) of margin on either side of your centered design.

Instead of designing in inches, it is better for you to design in percentages. This will give you a more consistent look that will expand or contract depending on the screen resolution of the user.

For instance, you might consider setting your main div to 80% and then giving it an automatic margin, which would fill up the other space. Something like...

div#main{width:80%, margin:0 auto;}

The first figure 0 sets the margin from the top and bottom and the auto configures it to match the sides.

Padding, by the way, deals with space inside the element. See more here: http://www.goer.org/HTML/intermediate/margins_and_padding/