Jump to content

Fieldset With A Fieldset - Incompatible With Display:table-row/cell?


mattmill30

Recommended Posts

Hi,I'm completely at a loss with how you would but fieldsets, within a fieldset..I can code it, but when i try to render it in Firefox or Konqueror, it has a little hissy fit.I then decided, it mustn't be possible to have sub-fieldsets, and so gave up.. but then i found this site:http://www.webstandards.org/learn/tutorial...s/intermediate/which assures me its possible!Can anyone tell me, where am i going wrong? is it the fact that i'm using display:table-row/cell in the divs within the sub-fieldsets?This is the code i'm using:

<form id="register" action="<?php echo $_SESSION['PHP_SELF']; ?>" method="post" style="display:inline-table; width:1px; padding:10px;">	<fieldset>		<legend>Register</legend>		<fieldset id="account">			<legend>Account</legend>			<div style="display:table-row;">				<div style="display:table-cell;">					<label for="register_account_email">Email:</label><input id="register_account_email" name="register_account_email" type="text" maxlength="255" />				</div>			</div>			<div style="display:table-row;">				<div style="display:table-cell;">					<label for="register_account_password">Password:</label><input id="register_account_password" name="register_account_password" type="password" maxlength="30" />				</div>			</div>			<div style="display:table-row;">				<div style="display:table-cell;">					<label for="register_account_password_compare">Password Again:</label><input id="register_account_password_compare" name="register_password_compare" type="password" maxlength="30" />				</div>			</div>			<input type="button" value="Check Availability" />		</fieldset>		<fieldset id="user">			<legend>Your Details</legend>			<div style="display:table-row;">				<div style="display:table-cell;">					<label for="register_user_forename">Forename:</label><input id="register_user_forename" name="register_user_forename" type="text" maxlength="16" />				</div>				<div style="display:table-cell;">					<label for="register_user_surname">Surname:</label><input id="register_user_surname" name="register_user_surname" type="text" maxlength="16" />				</div>			</div>			<div style="display:table-row;">				<div style="display:table-cell;">					<label for="register_user_telephone">Telephone:</label><input id="register_user_telephone" name="register_user_telephone" type="text" maxlength="16" />				</div>				<div style="display:table-cell;">					<label for="register_user_extention">Extention:</label><input id="register_user_extention" name="register_user_extention" type="text" maxlength="4" />				</div>			</div>		</fieldset>		<input type="submit" />	</fieldset></form>

What the problem is, with this code, no-matter what i try, it always treats the accounts fieldsets table-cells, as if they were just general div's.But, if i remove the top fieldset, all is well. I just don't understand it.Any ideas?TIAMatthew Millar

Link to comment
Share on other sites

Setting any div to display:table-row or display:table-cell is never a good idea, since IE6-7 won't understand it.Try an experiment. See what happens when you have two fieldsets surrounded by a container fieldset with minimal content inside each (just the <legend> and a button maybe). If it works, then something else is wrong.FWIW, I've never seen anyone put so many divs inside a fieldset before. I suspect you're doing it for design reasons (alignment?) rather than semantic reasons. There is certainly a better way. Try setting CSS properties of your <label> and <input> elements. Float, clear, display:block, margins, and/or padding should do what you need.

Link to comment
Share on other sites

Hi Deirdre,Yeh, the reason i was using the divs, was because of a problem with how to get the forms to fit to the contents.Do you know of a way of getting the form to resize to the width and heigth of its contents?The only way i know of is:

.form {display:inline-table;width:1px;}

Because of this i then used divs to get the rows and cells for the table.I suppose i should've done the rest with css, i'll make ammends.But, the above setup, logically, should render correctly, with both the ammend fieldsets and user fieldsets contents appearing in the same style?Because, if it should, i'll report this as a bug to the Gecko and WebKit teams, as it doesn't.You can see it here:http://www.tendervendors.com/dev/login-divs.htmlThanks,Matthew Millar

Link to comment
Share on other sites

CSS usually provides a way to do what you want without bending over backwards. Try this:

<style type="text/css">	form, fieldset {		display: inline;	}	fieldset fieldset {		display: block;	}	fieldset label {		display: block;		clear: both;		float: left;	}	fieldset input {		display: block;		float: left;	}	fieldset input[type="submit"], input[type="button"] {		clear: both;	}</style>

<form id="register" action="<?php echo $_SESSION['PHP_SELF']; ?>" method="post" >	<fieldset>		<legend>Register</legend>		<fieldset id="account">			<legend>Account</legend>			<label for="register_account_email">Email:</label>			<input id="register_account_email" name="register_account_email" type="text" maxlength="255" />			<label for="register_account_password">Password:</label>			<input id="register_account_password" name="register_account_password" type="password" maxlength="30" />			<label for="register_account_password_compare">Password Again:</label>			<input id="register_account_password_compare" name="register_password_compare" type="password" maxlength="30" />			<input type="button" value="Check Availability" />		</fieldset>		<fieldset id="user">			<legend>Your Details</legend>			<label for="register_user_title">Title:</label>			<input id="register_user_title" name="register_user_title" type="text" maxlength="4" />			<label for="register_user_forename">Forename:</label>			<input id="register_user_forename" name="register_user_forename" type="text" maxlength="16" />			<label for="register_user_surname">Surname:</label>			<input id="register_user_surname" name="register_user_surname" type="text" maxlength="16" />			<label for="register_user_telephone">Telephone:</label>			<input id="register_user_telephone" name="register_user_telephone" type="text" maxlength="16" />			<label for="register_user_extention">Extention:</label>			<input id="register_user_extention" name="register_user_extention" type="text" maxlength="4" />			<label for="register_user_mobile">Mobile:</label>			<input id="register_user_mobile" name="register_user_mobile" type="text" maxlength="16" />		</fieldset>		<input type="submit" />	</fieldset></form>

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...