12 replies [Last post]
meglamaniac
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

Pretext: I've always used fieldsets with forms, I like them, they're handy and they help a bit with accessibility.

Now on a site I'm currently developing, I've just got everything looking more or less how I want it in IE 6 & 7. I loaded it into Firefox 2 to see if things were broken in there since I last checked, and they certainly were!

The thing is, I can't figure out why. It's like floating a fieldset left completely destroys Firefox's sense of how to render anything inside it. Allow me to demonstrate!

http://www.megla.net/css/example.html
This looks absolutely fine in IE, and like some kind of picasso painting in firefox.

http://www.megla.net/css/example2.html
This looks fine in both.

The difference? Example 2 uses a div instead of a fieldset. The styling applied to it is exactly the same, it's just a different page element.

So yes, I can use a div as a workaround. But I'd really like to use a fieldset if I can, for various reasons. And to be honest, I'm more than a little curious as to what's wrong with the way I've styled the fieldset.

So I'm asking you guys: what the hell?! Smile

Here's the CSS. I've stripped a lot of it out compared with the actual site but it doesn't make any difference to the problem.

/* fieldsets */

fieldset {
	display: block;
	float: left;
	margin: 1em 1em 1em 1em;
	padding: 1em 1em 1em 1em;
	background-color: #EEEEEE;
	width: auto;
}


fieldset.newline {
	clear: both;
}

.testdiv {
	border: 1px solid black;
	display: block;
	float: left;
	margin: 1em 1em 1em 1em;
	padding: 1em 1em 1em 1em;
	background-color: #EEEEEE;
	width: auto;
}

/* input */
input {
	border: 1px solid gray;
	background-color: #FAFAFA;
}

label {
	width: 11em;
	float: left;
	text-align: right;
	margin-right: 0.5em;
	display: block
}

div.formitem {
	display: block;
	margin-bottom: 1em;
}

div.submit input {
	display: block;
	margin-left: 13.75em;
} 

div.submit2 {	
	margin-left: 11.5em;
}

input.green {
	background-color: #B3FFBA;
}

input.red {
	background-color: #FFA6A6;
}

input.radio {
	background-color: #EEEEEE;
	border: 0;
}


/* tables */
table.tstyled {
	margin-bottom: 1em;
	border: 1px solid black;
	border-collapse: collapse;
}

.tstyled th {
	background-color: #000000;
	color: #FFFFFF;
	text-align: center;
	padding: 2px;
}

.tstyled th.leftalign {
	text-align: left;
	padding: 2px;
}

.tstyled td.normcell {
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	padding: 3px;
}

.tstyled td.leftcell {
	border-right: none;
	border-bottom: 1px solid black;
	padding-left: 5px;
	padding-right: 5px;
}

