Dev Shed Forums

**sripathiks**

Hi, I am using fieldset to group checkboxes.
fieldset {
border:none;
autoHeight:true;
}
Several fieldset groups are used inside td (table). In firefox 3.6.17, the layout comes properly. The fieldset automatically adds a line break for every tr-td combination, the layout shows fine.
But in IE 8.0.6001, the fieldset does not add a line break for every td/tr. So I have to add an additional blank/empty tr/td to add a line break. Doing so adds 2 lines in FF.
How to overcome this problem? What is the ideal css style to be used so that the display comes properly in both IE and FF?

**Kravvitz**

Welcome to DevShed Forums, sripathiks.

I'm having trouble imagining why someone would put a fieldset inside a table. Anyway, we need to see more of your code to be able to help you. When posting code, please place it between [code][/code] tags.

I should probably also mention that there is no CSS property named "autoHeight". Most elements have an automatic height by default. Also mixed-capitalization like that is a convention in JavaScript, not CSS. In CSS, it's best to use all-lowercase property names.

New users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

**SampadaRao**

I am in the same team as Sripathi. He is having problem (unable to reset password) with his id and hence I am responding. Below is the subset of actual code. APRindustry_filter and GSDindustry_filter will get replaced with checkboxes dynamically at runtime.

Code:

<table cellpadding="0" >
	<tr><td>										
	  <div id="APRindustryDiv" name="APRindustryDiv"  style="display:none;">
	  <fieldset class="fieldset">
	    <legend>
	    <span id="asteriskapr" class="infoMessage">*</span><label id="labelForAPRIndustry" class="label">Industry:</label>
	    <span id="APRIndustryCount" name="APRIndustryCount" class="labelv12"/>
	    <div id="APRIndustryshowhide" name="APRIndustryshowhide" class="showhide">Show</div>
	    </legend>
	    <div name="APRindustry_filter" id="APRindustry_filter" class="outputData" style="display:none;"/>
	  </fieldset>			
	  </div>																
	</td></tr>
	<tr><td>&nbsp;</td></tr>
	<tr><td>
	  <div id="GSDindustryDiv" name="GSDindustryDiv"  style="display:none;">
	  <fieldset class="fieldset">
	    <legend>				
	    <span id="asteriskgsd" class="infoMessage">*</span><label id="labelForGSDIndustry" class="label">Industry:</label>
	    <span id="GSDIndustryCount" name="GSDIndustryCount" class="labelv12"/>
	    <div id="GSDIndustryshowhide" name="GSDIndustryshowhide" class="showhide">Show</div>
	    </legend>
	    <div name="GSDindustry_filter" id="GSDindustry_filter" class="outputData" style="display:none;"/>
            </fieldset>			
	    </div>
	</td></tr>
</table>

**SampadaRao**

Can anyone update on this please? Why is FF adding an extra line in the fieldset? I do not want to add additional tr-td to add a spacing line just for IE. Please respond.

**AndrewSW**

There are quite a few errors in your HTML which probably account for the errors you are finding. Validate it here.

In particular: a <legend> should only contain some descriptive text; a <fieldset> (and legend and labels) belong within a form; tags should have closing tags where necessary (divs and spans).

**SampadaRao**

Thanks Andrew. But this is the best way I could fit the form fields in the defined layout.
Also the problem is not with div or span. It has to do with the fieldset having extra bottom margin in case of Firefox and compacting itself in Internet explorer. I looked around and there are many people having the same issue. To workaround with this, I have the below solution. For now, this solution is working. But I am not 100% convinced on this. I would request expert comments on this solution..

Code:

<html>
	
<!--Referenced from the URL -- http://rafael.adm.br/css_browser_selector/ -->
<script src="css_browser_selector.js" type="text/javascript"></script>
<style type="text/css">
<!-- This will work for all non IE browsers -->
.fieldset {
	border:none;
} /* No border */
<!-- This will work for all only IE browsers. Since IE is compacting the fieldset, adding an extra margin to the bottom.-->
.ie .fieldset {
	border:none;
	margin-bottom:4%;
}/* No border. Extra margin to the bottom for IE */
</style>

**AndrewSW**

I can't see any form fields, but perhaps you have other code that I haven't seen.

Divs and spans are not self-closing:

Code:

<span id="APRIndustryCount" name="APRIndustryCount" class="labelv12"/>
//    Should be
<span id="APRIndustryCount" name="APRIndustryCount" class="labelv12"></span>

Nor do they have "name" attributes (by default).

So your HTML is invalid and you will likely encounter further problems with the page.

But it's up to you

**SampadaRao**

Originally Posted by AndrewSW

I can't see any form fields, but perhaps you have other code that I haven't seen.

Divs and spans are not self-closing:

Code:

<span id="APRIndustryCount" name="APRIndustryCount" class="labelv12"/>
//    Should be
<span id="APRIndustryCount" name="APRIndustryCount" class="labelv12"></span>

Nor do they have "name" attributes (by default).

So your HTML is invalid and you will likely encounter further problems with the page.

But it's up to you

The span will get replaced dynamically as a label/textfield/textarea etc by the core(code) engine. It depends on the background logic.
I will change the code to use </span> instead of <span..../> . Thanks for educating me on this.
But do you think that this logic by using javascript and css together should be ok? I somehow hate to do this browser specific logic, but in this case I am forced to. These browser specific standards are really killing us. I dont use(like)IE, but as per the requirements, I have to get the standards working on all standard browsers.
The fieldset problem is a very common one and I wonder whats the approach.

Dev Shed Forums

Thread: Fieldset setting in IE and Firefox

Fieldset setting in IE and Firefox