#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    3
    Rep Power
    0

    Font size problem in Opera - fonts are huge for no reason! Halp!


    Hi guys,

    I'm working on a layout for a client, and I've run into a problem I've never seen before. My code is fully valid CSS (except for the *html IE fixes) and fully valid transitional XHTML, and it works fine in FF, IE and even Safari - but as soon as I load it up in Opera, it breaks completely. The font size is absolutely HUGE for some reason (like 400% of normal!), and it is completely breaking my layout.

    I have no idea why this would be happening, and it's immensely annoying. I'm setting all of the font sizes throughout the page in ems, and at the start of the css I declare the following:

    Code:
    html, body {
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    	font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
    	background-color: #000000;
    	}
    Now this should be fine, and indeed it works in every other browser.. but Opera is wigging the hell out, and I don't know what's wrong. Has anybody ever experienced anything like this? If so, please let me know!

    I'm hesitant to post the full code because it's covered by a hefty NDA, but I can strip out confidential bits if needed.

    Thanks everyone!
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, Unwashed.

    We'll need to see more of your code to be able to diagnose that.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    3
    Rep Power
    0
    Actually! I've just fixed it, while paring the CSS back so I could legally post it here. I'll describe the fix.

    Basically, it turns out that Opera interprets the:

    Code:
    html, body {
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    	font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
    	background-color: #000000;
    	}
    section differently to other browsers. It resets the font for the html object and then resets it again for the body object, resulting in wacko font sizes. The correct declaration would be:

    Code:
    html {
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    	font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
    	}
    
    body {
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    	font-size: 1.1em;
    	}
    So the body is set to what is effectively 11px, at 1.1em.

    This doesn't really answer the mystery of why Opera was displaying it bigger than normal. I'd have thought it would be smaller, much smaller, but still a solution is a solution. I hope this helps out somebody else if they have the same problem!

    Of course, now I have to go rejig my whole layout, but that's the least of worries.
  6. #4
  7. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1227
    You have reduced the font-size twice.
    So the body font-size is just 62.5% the size of html.

    html = 10px
    body = 6px

    This give you problems in Opera since it has a default minimum font-size of 9px which is larger than the font-size you have declared.

    If you want to reset the font-size, just reset it once.

    Code:
    html, body {
    	height: 100%;
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    	background-color: #000000;
    	}
    
    body  {
    	font: 62.5% Tahoma, Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
    }

    Comments on this post

    • Unwashed agrees : Very helpful!
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2008
    Posts
    3
    Rep Power
    0
    I didn't know about the minimum 9px size. That's very helpful, thanks Akh!

IMN logo majestic logo threadwatch logo seochat tools logo