How to fix IE font huge size in GWT

Question

Hello there,

I am using a standard GWT CSS + my own CSS file with font size set to 80%. It works in all browsers except IE where the font is huge.. HUGE would be more like it. :-)

Here is my CSS declaration:

  body,html {
    font-family: Arial, sans-serif;
    font-size: 80%;
  }

How can I achieve this so IE complies?

Daniel

Answer 1

font-size: 80% !important;

This would be one way that would likely work, but it isn't really addressing the root of the problem. What does the GWT CSS look like?

I am guessing you are having a CSS conflict somewhere. Your CSS rule as indicated above, doesn't have as much weight as a rule within the GWT CSS. Take a look at this site: http://css-tricks.com/specifics-on-css-specificity/

This is a pretty good article that can help to clear up the root cause of some CSS conflicts. The formula that this site talks about really opened my eyes when I first discovered it (the formula, not the article).

Basically, you add up a "score" for each rule in your CSS. The rule with the highest score wins and gets to style the element.

• Each ID is worth 100
• Each CLASS is worth 10

• Each ELEMENT is worth 1

  html body{font-size: 80%;} /* worth 2 */
  body{font-size: 70%;} /* worth 1 */
  body#body-id{font-size: 50%;} /* worth 101 */
  body.body-class{font-size: 90%;} /* worth 11 */
  #body-id{font-size: 60%;} /* worth 100 */
  

The font-size of the body would be 50%.

Answer 2

From W3Schools:

The solution that works in all browsers, is to set a default font-size in percent for the body element:

body {font-size:100%}
h1 {font-size:2.5em}
h2 {font-size:1.875em}
p {font-size:0.875em}

Our code now works great! It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!

In other words, set the body font-size to a percent, as you have, but then set its internal elements' font-sizes to specific quantities, using ems as your units. This will fix multiple IE problems, including the one you are experiencing as well as one that occurs when zooming in and out.

Answer 3

I would suggest taking the generated css file for whatever theme you are using for GWT and creating a copy that you reference yourself.

You'll have greater control over the layout of the pages without resorting to using !important on a secondary style sheet.