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.

[Christian J]

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

I get "content-box" for INPUT in all my browsers (what is "gonna"?). Make sure you don't have any CSS applied, so the browser default styling is displayed.

[pandy]

I get "content-box" for INPUT in all my browsers (what is "gonna"?).

A typo. I meant goanna.

Make sure you don't have any CSS applied, so the browser default styling is displayed.

I just copied and ran what you posted. But! What I did not do was bother to add an doctype. It's strict/quirks mode thing! With a doctype it works as you say.

Great! One mystery solved then.

And good thinking. I have never thought of that possibility.

[Christian J]

A typo. I meant goanna.

Oh it's a gecko.

I just copied and ran what you posted. But! What I did not do was bother to add an doctype. It's strict/quirks mode thing! With a doctype it works as you say.

Yes didn't MSIE6 use different box models in quirks vs standards mode as well?

[pandy]

Until I have more time to jump into this (and read the MDN links) I will just use the 'box-sizing: content-box'.

That's the only thing you CAN do, I think. What MDN links though?

A typo. I meant goanna.

Oh it's a gecko.

A gecko fork (or something like that). A more updated third party version of k-mel uses goanna while the official version uses gecko. I wish those guys would get their act together after, what is it, 20 years. The browser is good, especially it's interface, menus and use option, but it's always waaay behind when it comes to the version of the engine.

Yes didn't MSIE6 use different box models in quirks vs standards mode as well?

IE6 or thereabout. It never occurred to me that would affect box-sizing since it's a much newer property, but of course they are related.
Seems rather quaint to choose different models for different form fields though. And you say they all do it the same way. Wonder what the reason is for that.