The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Another CSS conundrum, Fieldset widths not equal
CharlesEF
post Oct 19 2020, 09:22 PM
Post #1


Programming Fanatic
********

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



Hi All,

Hate to bug you all so soon but I can't figure this out. Attached are 3 pages to show exactly what the problem is. Just place them in the same directory and load 'main.html'. Once loaded scroll to the very bottom and look at 'Sub Fieldset 2 (Iframe)'. The width of this fieldset is not the same as the fieldset above it. Why? It is not because of box-sizing, margin or padding. Is it because it is loaded in an 'iframe'?

For extra credit, does anyone know why there is an 1 1/2 inch of white space between the last fieldset and the close of the main fieldset? I don't have this problem on my production page but it showed up here.


Thanks for any and all help,

Charles
Attached File  main.html ( 3.93k ) Number of downloads: 78
Attached File  maini.html ( 1.17k ) Number of downloads: 77
Attached File  main.css ( 2.49k ) Number of downloads: 80
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 19 2020, 11:16 PM
Post #2


Computer says no.
********

Group: WDG Moderators
Posts: 19,257
Joined: 9-August 06
Member No.: 6



QUOTE(CharlesEF @ Oct 20 2020, 04:22 AM) *

Hate to bug you all so soon but I can't figure this out. Attached are 3 pages to show exactly what the problem is. Just place them in the same directory and load 'main.html'. Once loaded scroll to the very bottom and look at 'Sub Fieldset 2 (Iframe)'. The width of this fieldset is not the same as the fieldset above it. Why? It is not because of box-sizing, margin or padding. Is it because it is loaded in an 'iframe'?


They are styled differently. The fieldset in main.html has the class fieldset and the one in maini.html has the class sub-fieldset.

CODE
   .cefiform .fieldset
   {
    float: left;
    width: 310px;
   }

   .cefiform .sub-fieldset
   {
    height: auto;
    width: auto;
   }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 20 2020, 01:04 AM
Post #3


Programming Fanatic
********

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



Yes, that's by design. As I understand it: The '< fieldset >' rules will be applied to all fieldsets in the .cefiform class. The class 'fieldset' is only applied to the main/outer fieldset, to get the float and width, look at the fieldset 'Sub Fieldset 1', it also has a class of 'sub-fieldset' and expands as I expect. All fieldsets placed inside the main/outer fieldset will get the 'sub-fieldset' rules applied, this is only to allow for auto height and width. I want these fieldsets to be contained within the main/outer fieldset, so I 'assumed' a width of auto would expand to the same length as the fieldset above. I find that a width of 100% causes the fieldset to break out of the main/outer fieldset.

Have I misunderstood my CSS stuff?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 20 2020, 01:23 AM
Post #4


Computer says no.
********

Group: WDG Moderators
Posts: 19,257
Joined: 9-August 06
Member No.: 6



QUOTE

The class 'fieldset' is only applied to the main/outer fieldset, to get the float and width, look at the fieldset 'Sub Fieldset 1', it also has a class of 'sub-fieldset' and expands as I expect.


Sub Fieldset 1 is contained in the fieldset with the class fieldset (the one that sets the width) whereas the fieldset.sub-fieldset in the framed page isn't contained in such a fieldset or any other fieldset at all actually.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 20 2020, 02:14 AM
Post #5


Programming Fanatic
********

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



So, you are saying I need to enclose the '< iframe >' in a fieldset? But the page being loaded into the iframe contains the fieldset and the CSS is applied to the page. I've set the iframe to be 100% wide with no borders, so shouldn't the iframe expand to the same lengths as everything above? I tried setting box-sizing on the iframe also but it made no difference.

Ok, I think I understand. You want me to place the fieldset around the iframe. Then I should remove the fieldset stuff from the 'maini.html' page. I'll give it a try and report back.

I'm back. I tried but it caused more problems then it fixed, so I left it as is. But, I find I can force the issue by adding and changing 1 line in the .iframe CSS rule. Change width to 104% and add this line: margin-left: -5px;. But, should I have to do this?



This post has been edited by CharlesEF: Oct 20 2020, 02:53 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 20 2020, 03:18 AM
Post #6


Programming Fanatic
********

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



BTW, I found the reason for all the white space at the bottom. The height of the iframe was too big, once I reduced it to 210px the white space was gone.

I'm sure the problem is with the iframe, not the fieldset CSS, but box-sizing: border-box; has no effect. So how do I make it expand the width like the other elements?

This post has been edited by CharlesEF: Oct 20 2020, 04:07 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 20 2020, 08:45 AM
Post #7


.
********

Group: WDG Moderators
Posts: 8,635
Joined: 10-August 06
Member No.: 7



Since the form in the framed page is nested inside the form of the parent page, the 5px .cefiform margin becomes doubled. This CSS in the framed page seems to fix it:

CODE
form {margin: 0 !important;}


But note that this doesn't work in main.css:

CODE
.cefiform .cefiform   {margin: 0 !important;}  

maybe because the two forms are not in the same HTML document?

Interesting situation! biggrin.gif




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 20 2020, 01:51 PM
Post #8


Programming Fanatic
********

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



The 5px margin is applied to the outer container (in this case the form) it doesn't apply the 5px margin to elements inside the container, does it?

Let me stew over this awhile.

This post has been edited by CharlesEF: Oct 20 2020, 01:53 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 20 2020, 01:55 PM
Post #9


.
********

Group: WDG Moderators
Posts: 8,635
Joined: 10-August 06
Member No.: 7



But the IFRAME is inside the parent page's FORM element, then the framed page contains another FORM element. So the result is like two nested FORM elements.

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


Programming Fanatic
********

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



Yes, after stewing a little I came to post the same information. You beat me to it. Back to the stew pot for a fix.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 20 2020, 02:57 PM
Post #11


Programming Fanatic
********

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



Ok, I got it working but I don't understand why. In 'maini.html' I changed the form to a div and added the style attribute 'margin: 10px 0 0 0;'. In 'main.css' I added 'box-sizing: border-box;' back in and changed the width to 100% (I had changed it to 104%) to the CSS rule '.iframe'. If anyone wants to test this, here are the changes I made:

In 'maini.html' the form was changed to
CODE
<div class="cefiform" style="margin: 10px 0 0 0;">
, don't forget to change the closing tag.

In 'main.css' the CSS .iframe rule is:
CODE
.iframe
{
  box-sizing: border-box;
  border: none;
  height: 100%;
  overflow: auto;
  width: 100%;
}


In 'main.html' I changed the iframe height to 230px. A -5px left margin caused the left fieldset border to disappear so I changed it to 0. BTW, I can remove the box-sizing from the '.iframe' rules and it still works. Do these changes fix it for you too?

This post has been edited by CharlesEF: Oct 20 2020, 03:05 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 20 2020, 03:27 PM
Post #12


.
********

Group: WDG Moderators
Posts: 8,635
Joined: 10-August 06
Member No.: 7



Why not just use the simple fix I suggested? smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 20 2020, 03:42 PM
Post #13


Programming Fanatic
********

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



QUOTE(Christian J @ Oct 20 2020, 03:27 PM) *

Why not just use the simple fix I suggested? smile.gif

Because it caused the left fieldset border to disappear. I ended up with a 3 sided fieldset. It doesn't show that way for you? And besides, there are only 3 pages that use the iframe within a fieldset. Most of the time the iframe is used it will not be in a fieldset.

After more testing I find that the style attribute I added to the form/div element in 'miani.html' is the reason it works. If I remove it then it's back to the way it was. That style attribute was added to allow a little white space between the 2 fieldsets.

This post has been edited by CharlesEF: Oct 20 2020, 04:10 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 20 2020, 04:32 PM
Post #14


.
********

Group: WDG Moderators
Posts: 8,635
Joined: 10-August 06
Member No.: 7



QUOTE(CharlesEF @ Oct 20 2020, 10:42 PM) *

It doesn't show that way for you?

No, but in Firefox the right border disappears if I do this (CSS goes in the framed page):

CODE
form {
margin: 0 !important;
padding: 0 !important;
}

fieldset {margin: 0 !important;}


QUOTE
After more testing I find that the style attribute I added to the form/div element in 'miani.html' is the reason it works. If I remove it then it's back to the way it was. That style attribute was added to allow a little white space between the 2 fieldsets.

The STYLE attribute has the highest specificity (except for the !important keyword).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Oct 20 2020, 05:16 PM
Post #15


Programming Fanatic
********

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



Turns out I only needed to change 1 page in the production code, 'maini.html' (different name in production). I added 'style="margin: 0;"' to the div/form element. Production code had the needed white space between fieldsets so I set everything to 0.

Lucky I needed to add white space in the example page or I would have never figured this out.


Thank you, everyone, for the help,

Charles
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: 1st December 2020 - 05:02 PM