Sent by Robert Interface on 3 January 2005 13:01
Hi,
Well, yes, the correct width is only the content of the element and the
padding and borders should be applied outside of that.
Problem is that what you wrote doesn't work in Safari, that field
becomes only 194px wide (I think it has something to do with that Safari
won't let you tamper too much with its form elements).
So, my options are:
1. Write as you suggested but then it won't work in Safari.
2. Just set the width to 200px and it'll work in most browsers but Firefox.
Of course, what I want to do is to get the same result in all browsers,
preferably without CSS hacks or scripting.
Suggestions?
Thanks!
/Robert
Daniel Schierbeck wrote:
> [EMAIL-REMOVED] wrote:
>
>> Hi all,
>>
>> I have this problem in Firefox, both PC and Mac. I set an INPUT
>> field's width to 200px, as in width:200px;
>>
>> In any other browser (Opera, IE, Safari etc) the field becomes 200px
>> wide.
>> But in Firefox, the border and some invisible super-padding seems to
>> be added so it becomes 204px wide.
>>
>>
>> Any ideas?
>>
>
> Erm, that depends on how you measure "width". If you're measure from
> the left end of the left-side border to the right end of the
> right-side border, then the border width is of course calculated.
> "width" in CSS is simply how wide the space *inside* an element is
> (inside the padding box.) This should produce a text field that's 200
> px wide, border-to-border:
>
> input {
> padding: 2px;
> width: 194px; /* 2*2 + 194 = 198 */
> border: 1px solid; /* 2*1 + 198 = 200 */
> }
>
>
>
> Cheers,
> Daniel Schierbeck
>
>
>
>
>
>
>
>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
