Question

i am using FF as the main testing platform and Chrome (for Mac) as the secondary.
I just noticed that Chrome is showing ~20px off positioning for CSS. (just to be clear Chrome is showing the TEXTAREA ~20px down as compared to FF)
Also Chrome is not obeying the width CSS property for TEXTAREA.

Is it just me or everyone is having this problem? I thought IE was crazy.

TEXTAREA {
    background-color: white;
    border: #ccc 2px solid;
    color: black;
    font-family: calibri, helvetica, arial, verdana, ms sans serif;
    padding: 10px;
    font-size: 16pt;
    font-weight: normal
    min-width:320px;
    min-height:138px;
    max-height:138px;
    resize: none;
}

Is there a solution??

Answer 1

I think it would help if you could show us your ‘troublesome’ page. Maybe make a copy and upload it to the web so we can give it a check?

Whatever the case, I’m sure it has something to do with more than just the textarea itself. Perhaps its one of the containing elements, a rule on a parent div or table td or who knows. Since it’s a textarea, I’m pretty sure there’s a form or submit of some type involved so yeah, please show us more of your code 😉

You might find this useful anyway so that you can edit your code individually for moz or chrome:

Gecko browsers (FIREFOX):

@-moz-document url-prefix() {
    /* Gecko-specific CSS here */
}

WebKit browsers (CHROME, SAFARI):

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* Webkit-specific CSS here */
}

Cheers