Question

I’m having a small problem with x-browser compatibility (Chrome and FF) for a textarea and margins.

The page in question is here: http://www.mylesgray.com/contact/

The textarea under “Message” as you can see is different in FF than in Chrome:

FF 11:

Chrome 17:

You can see if you look at the bottom and right hand edges of both Chrome lines up perfectly but FF seems further in both directions and I cannot work out why either in Firebug or Chrome Dev Tools.

It seems to be a webkit vs gecko problem as Espresso shows the same as Chrome.

The CSS for the above is:

.wpcf7-message {
    float: left;
    width: 26em;
    height: 12.3em;
    margin: 0;
}

.wpcf7-message textarea {
    resize: none;
    padding: 1em;
    width: 100%;
    height: 100%;
    margin-top: 1.1em;
    border: none;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

Any help much appreciated!

Myles

Answer 1

It’s most likely the em units you’re using everywhere for widths, margins and padding. The em unit is based on font size and webkit renders fonts slightly differently than gecko (the same text in webkit and gecko will be different widths).

As a test, change your CSS widths, padding and margins to absolute px values and check if this fixes the inconsistencies.