My Css will not line up the form elements

jecommera
jecommera used Ask the Experts™
on
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>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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>
captainTechnical Director

Commented:
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.

Author

Commented:
Great this is exactly what I was looking for - can you please advise why you have border 0 commented out?
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

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"...

Author

Commented:
Hi,

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

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

Open in new window

Author

Commented:
Hi,

Sorry no luck
the thing is, they actually do line up, but because radio buttons are round and are partly invisible (the square corners are there but invisible) it doesn't look like they do.

trying to get them to appear to align perfectly is asking for a lot of pain.
will they line up in every browser on every platform?
will they still line up if the page is zoomed?
screen res is changed?
font size increased?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial