asked on

My Css will not line up the form elements

Hi,

Can someone please advise what I doing wrong with code below:

<html>
      <head><title>Test</title>

<style text="text/css">

#controls span {
float:left;
padding:0.5em;
}

#select_cm, #select_in {
float:left;
padding:0.5em;
}

</style>

</head>

<body>
<div id="controls">
<span>Select metric</span>
                        <form id="metric_form">
<label for="select_cm">cm</label>
<input type="radio" value="cm" name="metrics" id="select_cm" name="metric" />
<label for="select_in">in</label>
<input type="radio" value="in" name="metrics" id="select_in" name="metric" />
      </form>

</div

</body>
</html>

basicinstinct

Note that asking the "question" which your radio buttons answer in a span is not accessible:

<span>Select metric</span> BAD

You need to "ask the question" for a radio button group in a fieldset legend.

This is so that your form is WCAG compliant and accessible assisstive technologies like screenreaders.

a more conventional design would be this:

<html>
<head><title>Test</title>

<style text="text/css">
      fieldset{
            display:inline-block;
            /* border:none */
      }
</style>

</head>

<body>
<form name="metric_form" id="metric_form">
      <fieldset id="controls">
            <legend>Select metric</legend>
<label for="select_cm">cm</label>
<input type="radio" value="cm" name="metrics" id="select_cm" name="metric" />
<label for="select_in">in</label>
<input type="radio" value="in" name="metrics" id="select_in" name="metric" />
      </fieldset>
</form>
</body>

captain

How about:

<html>
      <head><title>Test</title>

<style text="text/css">

#controls span {
float:left;
padding:0.5em;
}

#select_cm, #select_in{
margin-top:10px
}


</style>

</head>

<body>
<div id="controls">
            <span>Select metric</span>
                        <form id="metric_form">
                  
                  <input type="radio" value="cm" name="metrics" id="select_cm" name="metric" /> <label for="select_cm">cm</label>
                  
                  <input type="radio" value="in" name="metrics" id="select_in" name="metric" /><label for="select_in">in</label>
                  </form>
           
           
      </div
     
</body>
</html>

Open in new window

EDIT: Sorry did not see above post, my response simply addresses the layout, not practice.

hth
capt.

jecommera

ASKER

Great this is exactly what I was looking for - can you please advise why you have border 0 commented out?

basicinstinct

because i like the border but thought you may not, so i put the line in to remove it but commented it out :)

by the way, the proper use of the right html elements (like fieldsets around radio button groups, legend, label etc) is called "semantic html"...

jecommera

ASKER

Hi,

Almost there - I notice that the select metric and radio buttons etc are still not inline.

basicinstinct

try adding this css

label, input[type="radio"] 
{
  vertical-align: middle;
}

Open in new window

jecommera

ASKER

Hi,

Sorry no luck

ASKER CERTIFIED SOLUTION

basicinstinct

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial