All geek questions in one place

Text position inside textarea in Firefox

I am trying to overlay text in a text box with the same text in a div. I managed to get it to work in all browsers, but FireFox (I use 8.0). In FireFox, the text inside the text box is shifted 1px to the left.

Here is 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>
+6
source share
2 answers

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

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

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

+1
source

I suggest you first use reset of all factory browser properties, and then apply your code. This will greatly reduce the likelihood of differences in viewing between different browsers.

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

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

I also suggest that you wrap both your text box and your div in a container that is the same size and positioned relatively. Then apply the absolute properties to the internal elements.

0
source

Source: https://habr.com/ru/post/902523/

More articles:


All Articles