Hello I have a simple problem, I am applying padding to textarea, like this: textarea { overflow: auto; padding: 15px; } Code (markup): The problem is, when the text is too long, the scrollbar appears - in Firefox, it is moved to the left by the padding, while in other browsers it stays where it should. How can I keep the scrollbar just at the right border of textarea in FF? Thanks.
I don't think there's any way to do that - I reckon it's a Firefox setting, and therefore can't be changed. But I'm not completely certain.
overflow only applies to block level elements, not to input fields. You can't use that to expand such things. Firefox, as usual, is performing correctly.
Firefox pretty much (like every browser except opera) has it's head COMPLETELY wedged up it's ass about styling form elements. Because the specification doesn't say how form elements are supposed to be styled, every browser maker went their own nonsensical direction with them. (I'm singling out Opera as the shining example of how it should be done since it treats all form inputs as display:inline-block) The error you are encountering has been in the netscape codebase since NS4 and typical of the **** I'm always having to code around with firefux compared to other browsers. (oh, but gecko was a clean break from the netscape 4 codebase - NOT) If you pad the right side of a select, textarea or any other element that has a control on the right, it moves the control over. The only 'real' solution to this is not to set padding on that side. usually if your content is allowed to wordwrap adding padding on all the other sides will still look good enough. TECHNICALLY it is not an error because the specifications don't say how form elements are supposed to behave in regards to CSS. This is why IE has padding you have zero control over and ignores height on inputs, why FF has a different minimum padding you have zero control over and ignores line-height on inputs, and why Konqueror/Safari took it upon themselves to say **** whatever the site developer wants to do, we're going to force our goof-assed glowing bars and controls upon them effectively ignoring 90% of CSS you would send to our elements. It's why styling legends and fieldsets cross-browser is next to impossible without wrapping a DIV around your fieldset and a span inside your LEGEND, and why in general forms continue to be the biggest pain in the ass in web design unless you can be happy with radically different appearances in every browser. ... and again people wonder why I say Opera got it right by treating them just like any other inline-block element. Here's a test case showing the problem: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> Firefox padding test </title> <style type="text/css"> select, textarea { padding-right:16px; } textarea { height:4.8em; line-height:1.2em; overflow:auto; } </style> </head><body> <form action="#"> <fieldset> <legend>Simple Test</legend> <select> <option>Test1</option> <option>Test1</option> <option>Test1</option> </select><br /> <textarea>test test test test test test test test </textarea> </fieldset> </form> </body></html> Code (markup): Well documented 'bug' that's been around since Netscape 4 introduced CSS. Add this to the decade old bugzilla #915 as stupid simple shit they still havent fixed while wasting time implementing stuff like HTML5 and CSS3 that aren't even out of draft yet.
It's funny how you single out Firefox as doing this wrong but, out of the other side of your mouth, you say: Not "technically", exactly. As is every other browser maker. You know you wouldn't even be able to look that up if Mozilla didn't publish openly all their bugs. You'd be very afraid of Microsoft would publish all theirs.
In this case though, notice how completely ****ed up something as simple as padding makes the appearance in gecko based browsers. It SHOULD be singled out for doing something so incredibly stupid since it's the only browser to do so. They all have problems, this problem is specific to FF - that's all I was saying. Seriously, can you think of a single situation where this would be a desirable behavior? Technically it is not an error - COMMON SENSE should say that it is. But don't look for common sense in the HTML/CSS specifications or the different browser makers interpretations of them. ... and again, this has been documented for over a decade and remains untouched.
Actually I ended up removing the padding from select and textarea tags... it doesn't look as I wanted it to look but at least the scrollbars are not irrationally moved to the left. I'm really looking forward to a time when stupid issues like this will already be gone... hopefully it will be during my lifetime.