The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 2 CSS questions, simple?
CharlesEF
post Oct 11 2020, 08:29 PM
Post #1


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.

Attached File  CSS_Test.html ( 5.58k ) Number of downloads: 221
Attached Image


Thanks for any and all help,

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 12 2020, 01:21 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.

QUOTE
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? unsure.gif



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 12 2020, 01:32 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



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? unsure.gif

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 12 2020, 02:57 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Oct 12 2020, 08:32 PM) *

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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 12 2020, 03:07 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



In what browser? I get the same value (border-box) for both in gecko, gonna goanna and Edge when I run your script.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 12 2020, 04:09 PM
Post #6


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ Oct 12 2020, 01:21 PM) *

QUOTE
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? unsure.gif

The file I posted has the problem. Just over ride the '.help img' rule and you will see the image move to the left.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 12 2020, 04:21 PM
Post #7


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Oct 12 2020, 10:07 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 12 2020, 04:43 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Christian J @ Oct 12 2020, 11:21 PM) *

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

A typo. I meant goanna.

QUOTE
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. biggrin.gif

And good thinking. I have never thought of that possibility. cool.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 12 2020, 04:53 PM
Post #9


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Oct 12 2020, 11:09 PM) *

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

I was hoping to avoid cropping all the other code myself. tongue.gif

It appears the combination of the button's default "box-spacing: border-box" styling and default horizontal padding uses up all of its available 16px width, so the image gets pushed out of it by the padding. Removing the padding seems to fix it.

(If you instead use "box-sizing: content-box" the button can contain the IMG, but then the button looks like an ellipse because the padding increases the total width to more than 16px.)


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 12 2020, 04:54 PM
Post #10


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Until I have more time to jump into this (and read the MDN links) I will just use the 'box-sizing: content-box'. Once I placed that line in the CSS for inputs and selects, keeping my border and padding rules, the right end matched up fairly well. In fact, in order to maintain left and right margins (white space) I had to set the width to 98%.

Thank you very much for all the help.

Charles
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 12 2020, 05:00 PM
Post #11


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(pandy @ Oct 12 2020, 11:43 PM) *

A typo. I meant goanna.

Oh it's a gecko. happy.gif

QUOTE
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?


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 12 2020, 05:03 PM
Post #12


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Oct 12 2020, 11:54 PM) *

I will just use the 'box-sizing: content-box'.

Won't you get an ellipse if the padding is still there? But it makes sense to use a consistent "box-sizing" value for all the form fields, regardless.

QUOTE
Thank you very much for all the help.

You're welcome!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 12 2020, 05:15 PM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(CharlesEF @ Oct 12 2020, 11:54 PM) *

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?


QUOTE(Christian J @ Oct 13 2020, 12:00 AM) *

QUOTE(pandy @ Oct 12 2020, 11:43 PM) *

A typo. I meant goanna.

Oh it's a gecko. happy.gif

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.

QUOTE

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. wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 12 2020, 07:57 PM
Post #14


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



QUOTE(Christian J @ Oct 12 2020, 04:53 PM) *

QUOTE(CharlesEF @ Oct 12 2020, 11:09 PM) *

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

I was hoping to avoid cropping all the other code myself. tongue.gif

It appears the combination of the button's default "box-spacing: border-box" styling and default horizontal padding uses up all of its available 16px width, so the image gets pushed out of it by the padding. Removing the padding seems to fix it.

(If you instead use "box-sizing: content-box" the button can contain the IMG, but then the button looks like an ellipse because the padding increases the total width to more than 16px.)

I had assumed you would load the page and use the browsers 'Style Editor' to x- the rule. Thanks for the information about the padding. Let me look into it, I will post back.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 12 2020, 09:13 PM
Post #15


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



Let me recap. I used 'box-sizing: border-box' instead because border and padding figures are included. This allowed me to keep border and padding rules and still set the width to 100%. Now both input and select elements are the same length. It even took care of the left/right white space (margins). Other elements to follow, fingers crossed.

As for the help button. I tried 'box-sizing: border-box' and a padding of 0. This allowed me to drop the '.help img' rule. This is not perfect. The button and img are both set for 16 x 16 but the button seems a little bigger (you need to assign a background color other than white to see it). I have found that the button depress when clicked has stopped working. More work needed.

Edit:
I found the problem with the button click depress. It was all the CSS mods I made. It was not 1 or the other, it was both. I ended up reverting to the original code. But, all is working now. Maybe the space I was trying to use is needed for the button depress action? I thank everyone for the help.

This post has been edited by CharlesEF: Oct 12 2020, 09:48 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 12 2020, 10:32 PM
Post #16


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I've made all talked about changes to the current version of 'CSS Test'. I will post it here so any future users may find it helpful.
As another test I created a 2nd page to place a fieldset inside another fieldset. That was something I couldn't do with Mozilla's custom CSS, at least not without more CSS. My way allows the same CSS rules to apply for a master fieldset as well as a sub-fieldset. So, the 2nd page contains a fieldset inside another fieldset, along with a 3rd fieldset to show how flow works when the browser window size changes. If the screen if big enough then you should see 2 columns side by side. Shrink the window size and you will see 1 column, column 2 has moved to below column 1. Hope these files help someone.

And, if I can ask, please print preview the file 'CSS Test 2'. I have already tested with a few browsers and I find that Firefox fails the test. Please load the page in a browser, do a print preview and adjust the margins if needed to see 2 columns on page 1. Now go to page 2, do you see the remaining coluum 2 rows printed? Firefox moves these rows to the bottom of column 1. Please post your results.

Thank you,

Charles

Attached File  CSS_Test.html ( 5.55k ) Number of downloads: 185
Attached File  CSS_Test_2.html ( 11.86k ) Number of downloads: 188

The image is in my 1st post.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 13 2020, 11:47 AM
Post #17


Programming Fanatic
********

Group: Members
Posts: 1,981
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



I found the reason Firefox failed the print test. The Firefox profile was the problem. Once I created a new profile Firefox now prints the page correctly.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 01:09 PM