Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

fieldset legend css ff 1

Status
Not open for further replies.
cappmgr

cappmgr

Programmer
Jan 29, 2003
639
US
This looks ok in IE but FF lengthens out the field set and legend. Also the Case County label seems to be a bit of a hack.
I am in a new shop where all input forms are tables, tr, td and would like to use css.

Any help or are most comments welcome.
Marty

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> Input Form No tables </TITLE>
	<style  TYPE="text/css">
	
		.BodyFont {
		font-family: Arial, Helvetica, sans-serif, Verdana;
		font-size: 0.7em;
		background-color: #ECF8FF;   
		}
		
		#container {
		width: 100%;
		border: 0.1252 solid Navy;
		margin: 0.626em;
		margin-left: auto;
		margin-right: auto;
		padding: 0.626em;}

		#innercontainer {
		width: 100%;
		border: 0em;
		margin-left: auto;
		margin-right: auto;
		padding: 0.626em;}

		#innercontainer1 {
		width: 100%;
		border: 0em;
		margin-left: auto;
		margin-right: auto;
		padding: 0.626em;
		}

		h1 {
		font-family: Arial, Helvetica, sans-serif, Verdana;
		font-size: 1.8em;
		font-weight: bold;
		text-align: center;
		display: block;
		color: Navy;
		}

		label {
		font-family: Arial, Helvetica, sans-serif, Verdana;
		font-size: 1.1em;
		font-weight: bold;
		width: 4em;
		float: left;
		text-align: right;
		margin-right: 0.5em;
		display: block;
		color: Navy;
		}

		input
		{
		float: left;
		background: #ffffff;
		}

		fieldset
		{
		width: 100%;
		position: relative;
		border: 0.2em solid Navy;
		margin-left: auto;
		margin-right: auto;
		padding: 1em;
		}

		.fieldset1
		{
		width: 45%;
		position: relative;
		border: 0.1em solid Navy;
		margin-left: 1.5em;
		margin-right: 0.5em;
		padding: 0em;
		}

		legend
		{
		font-size: 2em;
		color: #fff;
		background-color: #9ab4d1;
		border: 0.1em solid Navy;
		padding: 0.1252em 0.03756em;
		}

		.btn
		{
		font-family: Arial, Helvetica, sans-serif, Verdana;
		color: White;
		font-size: 1.2em;
		font-weight: bold;
		background-color: #9ab4d1;
	}
	</style>
 </HEAD>

 <BODY class="bodyfont">
	<div id="container" name="container">
		<h1>Input Form No tables</h1>
		<div id="innercontainer" name="innercontainer">
			 <form action="#">
				<fieldset>
				  <legend><span>Mother's Information</span></legend>
					<div id="innercontainer1" name="innercontainer1">
					<label for="name">Name</label> <input type="text" id="name" />
					<label for="address">Street</label> <input type="text" id="address" />
					<label for="city">City</label> <input type="text" id="city" />
					<label for="state">State</label> <input type="text" id="state" />
					</div>
					<div id="innercontainer1">
					<label for="phone">Phone</label> <input type="text" id="phone" />
					<label for="e-mail">E-mail</label> <input type="text" id="e-mail" />
					</div>
					<input class="btn" type="button" value="Submit" /><input class="btn" type="button" value="Submit" />
				</fieldset>			

				<fieldset>
				<legend>Infant's Inormation</legend>
					<div id="innercontainer1" name="innercontainer1">
					<label for="infantName">Name</label> <input type="text" id="infantName" />
					<label for="infantDOB">DOB</label> <input type="text" id="infantDOB" />
					<a href="javascript:show_calendar('InfantInfo.infantDOB');" onmouseover="window.status='Date Picker';return true;" onmouseout="window.status='';return true;"/>
					<img src="jsp/img/Cal_icon.gif" width=24 height=22 border=0></a>	
					<span class="fieldset1">
					<label for="infantSex">Sex</label>
					<label for="infantSex">Male</label><input type="radio" name="infantSex" id="infantSexM"/>
					<label for="infantSex">Female</label><input type="radio" name="infantSex" id="infantSexF"/>
					</span>									
					<span><b><font size="2" valign="top" color="Navy">Case County:</font></b>
						<select name="mothersCaseCounty" class="RegSelect"></option><option value="001" >Albany</option><option value="003" >Allegany</option><option value="005" >Bronx</option><option value="007" >Broome</option><option value="009" >Cattaraugus</option><option value="011" >Cayuga</option></select>
					</span>				
					</div>
					<div id="innercontainer1" name="innercontainer1">
					<input class="btn" type="button" value="Submit" /><input class="btn" type="button" value="Submit" />
					</div>
				</fieldset>			
			</form>
		</div>
	</div>
 </BODY>
</HTML>
 
Sort by date Sort by votes
Your elements are generally to big to fit.

