SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Opera and font sizing in ems

    He guys,

    I have read a million and one books in the course of my learning web dev that advise you that sizing fonts in ems is often the best option and in this instance , I opted to do so in order to prevent IE7 from over-sizing the fonts (a well known bug when certain types and combos of positioning are used).

    I was gutted to see that opera has over-sized everything which looks so nice on all of the other browsers. My style sheet is huge and it took me an hour to change all of the font sizes (its a large CMS), can anyone explain to me what has happened and what I can do other than changing them back to px and using the old * + html rule to get IE to behave?

    thanks
    "Persistence is the path to perfection"

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    First – are you sure that Opera isn't doing exactly what you've told it to? Check your default text size in Opera and in IE/others. It might be that for some reason it's set to be larger in Opera, in which case you're getting exactly the right outcome.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    What Stevie said would be my guess also. If opera is more than 1 pixel different then its either a browser setting or you have a bug in the stylesheet that is tripping Opera up.

    The bug you mention in IE7 is actually caused by setting the body size in ems instead of using percent (they are exactly the same thing as far as font-size is concerned so should make no difference). When ems are used on the body element (e.g body {font-size:1em}) then when the user increases the text size via the browser controls the page scales at too much of a rate. If you use font-size:100% on the body instead then the page will scale at a more normal progression.

    There aren't any other (main) font size bugs in IE that I can remember.

  4. #4
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey there,

    Well I fixed it by changing the font-size on the body element from ems to px. Now everything is adjusting with respect to that. Can you explain why to me, I didn't understand your first explanation, I am a bit thick LOL.

    Also the IE7 bug I am referring to is this:

    Nope, it's an IE bug. If you have a high-res screen, the tendency is to
    adjust the desktop fonts to give a usable size through the control
    panel. IE then applies this correction factor for a second time, making
    the "100% of default" font size actually larger than the desktop fonts.

    There's no fix for it, as there's no way (AFAIK) to read the desktop
    setting from within the browser. Best fix is an IE-only conditional
    comment and setting the default size to 80% rather than 100%. That's a
    compromise, but it's better on average than 100%.
    "Persistence is the path to perfection"

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    Hey there,
    Well I fixed it by changing the font-size on the body element from ems to px. Now everything is adjusting with respect to that. Can you explain why to me, I didn't understand your first explanation, I am a bit thick LOL.
    You'll have to give us the code you were using or a link to diagnose the problem as you should not need to revert to pixels and indeed is a bad accessibility move. The problem is either in the default settings for Opera where you have specified a larger base text size or you have a bug in the css. If other browsers are showing OK then it would seem that you have set Opera to a larger base font-size by default

    Also the IE7 bug I am referring to is this:
    I should not worry about that and indeed if you cater for it you will alienate far more than you fix. If users have adjusted their fonts through the control panel then they will expect larger or different sizes so leave them alone and let them live with whatever they have set up.

  6. #6
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, Well me site is here, the main stylesheet is stylesheet.css, it is well commented and although the site is unfinished, it should be easy for you to find out what is going on, I appreciate it thanks:

    http://www.wavemobilephones.com/inde...te=common/home
    "Persistence is the path to perfection"

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If I remove this rule:
    Code:
    body, td, th, input, textarea, select, a 
    {
    font-size:12px;
    }
    And then just add this rule:

    Code:
    body{
    font-size:75%;
    }
    Then I see no difference in Opera at all.

    You may have to set the odd form elements font-size as older IE doesn't inherit properly into some form elements but nothing really to worry about.

  8. #8
    SitePoint Evangelist silversurfer5150's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    Thanks for your help again Paul, sorry I had already changed the body rule back to px by the time you looked at it.

    I know what my mistake was, I set body { font-size:0.9em } at the same time as changing all the other font sizes to ems, this was confusing Opera which was probably reverting to the default font-size: 16px making em font sizes relative to this which looks quite large. As soon as I made the body font-size:11px, everything was relative to that and was fine.

    With regard to the other IE bug, I have had this convo with you before about certain elements looking larger. Could you refresh my memory as to exactly when IE may behave in this way because I have noticed this behavior particularly when I have lots of floats containing other floats. Unfortunately, as I mentioned already, I have set everything in ems (except body) and that particular bug isn't present in my site anymore.

    I don't know what I am doing wrong but I often have to do things like font-size:1em and then set a * + hmtl rule with a smaller font size. I appreciate that this is a bug that shouldn't really be bothering me but I am so curious as to why.
    "Persistence is the path to perfection"

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by silversurfer5150 View Post
    Hi there,

    Thanks for your help again Paul, sorry I had already changed the body rule back to px by the time you looked at it.

    I know what my mistake was, I set body { font-size:0.9em } at the same time as changing all the other font sizes to ems, this was confusing Opera which was probably reverting to the default font-size: 16px making em font sizes relative to this which looks quite large. As soon as I made the body font-size:11px, everything was relative to that and was fine.
    It won't be fine for millions of short sighted users who want the default larger text size that you just robbed them of

    Once you set the body in pixels you break the web. It's not such a big deal these days with browser zoom and the like but a lot of people will still get hot under the collar at that approach. Just set the body size in percent and you will be fine (don't use ems for the body element and you avoid the browser resizing bug I mentioned above). There is no need to offer ie7 alternative sizes if you do it right while at the moment you seem to be fighting imaginary perceived ie7 font bugs as there aren't really any to worry about.

    I think your issues are related to compound issues and if you do something naughty like this.

    Code:
    body,p div, a{font-size:80%}
    Then you will never know what the font-size is going to be because every time one of those elements is nested inside another element the font-size is compounded and you end up with a size that is 80% of 80% of 80% of 80% and so on.....

    When using ems/percent use them sparingly and carefully target the elements you need.

    Set your body to the size that most of the text on the page needs to be:

    e.g.body{85%}

    Then all you need to is set up rules for any that are different but don't apply it to elements that may be nested.

    If you need to apply it to an element that contains nested elements of the same type then you can do something like this:

    ul.drop{font-size:75%}
    ul.drop ul{font-size:100%}

    Just keep it simple and don't keep changing sizes


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
  •