Menu
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>
813
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.
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
