19 replies [Last post]
kajic
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2007-02-15
Posts: 26
Points: 0

Hello again.
I have a problem with nested fieldsets in a tableless form. The actual problem is when I nest a fieldset inside another fieldset the width of the "parent" fieldset is increased. In internet explorer I have no problems with this, the child fieldset is simply placed iside its parent with a width to fill as much as possible of the parent. In FF on the other hand the child fieldset seems to force the parent to widen.
I don't want to specify the width of each fieldset manually but I simply want it to take up a percentage of its parents available inside-width (100% of it preferably). Is there any way to do this in FF (or rather, to do it as IE allready does it) or am I forced to explicitly specify the width of each child fieldset?
And finally, the url in question where you can see this phenomenon for yourself:
http://helvetet.org/~robert/webshop/class/Output/Output.php?display=1

EDIT:
I just checked the page in a number of other browsers but this time for the mac. Out of IE, FF, Opera, Camino, Shiira and iCab I got this unwanted behavior only from FF and Camino. The others worked just fine. I dont know if this information is good for anything but maybe someone finds it worth something.

Thank you.
/Robert

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

What styles have you

What styles have you assigned to "fieldset"?

The default appearance of elements in modern browsers is controlled by the browser's own style sheet. iirc, look in the "res" folder of your firefox installation. You can also see the default style rule by inspecting the element in the DOM Inspector and looking at the style rules. The first one or two are firefox's default rules.

If you do that check you'll see a FF fieldset comes with positive values for horizontal, margins, borders & padding. Meaning if you assign a width, it will be larger by those 6 amounts.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

You're running in quirks

You're running in quirks mode where IE and IE wannabe Opera follow a non standard set of rules. The forbidden xml declaration kicks IE6 and Opera into quirks.

Until you rid yourself of that, we're comparing apples and oranges.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kajic
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2007-02-15
Posts: 26
Points: 0

Chris..S:

Chris..S:
Thanks for the tips, I will check into that later and try to override the styles preset by firefox Smile Btw, is there anyway to check the preset styles in another browser like IE?

kk5st:
I'm not quite sure what you mean? Are you refering to the fact that I used <?xml version="1.0"?>? I removed that now but with no real effect so I asume you means something else? Thanks for the reply anyway!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

kajic wrote:kk5st: I'm not

kajic wrote:
kk5st:
I'm not quite sure what you mean? Are you refering to the fact that I used <?xml version="1.0"?>? I removed that now but with no real effect so I asume you means something else? Thanks for the reply anyway!

Yes, that's what he meant.

It may not fix your problem, but until it's removed we can't help diagnose Wink

Verschwindende wrote:
  • CSS doesn't make pies

kajic
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2007-02-15
Posts: 26
Points: 0

Oh ok. Now its gone but the

Oh ok. Now its gone but the problem persists. Thanks for that tip. I will try Chris..S's suggestions first but if that doesnt help me out I will come back and search for more help Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

kajic wrote:Oh ok. Now its

kajic wrote:
Oh ok. Now its gone but the problem persists. Thanks for that tip. I will try Chris..S's suggestions first but if that doesnt help me out I will come back and search for more help Smile

Of course! Look forward to hearing from you Smile

Verschwindende wrote:
  • CSS doesn't make pies

kajic
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2007-02-15
Posts: 26
Points: 0

Back to where I started from

Hello again, I'm back Smile I tryed Chris's suggestion and checked the default css-file in C:\Program Files\Mozilla Firefox\res\forms.css. I found the fieldset element which looks like this:

fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding: 0.35em 0.625em 0.75em;
border: 2px groove ThreeDFace;
}

So I though that maybe by changing the rule for fieldsets to this I could make it take up only the width available to it, namely 400px.

form fieldset {
width: 400px;
padding: 0px;
display: block;
margin-left: 0px;
margin-right: 0px;
}

