Using em for layout causes inconsistency across different browsers

Question

I am trying to build a site using elastic layout. I have used Eric Meyer's CSS reset and also used body {font-size:62.5%} in my stylesheet.

EDIT: Here is my HTML structure and CSS

<html> <head> </head> <body> <div id="container"> <div id="gallery"> </div> <div id="other"> </div> </div> <div id="footer"> </div> </body> </html>

` html {bacgroound:url() no-repeat top center fixed;}

body {font-family:Arial, Helvetica, sans-serif;
color:#000;
margin:auto;}

'id'other {background-color:color1;}  

'id'footer {background-color:color2;}

`

As you can see, if I set a fixed width for the body , the background for #other and #footer remain fixed. So I tried to get around it by setting the width to 100% and using margin: 0 8em 0 8em to center the gallery and the contents of #other and #footer .

The layout I am trying to achieve is basically a one-column layout containing a gallery of pictures. The whole gallery should be centered in the page. I have used em for defining margin and this causes different results in different browsers. If the gallery is centered in one browser, other browsers show a different result. I have tried Firefox, Chrome, and IE9.

Is there any way to produce identical layouts using em as the unit of measurement? Or should I try a fixed layout and use px instead of em ?

Answer 1

Keep em or percentanges. They do work .

However, using them for centering is probably part of your issue. Centering should be done with auto , for example:

div.page {
  margin: 0 auto;
  width: 925px;
}

Answer 2

Your inconsistency is a combination of things. Defining your body {font-size: 62.5%} is telling the browser to display the font at 62.5% of its base font-size setting (which is both user controlled and even variable per font). Then, using em later in the css cascade is again applying a scaling factor based upon the size of font as just defined (that scaling is harder to define: see http://webdesign.about.com/od/fonts/qt/em-origins.htm ). So a browser font set to 14px will become 8.75px (14 * .625) which (for sake of illustration) at 2em theoretically might be 17.5px (8.75 * 2). If the browser had a default 16px font, then the two numbers would be 10px and theoretically 20px .

So, to help with inconsistency in using em units, setting a px value and a universally recognizable font on the body tag (either standard web fonts or perhaps by @font-face ) would help standardize em unit values lower in the css cascade.

Jason McCreary's answer is good if you have a "fixed width" container, but if you want to "fix the margin size" then your current idea of setting a px or em unit for your margins is just fine for centering.

Using em for layout causes inconsistency across different browsers

Question

2 answers

solution1
3 ACCPTED 2011-12-30 15:23:15

solution2
2 2011-12-30 15:47:40

Using em for layout causes inconsistency across different browsers

Question

2 answers

solution1 3 ACCPTED 2011-12-30 15:23:15

solution2 2 2011-12-30 15:47:40

solution1
3 ACCPTED 2011-12-30 15:23:15

solution2
2 2011-12-30 15:47:40