GWT default style IE font size

Question

Hello,

I am using standard GWT (2.0.1) to make an internet app and i have this wierd issue with huge fonts (edit: well, larger than normal) with the default style in IE 7 & 8, while FF, Chrome and Safari are displaying fonts correctly. At first i thought it must be on error on my side (i use UiBinder with some custom css) but then I noticed that on the GWT showcases site the various widget fonts are also too big. Any ideas?

Answer 1

A quick comparison between Opera 10.10, IE 6 and FF 3.6 (all on WinXP SP3) - Opera and IE show slightly larger fonts. I'm not sure if that's GWT's fault - every browser has some core CSS rules defining the default look, if no additional CSS styles are applied (like that annoying blue border on all images in FF), so just make sure you set explicitly your font size, etc to nullify these differences.

That is, unless you are seeing fonts way larger than they should be - then it might be a bug.

Update: under Linux (Gentoo amd64) it's the same - Opera reneders slightly larger fonts than Firefox, but nothing that looks odd.

Answer 2

This is due to IE default font size rendering and has nothing to do with GWT but rather with CSS styling.

You can ensure that fonts are consistent over multiple browser with a CSS like that (for instance):

*
{
    font-family: Arial, sans-serif;
    font-size: 12pt;    
}

body, table td, a, div, .p, pre 
{
    font-family: Arial, sans-serif;
    font-size: 12pt;
}

EDIT:

To ensure all widgets "get" this new style you need to put your CSS file in the *.gwt.xml file in the following way (the order of lines is important):

<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="MyNewAndImprovedStyle.css" />

don't put it in the HTML page!

This will ensure that your style override the widget styles.

PS: You might override some widget styles by hand (I have a GwtOverride.css for that purpose) ... see snippet:

.gwt-TextBox,.gwt-PasswordTextBox,.gwt-DateBox
{
    border: 1px solid #BDBDBD;
    padding: 2px;
    background-color: #FFFCDA;
}


.gwt-ListBox 
{
    font-family: Arial, sans-serif;
    font-size: 12px;    
    background-color: #FFFCDA;
}


/* make dialog slick and nice */
.gwt-DialogBox .dialogContent 
{
    margin: 5px;
}

.gwt-DialogBox .Caption 
{
    background: #99B4CC;
    border-top: 2px solid #99B4CC;
    border-bottom: 1px solid gray;

    font-size: 110%;
    font-weight: bold;
    white-space: nowrap;
}