CODEWITHSUNDEEP
htmlcsscross-browserfont-size
tayeed
tayeed

Reputation: 27

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?

Upvotes: 0

Views: 1713

Answers (2)

Jason McCreary
Jason McCreary

Reputation: 73031

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

Upvotes: 3

ScottS
ScottS

Reputation: 72281

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.

Upvotes: 2

Related Questions