CODEWITHSUNDEEP
cssfirefoxcross-browser
ulu
ulu

Reputation: 6092

Position text inside textarea in FireFox

I'm trying to overlay the text in a textarea with the same text in a div. I've managed to make it work in all browsers but FireFox (I'm using the 8.0). In FireFox, the text inside the textarea is shifted 1px left.

Here's my code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div, textarea 
{
    position:absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    font-family: Consolas;
    font-size: medium;
    border:none;
    border-width: 0px;
}
div {color:red;}
textarea {color: blue;}
</style></head>

<body>
<textarea>Stuff</textarea>
<div>Stuff</div>

</body>
</html>

Upvotes: 6

Views: 1486

Answers (2)

Timothy Miller
Timothy Miller

Reputation: 2429

I think I can claim the most elegant solution for this. Firefox doesn't subtract one pixel from the text area, but one half pixel. Take a look at this:

http://jsfiddle.net/e4YGW/19/

Tested in latest versions of Firefox, Chrome, Opera, and Safari.

Upvotes: 1

borisrorsvort
borisrorsvort

Reputation: 906

I suggest you first use a reset of all browser factory properties, then apply your code. This will considerably reduce the chance you got display differences in the various browsers.

Here is a link of one of the most famous reset:

http://meyerweb.com/eric/tools/css/reset/

Also I suggest you wrap both your textarea and your div in a container which has the exact same size and positioned relative. Then apply absolute properties for inner elements.

Upvotes: 0

Related Questions