.tstyled td.rightcell {
	border-left: none;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	padding-right: 5px;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You could do both - wrap

You could do both - wrap your fieldset in the div which you apply the styling (float: left) to. I do a similar thing when it comes to styling legends - I need to add position: relative to a div instead of the fieldset to be able to get the legend positioned right.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

meglamaniac
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

Fair enough. But do you have

Fair enough.
But do you have any idea what's actually going wrong here? I'm very confused and would like to know!

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 3 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

meglamaniac wrote:Fair

meglamaniac wrote:
Fair enough.
But do you have any idea what's actually going wrong here? I'm very confused and would like to know!

You're floating your fieldset and floating your labels, but yet you're using a table to structure your data. By floating elements you are taking them out of the table's structure, which then forms around no content. Either use a table or floated elements but don't mix both!

Life's a b*tch and then you die!

meglamaniac
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

roytheboy wrote:meglamaniac

roytheboy wrote:
meglamaniac wrote:
Fair enough.
But do you have any idea what's actually going wrong here? I'm very confused and would like to know!

You're floating your fieldset and floating your labels, but yet you're using a table to structure your data. By floating elements you are taking them out of the table's structure, which then forms around no content. Either use a table or floated elements but don't mix both!

Well that kinda makes sense, but there are no labels used in either examples (most of the input css is unused, it's just there for other areas of the site).

The only thing floating in either is the fieldset in example 1 and the div in example 2.
As I understand the CSS spec, child elements behave normally but with their position adjusted for their parents - for example you can absolutely position an element at top: 0 left 0 inside a relatively positioned parent, and the absolutely positioned element will be at the top left of the parent element, not the top left of the entire page.

In the same way I expect the table to flow inline within and at the position of the floated fieldset/div, which it does in both cases in IE and fails to do in the fieldset case in Firefox.

Don't get me wrong I appreciate the help, but it still doesn't really explain why this is happening Sad

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 3 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

meglamaniac wrote:Well that

meglamaniac wrote:
Well that kinda makes sense, but there are no labels used in either examples...

Okay; sorry about that, I looked at your CSS but not your HTML (which is missing a body tag BTW). I have to confess that I find it very strange that you have used a table inside a fieldset and can't imagine that this is done very often. It seems that the content of your table is inheriting the float property of the fieldset. Why this is I do not know. Maybe it's a FF bug that has so far gone undetected due to the fact that it is not normal to put a table within a fieldset. I think you should follow Tyssen's advice if you absolutely must use a fieldset AND a table.

Life's a b*tch and then you die!

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

I haven't a clue what you're

I haven't a clue what you're trying to accomplish, so this may not be helpful. Set an explicit width on fieldset. It seems that the table is confused, not auto-sizing the width, causing the content to overflow instead of expanding the td. The fieldset is shrink-wrapping as expected.

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.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 3 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

That's a good point Gary, as

That's a good point Gary, as anything you float should have an explicit width and height to avoid problems.

Life's a b*tch and then you die!

meglamaniac
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

Therein lies the problem!

Therein lies the problem! The design needs to be liquid and it needs to scale down to 800 x 600 if necessary. It doesn't have to look great when it does so, but it has to fit (horizontally) on the screen. Don't look at me, I didn't set the specification!

So if I set an explicit width that looked right at 800 x 600 it would look absolutely stupid on a display like mine which is 1680 x 1050, and percentages don't really work that well either.

It looks like this just a bug the firefox development team haven't spotted yet, so I guess I'll submit it and use divs to fix it for now.

meglamaniac
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

Just to confirm the fix, I

Just to confirm the fix, I have now altered the code as follows:

HTML

<div class="fscontainer">

<fieldset>

stuff to display

</fieldset>

</div>

CSS

fieldset {
	margin: 1em 1em 1em 1em;
	padding: 1em 1em 1em 1em;
	background-color: #EEEEEE;
	width: auto;
}

.fscontainer {
	display: block;
	float: left;
	margin: none;
	padding: none;
	width: auto;
}

This now displays correctly in both IE 6/7 and Firefox 2.

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

So, why are you floating

So, why are you floating anything anyway? The fieldset, if left to its own devices would simply fill the available width. Or, width may be controlled explicitly with the width property, or implicitly using margins.

But, there's little to be gained by talking solutions when the original problem is unknown. Just for grins, and to satisfy curiosities, could you tell us what you want to accomplish without any concern for how it might be done?

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.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 44 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

My guess is so that it can

My guess is so that it can shrinkwrap to the width of the table which can vary depending on its contents.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

meglamaniac
Offline
Regular
Last seen: 15 years 18 weeks ago
Joined: 2004-07-04
Posts: 22
Points: 0

Tyssen has got it in one!

Tyssen has got it in one! Smile

Just to clarify, even if I don't float and leave the fieldsets inline with auto width set the problem still happens in firefox. Floating allows me to position things better in relation to other stuff going on in the page.

So yes the goal is for the fieldsets to shrinkwrap to the tables, which was happening fine in IE and Firefox, but Firefox was messing up the table somehow. This fix prevents that.