<fieldset> work around ????

[ppetree]

Situation:
I have a form (dont we all! LOL)
It's in a table (sigh)
The table has 4 rows <tr> and 2 columns
Each row has a <fieldset> containing multiple <labels> and various types of input fields (input, selects, radio, check)
The CSS formats the labels to appear above the input fields

The problem:
I want two label/input fields on the same line. If I use a <tr><td> to accomplish this, the <tr> terminates the the <fieldset>

<label class='column' id='labcity' for='ajcity'>City:</label><select id='ajcity' name='city'></select>
<label class='column' id='labcounty' for='ajcounty'>County:</label><select id='ajcounty' name='county' class='required'></select>

label.column
{
  font-family:verdana;
  font-size: 10px; 
  color: blue;
  margin-bottom: 0px;
  display: block;
}

fieldset
{
  border: 1px solid orange;
  padding: 6px 6px;
}

Questions:

1. Is there a way to extend a <fieldset> around multiple <tr> rows?
2. How do you get multiple labels/input combos on one line?
   (I'm trying to get state and zip on one line with labels above the inputs)

You can view the form here

Thanks!

[twiss]

My solution would be to put a div around both and give them float:left.

[ko ko]

Both are inline, and they'll appear one beside one, you may not need to float them. Do as @twiss said, wrap with 'DIV'.

If you use 'float', no problem. But, float can cause some issues and you need to fix that.

[twiss]

I meant the div's, not the inputs :)

[ppetree]

I tried the div float left and got a really wonky/unexpected result.

The code used was:

<div style='float:left'>
<label class='column' id='labstate' for='ajstate'>State:</label><?php fill_states(); ?> 
 <label class='column' id='labzip' for='ajzip'>5 Digit Zip:</label><input type='text' name='zip' size='5' maxlength='5' id='ajzip' class='required validate-digits'><br />
</div>
<label class='column' id='labcity' for='ajcity'>City:</label><select id='ajcity' name='city'></select><br />
<label class='column' id='labcounty' for='ajcounty'>County:</label><select id='ajcounty' name='county' class='required'></select><br />

What I got was state and city on the same line and zip on the line below that! LOL Not sure what happened but I wont get a chance to play with it again until tomorrow morning.

If you use the link supplied above but replace the index.php file with indexJ.php (not the capital J) you'll see the changes I'm trying to do...

[twiss]

Try:

<div style="float:left">
  <label id="labstate" class="column" for="ajstate">State:</label>
  <?php fill_states(); ?>
</div>
<div style="float:left;margin-left:20px">
  <label id="labzip" class="column" for="ajzip">5 Digit Zip:</label>
  <input id="ajzip" class="required validate-digits" type="text" name="zip" size="5" maxlength="5">
</div>
<br>
<div style="clear:both">

[ppetree]

Try:

<div style="float:left">
  <label id="labstate" class="column" for="ajstate">State:</label>
  <?php fill_states(); ?>
</div>
<div style="float:left;margin-left:20px">
  <label id="labzip" class="column" for="ajzip">5 Digit Zip:</label>
  <input id="ajzip" class="required validate-digits" type="text" name="zip" size="5" maxlength="5">
</div>
<br>
<div style="clear:both">

Thanks for that twiss, I played around with this for about 3 hours this morning and have tried to understand whats going on but I just keep getting really wonky results.

The label for zip is out of line (the edit field is much further to the right) and then the housing type stays indented below the county select... tried everything to get that label/radio combination to left align but it insists on alligning itself with the county field.

What I have is this:

<div style='float:left'>
<label class='column' id='labstate' for='ajstate'>State:</label><?php fill_states(); ?>
</div>
<div style="float:left;margin-left:20px">  
<label class='column' id='labzip' for='ajzip'>5 Digit Zip:</label><input type='text' name='zip' size='5' maxlength='5' id='ajzip' class='required validate-digits'>
</div>
<div style="clear:both"></div>
<div style='float:left'>              
<label class='column' id='labcity' for='ajcity'>City:</label><select id='ajcity' name='city'></select>
</div>
<div style="float:left;margin-left:20px">  
<label class='column' id='labcounty' for='ajcounty'>County:</label><select id='ajcounty' name='county' class='required'></select>
<div style="clear:both">&nbsp;</div>
<div margin-left:0px' >              
<label class='column' id='labtype' for='ajtype'>Residence Type:</label>
  <div class='field-label'>
  <input type='radio' name='type' id='ajtype' value='4'/> Single Family Home &nbsp;&nbsp;&nbsp;
  <input type='radio' name='type' id='ajtype'value='3' /> Condo/Townhome  &nbsp;&nbsp;&nbsp;
  <input type='radio' name='type' id='ajtype'value='2' /> Apartment  &nbsp;&nbsp;&nbsp;
  <input type='radio' name='type' id='ajtype'value='1' class='validate-one-required'/> Business
  </div>
</div>

The CSS is still (and no other CSS has any of these classes or elements):

fieldset
{
  border: 1px solid orange;
  padding: 6px 6px;
}

label
{
  font-family:verdana;
  font-size: 10px; 
  color: blue;
}

label.column
{
  font-family:verdana;
  font-size: 10px; 
  color: blue;
  margin-bottom: 0px;
  display: block;
}

input,select,textarea
{
  font-family: verdana; 
  font-size: 10px; 
  font-weight: bold;
  background-color: #edf8fb; 
  color: #000066;
  border: 1px solid blue;
  margin-bottom: 6px;
}

[ko ko]

Line #12, missing close tag '</div>' for country.

<label class='column' id='labcounty' for='ajcounty'>County:</label><select id='ajcounty' name='county' class='required'></select>

Line #14, missing attribute name 'style'.

<div margin-left:0px' >

should be:

<div style="margin-left: 0px;">

And you can't set same 'id' attribute with multiple elements. ID stands for identifies one and only one HTML element in one document.

<input type='radio' name='type' id='ajtype' value='4'/> Single Family Home &nbsp;&nbsp;&nbsp;
<input type='radio' name='type' id='ajtype'value='3' /> Condo/Townhome &nbsp;&nbsp;&nbsp;
<input type='radio' name='type' id='ajtype'value='2' /> Apartment &nbsp;&nbsp;&nbsp;
<input type='radio' name='type' id='ajtype'value='1' class='validate-one-required'/> Business

The above will fail on validator. http://validator.w3.org/

[ppetree]

Line #12, missing close tag '</div>' for country.

Line #14, missing attribute name 'style'.

should be:

<div style="margin-left: 0px;">

And you can't set same 'id' attribute with multiple elements. ID stands for identifies one and only one HTML element in one document.

The above will fail on validator. http://validator.w3.org/

Twiss, thanks for getting me started down this path... I think! LOL

Zero, thanks for the extra set of eyes... I have stared at this page until I am completely cross eyed! - (from 8:30a until now just trying to get the below problem fixed! LOL)

So far, its kinda working... looks and works great on Firefox but under IE9 the zip code field still doesn't line up... the input control is indented 4/5 characters. I've tried everything I know, can google or even guess about but I can't figure out how to get it right.

[ko ko]

Try to use 'size' instead of the proper width for each input field.

input {
    width: 33px; /* you can extend proper width as much as you need */
}

Fill the background-color to all box wrapping the form elements in demo. So, you can check where the elements align porperly or are they stap with the place where you want to stay. Like this example.

fieldset div {
    background: blue;
}
fieldset label.column {
    background: red;
}

This method will point you closer and help to make a better vision to approach.
Hope this help.

[ppetree]

Try to use 'size' instead of the proper width for each input field.

input {
    width: 33px; /* you can extend proper width as much as you need */
}

Fill the background-color to all box wrapping the form elements in demo. So, you can check where the elements align porperly or are they stap with the place where you want to stay. Like this example.

fieldset div {
    background: blue;
}
fieldset label.column {
    background: red;
}

This method will point you closer and help to make a better vision to approach.
Hope this help.

Nice tricks... I'll remember those.

Turns out that margin-left:20px was behaving badly. I changed it to padding-left:20px and the problems all went away and it now looks fine in all browsers.

Thanks for all your help!

[aDevS]

Situation:
I have a form (dont we all! LOL)
It's in a table (sigh)
The table has 4 rows <tr> and 2 columns
Each row has a <fieldset> containing multiple <labels> and various types of input fields (input, selects, radio, check)
The CSS formats the labels to appear above the input fields

The problem:
I want two label/input fields on the same line. If I use a <tr><td> to accomplish this, the <tr> terminates the the <fieldset>

<label class='column' id='labcity' for='ajcity'>City:</label><select id='ajcity' name='city'></select>
<label class='column' id='labcounty' for='ajcounty'>County:</label><select id='ajcounty' name='county' class='required'></select>

label.column
{
  font-family:verdana;
  font-size: 10px; 
  color: blue;
  margin-bottom: 0px;
  display: block;
}

fieldset
{
  border: 1px solid orange;
  padding: 6px 6px;
}

Questions:

1. Is there a way to extend a <fieldset> around multiple <tr> rows?
2. How do you get multiple labels/input combos on one line?
   (I'm trying to get state and zip on one line with labels above the inputs)

You can view the form here

Thanks!

Try & add following snippet to 'label.column' class & give some static width. Hope this solves your problem

float:left