On Sat, Mar 16, 2013 at 12:23 PM, Matevž Bradač <[email protected]> wrote:
> You can try using the CSS3 box-sizing property. By default it's set to
> "content-box" which first calculates the element width and then *adds*
> border and padding to get the "total" width. So in your case this becomes
> 100% + <some value> and this is then squeezed into the parent div which
> has a fixed width of 300px.
> If you use the "border-box" value, it will calculate the width including
> padding and border. For the textarea this seems fine, but for the input
> you'll have to compensate with a bit of top and bottom padding, like this:
> {{{
> #qct-fieldset input, #qct-fieldset textarea {
> width: 100%;
> box-sizing: border-box;
> }
> #qct-fieldset input {
> padding-top: 1em;
> padding-bottom: 1em;
> }
> }}}
>
> The above works fine for me, but I haven't tested it in all browsers
> (you may have to use -moz-box-sizing and/or -webkit-box-sizing as well).
>
> --
> matevz
>
Thanks! I will give it a try and make sure to test in Safari and Firefox.
