#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    1
    Rep Power
    0

    Fieldset setting in IE and Firefox


    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?
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    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.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    4
    Rep Power
    0
    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>
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    4
    Rep Power
    0
    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.
  8. #5
  9. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    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).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    4
    Rep Power
    0
    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>
  12. #7
  13. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    169
    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
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    4
    Rep Power
    0
    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.

IMN logo majestic logo threadwatch logo seochat tools logo