CODEWITHSUNDEEP
cssgwt
supercobra
supercobra

Reputation: 16272

How to fix IE font huge size in GWT

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

Upvotes: 1

Views: 1415

Answers (3)

bdorry
bdorry

Reputation: 978

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.

Upvotes: 0

Bart
Bart

Reputation: 6814

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%.

Upvotes: 3

sfarbota
sfarbota

Reputation: 2627

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.

Upvotes: 0

Related Questions