6

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>
ulu
  • 5,872
  • 4
  • 42
  • 51
  • I'd say it's how Firefox renders textareas so you need special CSS for Firefox only. – Hossein Nov 28 '11 at 08:58
  • This has apparently been an issue for some time as http://stackoverflow.com/questions/4374537/how-to-force-firefox-to-render-textarea-padding-the-same-as-in-a-div demonstrates. There was not really a good solution listed there, either. – ScottS Nov 29 '11 at 02:33
  • Looks like I'll have to revert to browser sniffing then. Like in good old times.. – ulu Nov 29 '11 at 13:15

2 Answers2

1

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.

Timothy Miller
  • 2,391
  • 1
  • 27
  • 34
  • Looking good, but does it mean it works only on the first line of the text? – ulu Dec 02 '11 at 07:10
  • Yeah, it would only work on the first line. Good catch. Simple fix though, just use `margin-left` instead of `text-indent` and you'll be good. Test case: http://jsfiddle.net/e4YGW/19/ – Timothy Miller Dec 02 '11 at 18:31
0

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.

borisrorsvort
  • 907
  • 7
  • 22