Css font-size:62.5% not maintaining div´s with on IE7/8

HTML & CSS
1

Hi there,

I´m new to this forum, and don´t know if you have discussed about this problem (sorry about my english, I´m not native):

I´ll try to explain it:

I have a background-image sized 995px width to fit in a div.
If I code with px, the image renders equal in all browers but If I change the body font-size:62.5% and fit the image in a div styled 99.5em width, the image crops in IE7/IE8.
But If I set the body font-size:100% and fit the image in a div styled 62.19em width, I can see the image perfecty fitted in all browsers.

I use a lot the 62.5% rule so that I can code xthml/css quickly as 1px is converted more or less into 0.1em. So the design is easily divided into pixeles and converted to ems so what we can comply with accessibility compliances and xhtml standards.

Does anyone observed the same “crop” efect? Is it related with the ie box model? or it has to do with how IE smooths the fonts?
If it is the same conversion why with 62.5% doesn´t work?

Thanking you in advance,

Here is the css code used for the example

/* 
=Reset -------------*/
ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,address,fieldset,input,table,th,td{ margin:0; padding:0;}
ul,ol { list-style:none;}
a{outline:none;}
a:link,a:visited { text-decoration:none;}
a img,:link img,:visited img { border:none;}
a:hover,a:focus{text-decoration:underline;}

body {font-size:62.5%;font-family:"Arial",Geneva, Helvetica, sans-serif; color:#1a1a1a;}

#webcontainer { width:99.5em; margin:0 auto;}
#header { position:relative; float:left; width:100%; background-color:#Ccc; height:4em;}
#navbar { position:relative; float:left; width:100%; background-image:url(fond_botonera.jpg); background-repeat:no-repeat; background-position:top left; width:100%; height:2.9em;}

and here the html code


<body>
<div id="webcontainer">
<div id="header"></div>
<div id="navbar"></div>
</div>
</body>
2

Hi,

The main mistake is thinking that there will be a relationship between a fixed pixel width element and an element sized in ems:)

You never know what the default size of the text is because the user may have changed it and very many do change it.

Therefore you need a strategy that avoids these issues. Don’t try and match images to em sized elements in the first place or perhaps instead use a larger background image that can cater for variances without undue problems.

Or you could size the foreground image to be 100% wide and then it would adjust for the few pixel differences.

Apart from the above IE is always out with em sizes especially when compounding as in your example.

You can get a more consistent width using this approach.


body {
  [B]  font-size:100%;[/B]
    font-family:sans-serif;
    color:#1a1a1a;
}
#webcontainer {
   [B] width:59.68em;[/B]
    margin:0 auto;
}

I tend not to use percentage sizes on the parent at all but to apply them to the inner elements themselves. This avoids compounding in most cases and leaves your outer elements at a consistent size cross brows (assuming browser defaults are the same).

The body 62.5% was always a flawed concept from the start.:slight_smile:

3

Hi Paul,

Thank you very much for your answer. I´m really amazed about the body 62.5% being a flawed concept from the start.

I attend some css avanced course and they explained as the perfect method and in lot´s of website is being used nowadays. I used to divide the image for and elastic layout so I never discovered the crop effect till I have to put the exact sized image in a fixed width (you know, those with rounded edges on left and right side).

Setting the font-size to 100% it get´s more tedious to develop the website as front-developer so we have to use a em calculator or similar resources to macht the value from the psd (px) to ems. Maybe that´s the wrong start, easier fot he developers but in detriment of the layout rendering.

Quite interesting fact though since the WCAG 1.0 point 3.4 Use relative rather than absolute units in markup language attribute values and style sheet property values realease this 62.5% became quite famous.

Thanks again for your answer it´s been really helpful.

4

Not nowadays. It was popular several years ago when most screen resolutions were set to match that percentage but since mobile devices and flat screen monitors have become popular very few now use the resolution that 62.5% assumed. It only worked in the first place because the required screen resolution for it to work was very popular at the time people started using it.

5

Hi, Welcome to Sitepoint by the way :slight_smile:

The basic flaw is two fold in that at first it disrespects the users default settings and secondly it incorrectly assumes that all browsers are equal.

The 62.5% convention gained momentum because it was relatively easy from the designers point of view to understand and apply but did not really take into account what the user may want. It was a mathematical solution to satisfy the designers needs to work in pixels without much thought about the visitor.

It also evolved at a time when ems were not used much for widths and was therefore untested in real situations. The designers were basically looking at turning ems into pixels and not using ems as ems.

Also by reducing the font-size so small the first thing you have to do is then increase it so that someone can actually read it and by doing so you again compound the rounding errors causing the effect that you are noticing now.

If you leave the default at 100% you can size your containers consistently and if you need to change the size of a p element or a heading then you apply the size to those element directly and not the parent.

Setting the font-size to 100% it get´s more tedious to develop the website as front-developer so we have to use a em calculator or similar resources to macht the value from the psd (px) to ems.

Again, this is the designer trying to enforce a their printed page view of the world on the visitor. A web page isn’t like a piece of paper - it doesn’t have edges to it - it comes in different sizes and arrives via different devices.

When you design a webpage you have to design knowing that what you see on your screen is unlikely to be the same that others may be seeing and code accordingly. (e.g. menus may not fit all on one line or headings may wrap.)

You just have to work to a best fit and use techniques and strategies that will allow menus to wrap and containers to grow and shrink. Things don’t have to look exactly the same in all browsers and to be honest they never have.

There are many similar threads on Sitepoint about the 625% method saying much the same things.

Hope that helps :slight_smile:

6

I’m still at it CSSing my table site. I just did font size 100% on the body and and simply gave each other needed size a % value. No ems at all. It was/is easy and worked nice.