Width of an element refers only to the width of the content. Padding, margins and borders are added on top of that. Since most of your elements are told to be 100% wide and have margin, padding or border in addition to that, they will hang over. IE will use a different box model if in quirks mode (because you're not using a complete doctype) and this is what makes IE display the page like you want it to. I suggest you:

1. Add a proper doctype.
2. Fix validation errors.
3. Redo the page so that it shows correctly in FF and then fix tiny IE errors, if they crop up.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
1 and 2 complete. I used and it is good.
I cannot get the radio and dropdown on the same line with the two other inputs.
Any input appreciated
Marty
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL] 
<HTML>
 <HEAD>
  <TITLE> Input Form No tables </TITLE>
	<style  TYPE="text/css">
	
		.bodyfont {
		background-color: #ECF8FF;   
		}
		
		#container {
		width: 98%;
		border: 0.15em solid Navy;
		margin: 0.0em; 
		margin-left: auto;
		margin-right: auto;
		padding: 0.0em;
		}

		#innercontainer {
		width: 95%;
		border: .15em;
		margin-left: auto;
		margin-right: auto;
		padding: 0.313em;
		}

		.innercontainer1 {
		width: 95%;
		border: .15em;
		margin-left: auto;
		margin-right: auto;
		padding: 0.313em;
		}

		.innercontainer2 {
		width: 20%;
		border: .15em solid Navy;
		margin-left: auto;
		margin-right: auto;
/*		padding: 0.313em;  */
		}

		h1 {
		font-family: Arial, Helvetica, sans-serif, Verdana;
		font-size: 1.8em;
		font-weight: bold;
		text-align: center;
		display: block;
		color: Navy;
		}

		label {
		font-family: Arial, Helvetica, sans-serif, Verdana;
		font-size: 0.7em;
		font-weight: bold;
		width: 3em;
		float: left;
		text-align: right;
		margin-right: 0.5em;
		margin-right: 0.25em;
		display: block;
		color: Navy;
		}

		input
		{
		float: left;
		background: #ffffff;
		}

		select
		{
		float: left;
		background: #ffffff;
		}

		fieldset
		{
		position: relative;
		border: 0.15em solid Navy;
		margin-left: auto;
		margin-right: auto;
		padding: 1em;
		}

		.fieldset1
		{
		width: 35%; 
		position: relative;
		border: 0.1em solid Navy;
		margin-left: 1.5em;
		margin-right: 0.5em;
		padding: .5em;
		}

		legend
		{
		font-size: 1.2em;
		color: #fff;
		background-color: #9ab4d1;
		border: 0.1em solid Navy;
		padding: 0.1252em 0.03756em;
		}

		.btn
		{
		font-family: Arial, Helvetica, sans-serif, Verdana;
		color: White;
		font-size: 0.8em;
		font-weight: bold;
		background-color: #9ab4d1;
	}
	</style>
 </HEAD>

 <BODY class="bodyfont">
	<h1>Input Form No tables</h1>
	<div id="container">
		<div id="innercontainer">
			 <form action="#">
				<fieldset>
				  <legend><span>Mother's Information</span></legend>
					<div class="innercontainer1">
					<label for="name">Name</label> <input type="text" id="name" >
					<label for="address">Street</label> <input type="text" id="address" >
					<label for="city">City</label> <input type="text" id="city" >
					<label for="state">State</label> <input type="text" id="state" >
					</div>
					<br>
					<div class="innercontainer1">
					<label for="phone">Phone</label> <input type="text" id="phone" >
					<label for="e-mail">E-mail</label> <input type="text" id="e-mail" >
					</div>
					<br>
					<div class="innercontainer1">
					<input class="btn" type="button" value="Submit" ><input class="btn" type="button" value="Submit" >
					</div>
				</fieldset>			
				<P>
				<fieldset>
				<legend>Infant's Inormation</legend>
					<div class="innercontainer1">
					<label for="infantName">Name</label> <input type="text" id="infantName" >
					<label for="infantDOB">DOB</label> <input type="text" id="infantDOB" >
					<a href="javascript:show_calendar('InfantInfo.infantDOB');" onmouseover="window.status='Date Picker';return true;" onmouseout="window.status='';return true;" >
					<img src="jsp/img/Cal_icon.gif" width="24" height="22" alt="CC" ></a>	
					<label>Sex</label>
					<label>M</label><input style="border:none" type="radio" name="infantSex">
					<label>F</label><input style="border:none" type="radio" name="infantSex">
					<label for="mothersCaseCounty">Case County</label>
						<select name="mothersCaseCounty" id="mothersCaseCounty"><option value="001" >Albany</option><option value="003" >Allegany</option><option value="005" >Bronx</option><option value="007" >Broome</option><option value="009" >Cattaraugus</option><option value="011" >Cayuga</option></select>			
					</div>
					<br>
					<div class="innercontainer1">
					<input class="btn" type="button" value="Submit" ><input class="btn" type="button" value="Submit" >
					</div>
				</fieldset>			
			</form>
		</div>
	</div>
 </BODY>
</HTML>
 
Upvote 0 Downvote
Ther must be enought real estate because if i put Sex and Case Couny before Name and DOB it fits fine.
Marty
 
Upvote 0 Downvote
I'm sorry, I'm having trouble picturing where the problem is. Could you put the mock up page somewhere up for us to see and post a link to it? That would make it easier for us to debug.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Your calendar button (<a>) is not floated, so it breaks the floats at that point and pushes elements following it lower. You can either float the calendar button or try to float other stuff before the button.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]
 
Upvote 0 Downvote
Thank you Vragabond,
What I did was wrap the calender in the label. That did it. I believe it is the same thing you said since label is a float.
Thank you very much.
I'll be asking more in the near future, I have learned much already.
Thanks again,

Marty

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
741
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
593
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
628
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
204
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top