Well, I didnt really expect that to shave a whole 75px of the bulging fieldset but I gave it a try, but it was futile. So the fieldset is still way too wide in Firefox. Besides I would like to have some padding inside the fieldset so removing it entirely is not even an option (not that it matters because that didn't help anyway).
I hope someone can provide me some assistance with this annoying problem. Thanks.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I get timeouts from your

I get timeouts from your server when I try to look at the page.

kajic
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2007-02-15
Posts: 26
Points: 0

Please give it another try.

Please give it another try.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I see it. Very wierd. Its

I see it.

Very wierd.

Its caused by the styles on your .labelRightAligned elements. Why Firefox should expand the fieldset I don't know.

The problems styles are --

width: 100%;
margin: 0 0 0 70px;

-- which requests the label to be 70px larger than the display context it is operating within - 400px.

Read through bugzilla at mozilla and if its not reported, report it.

kajic
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2007-02-15
Posts: 26
Points: 0

Thanks

Thanks alot for taking the time and helping me!
I would make a bug report but I'm nore sure how to describe the error so that anyone understands even remotely what I'm talking about. If you want you can perhaps tell me what to report and I'll do it.
/Robert

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

First off, recreate the page

First off, recreate the page with the problem.
Remove as much of the other stuff in the page as possible.

Then whistle for TPH. TPH is right at the cutting edge, he can check whether Gran Paradiso (FF3.0a) has the same problem.

If it does, we can prepare a report.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 1 day ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Chris..S wrote:Then whistle

Chris..S wrote:
Then whistle for TPH. TPH is right at the cutting edge, he can check whether Gran Paradiso (FF3.0a) has the same problem.

Ello Laughing out loud

Whip up a test case showing the problem, paste the code in here, and let me know what's happening in FF2 or FF1.5 and I'll let you know how it looks in FF3.

By the way, FF3 fully passes the Acid2 test Wink Take that, you Opera fanboys Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

kajic
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2007-02-15
Posts: 26
Points: 0

Here is a url displaying the

Here is a url displaying the problem:
http://helvetet.org/~robert/webshop/class/Output/Output.bug.php?display=1

As for the source I think its easiest if you check it out yourself at that link. What causes the "bug" has allready been pointed out by Chris earlier in the thread so I feel its redundant for me to write that down again.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi The problem is this

Hi

The problem is this code:

form .labelRightAligned { float: left; width: 100%; padding: 0px; margin: 0 0 0 70px; text-align: left; font-style: italic;

Were the label inherits its width from the form, and as you have added a left margin of 70px, guess what? The fieldset changes to 70px wider than the form.

If you change the code to this:

form .labelRightAligned { float: left; width: 100%; padding: 0px; margin: 0 -70px 0 70px; text-align: left; font-style: italic;

Then what happens?

Trevor

kajic
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2007-02-15
Posts: 26
Points: 0

Well your solution works but

Well your solution works but I must say I really dont understand the part where you deduce the reason for it. All I can say is negative margins seem very usefull Smile

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 3 years 11 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Well, Let's assume the form

Well,

Let's assume the form sets the width.

Try setting the background to the form red

Now see that the fieldsets break out of it. That is, they are not contained by the form dimensions. And yet they default with 100% width to that form's width. But, if you put content inside them wider than that (and your code made the offending one 100%+70px wide) they will expand.

Try making a div 100px wide and put a paragraph in it with a very long word in it (no spaces) and it will break out of the box. Same effect here. IE is better at handling this than FF, but the effect is known.

kajic
Offline
Regular
Last seen: 13 years 34 weeks ago
Joined: 2007-02-15
Posts: 26
Points: 0

Okay, then I think I'm with

Okay, then I think I'm with you. But this is a bug in my oppinion, shouldnt the fieldset actually be contained by the forms dimensions in most real world applications? Well, to me it seems more natural than the ther way around. The people that make explorer must have thought the same I guess.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Treva please read the rest

Treva please read the rest of the thread.

The problem was raised and solved way back. The discussion is now about reporting the bug to Mozilla. For that, you'll see I asked that kajic recreate the original problem so TPH (or someone else) with FF3.0a could test to see if the problem was still current in their latest development. If it does still exist we need to see its reported to them.