Textfield in Vaadin does not align text correctly

Question

I know that IE version 9 is outdated, but the customer wants it that way..

Does anyone have a single clue why the text in a Textfield looks like this in Internet Explorer 9:

When I highlight the text, it aligns okay. I use the Valo theme and created the textfield as follows:

final TextField givenName = new TextField("Voornaam:");
givenName.setWidth("132px");
givenName.addStyleName("textfield");
givenName.setValue(value);

CSS:

.textfield{
    margin-left: 5px;
}

Thanks!

Answer 1

The solution with Vaadin is adding following css-code:

.v-ie8 .textfield, .v-ie9 .textfield{   
  margin-left: 5px;
  height: 32px;
}

The .v-ie8 and .v-ie9 specifies css code only for IE8 & IE9