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: 226



Thanks for any and all help,

Charles

[Christian J]

Regarding text box width, this seems to work:

CODE

div {
display: inline-block;
border: solid;
}

div input, div select {
box-sizing: border-box;
display: block;
width: 100%;
}

See also https://developer.mozilla.org/en-US/docs/Le...yling_web_forms for INPUT text fields, and https://developer.mozilla.org/en-US/docs/Le...ed_form_styling for SELECT menus.

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.

Could you make a minimal test case where the image is placed outside?

[CharlesEF]

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.

Could you make a minimal test case where the image is placed outside?

The file I posted has the problem. Just over ride the '.help img' rule and you will see the image move to the left.