firefox incorrectly padding textarea

[jacko310592]

hey guys,

 

in every browser other than ff (it seems), padding within a textarea does not move the scrollbar, but in ff, its as if the padding is applied round the outside, not on the inside of the textarea (meaning it also puts padding around the scrollbar).

 

heres a screenshot of my problem:

 

/*TEXTAREA CSS*/
textarea {
height: 65px;
width: 310px;
margin: 0;
border: 0;
padding: 10px;
float: left;
font-size: 12px;
font: 12px Verdana, Geneva, Sans-serif;
}

 

can anyone think of a solution to this problem?

thanks

[jacko310592]

UPDATE:

this looks to be a long-standing problem with firefox (with no known hacks/fixes... as far as i am aware);

 

if your also having this problem, go to the link below and 'vote' for the level of importance (then hopefully they will get round to fixing it)

 

https://bugzilla.mozilla.org/show_bug.cgi?id=157846

[haku]

You can set the right padding to zero, and that will keep the scroll-bar from sticking out into the middle. it will still have padding above and below the scrollbar, but its better than also having it on the right of the scrollbar.

[jacko310592]

so true-

thank you for the tip haku

[jacko310592]

i decided to go with a hack, bad i know, but at least on the face of it it looks better now.

 

 

this was done with the following code:

@-moz-document url-prefix() {
.quickPost textarea {
	padding: 0;
	padding-left: 6px;
	line-height: 25px;
}
}

 

the bad thing about this solution (apart from the fact its a hack) is that as you can see, im using the a large line height property to replicate the top padding, this of course isn’t good for a small textarea

 

 

if i cant find a better solution to this, i think ill end up using the line height technique, simply in the interest of making it look the same throughout all browsers