SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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
    Code CSS:
    /* 
    =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
    Code HTML4Strict:
    <body>
    <div id="webcontainer">
    <div id="header"></div>
    <div id="navbar"></div>
    </div>
    </body>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    body {
        font-size:100%;
        font-family:sans-serif;
        color:#1a1a1a;
    }
    #webcontainer {
        width:59.68em;
        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.

  3. #3
    SitePoint Member
    Join Date
    Mar 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,803
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by kickdog View Post
    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.
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint by the way

    Quote Originally Posted by kickdog View Post
    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).
    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

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •