Search code examples
htmlcsscross-browserfont-size

Using em for layout causes inconsistency across different browsers

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.

Here is my HTML and CSS

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;}

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

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 pxinstead of em?

Solution

  • 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;
}