2 CSS questions, simple? Options

[CharlesEF]

Hi All,

For years I've had to style < input > and < select > elements width differently. I had always 'assumed' the problem was with the custom fieldset and legend CSS supplied to me by Mozilla, because of a fieldset printing bug. I find that bug appears to be fixed now so I want to do away with the custom Mozilla CSS. So, I created a test page without the custom CSS but the problem still exists. Attached is the test page and image. When width is set to 100% the right end of the 2 elements don't match. Or, should they? The 2nd question is: why did I need a CSS rule to adjust the position of the help image? I needed it because the help image was placed outside the button.

Hope someone can help explain this to me.

 CSS_Test.html ( 5.58k ) Number of downloads: 225



Thanks for any and all help,

Charles

[pandy]

Yeah, this is super strange. I never got to the bottom of it. The cause is browser styling though, borders and padding. That's not so strange, but it gets worse. Look at this.

CODE

div            { width: 500px; background: red; padding: 50px }
input, select  { width: 100% }

#same input, #same select
               { padding: 0;
                 border: none }

#nicetry input, #nicetry select
               { border: 3px solid black;
                 padding: 5px }

#nice input, #nice select
               { border: 3px solid black;
                 padding: 5px;
                 box-sizing: content-box  }

HTML

<div>
<input type="text" value="AAAAAAA">

<br><br>

<select>
<option value="0">&nbsp;</option>
<option value="orange">Orange</option>
<option value="blue">Blue</option>
</select>

<br><br>

<input type="text" value="BBBBBBBB">
</div>


<div id="same">
<input type="text" value="AAAAAAA">

<br><br>

<select>
<option value="0">&nbsp;</option>
<option value="orange">Orange</option>
<option value="blue">Blue</option>
</select>

<br><br>

<input type="text" value="BBBBBBBB">
</div>


<div id="nicetry">
<input type="text" value="AAAAAAA">

<br><br>

<select>
<option value="0">&nbsp;</option>
<option value="orange">Orange</option>
<option value="blue">Blue</option>
</select>

<br><br>

<input type="text" value="BBBBBBBB">
</div>


<div id="nice">
<input type="text" value="AAAAAAA">

<br><br>

<select>
<option value="0">&nbsp;</option>
<option value="orange">Orange</option>
<option value="blue">Blue</option>
</select>

<br><br>

<input type="text" value="BBBBBBBB">
</div>

First set, no styling and the SELECT is shorter than the text inputs.

Second set, borders and padding removed. Wham! All fields have the same width.

Third set, we add the same border and padding to all fields - and the discrepancy is back. Why is that?

Fourth set. Same as third set with the addition of 'box-sizing: content-box' and all is well.


I can't understand why it doesn't work with just the same borders and padding, why box-sizing is needed. Maybe it has something to do with the styling of OPTION. I just lost it at that point.

[Christian J]

I can't understand why it doesn't work with just the same borders and padding, why box-sizing is needed.

It seems text INPUT and SELECT use different default values for "box-sizing":

CODE

<script type="text/javascript">
function x()
{
    var i=document.getElementById('i');
    var s=document.getElementById('s');
    alert('Input: '+window.getComputedStyle(i, null).getPropertyValue("box-sizing")+'\nSelect: '+window.getComputedStyle(s, null).getPropertyValue("box-sizing"));

}
</script>

<input type="button" value="Display 'border-box' browser default values" onclick="x();">

<br><br>

<input type="text" value="AAAAAAA" id="i">

<br><br>

<select id="s">
<option value="0">&nbsp;</option>
<option value="orange">Orange</option>
<option value="blue">Blue</option>
</select>

[pandy]

In what browser? I get the same value (border-box) for both in gecko, gonna goanna and Edge when I run your script.