CODEWITHSUNDEEP
htmlcssinternet-explorer
Gelian
Gelian

Reputation: 3

Cursor position in textarea with different font and height-line size

I try to set the font size (13px) and line-height size (23px) for textarea control.

For example the first code: ( http://jsfiddle.net/D6T4f/ )

<TEXTAREA style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 23px; height: 70px;"></TEXTAREA>

If I click inside the blank textarea the cursor will be located on correct position.

But in this code I include style background-color: ( http://jsfiddle.net/4e2dL/ )

<TEXTAREA style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 23px; height: 70px;"></TEXTAREA>

I added only one style background-color: white;. So, if I try to click inside the textarea the cursor will be located not like in the first code (slightly higher). But If I start typing some text, the cursor will move to correct position.

How to avoid this if I need to use this style?

The problem appears in IE 9. Chrome (latest) is OK.

The same problem caused also if I use style background-image: none;

Thanks!

Upvotes: 0

Views: 1103

Answers (2)

JamieM23
JamieM23

Reputation: 561

with it only being an IE9 issue, it looks to be a that when you add the background style it is also overriding and removing some other standard IE9 styles.

The solution, you are going to need to be more explicit with your styles to help normalise the styles that are affecting the textareas, I have put an example together where the styles of the textarea have been completely overwritten by the css styles to bring the two inline: http://jsfiddle.net/PXgxU/2/

Upvotes: 0

Parixit
Parixit

Reputation: 3855

Can you try to remove space or new line between HERE

It might cause because of this.

Upvotes: 2

Related Questions