?
Solved

Using CSS to format a radio button and its label

Posted on 2006-05-06
6
Medium Priority
?
12,137 Views
Last Modified: 2012-06-21
I have some CSS code that I've used to format a radiobutton and its label.  I have been using this code to ensure that the label for the radio button doesn't wrap under it if it is shown on multiple lines.  There are two problems with this code.  One is that the radiobuttons and text are vertically aligned in the middle of the table cell.  This means that if there are more lines in one label than another in the row; the radiobuttons are no longer aligned.  The second problem is setting the width.  If I leave this blank, all the table columns end up squashed to the left.  I'm not particularly worried about working out this size, but I am concerned with the sizes working out differently in different browsers.

The code I have been using is below.  Please note that I cannot change the table format as it is output automatically by a system I can't change. I have full access to change stylesheets.  Thanks in advance.

     <style type="text/css">
           #rblist label {
               display:block;
               width:10em;
               float:right;}
                    
           #rblist input {
               display:block;
               float:left;}
     </style>

      <table id="rblist">
            <tr>
                  <td><input id="rblist_0" type="radio" name="rblist" value="1" /><label for="rblist_0">Long Text 1</label></td>
                  <td><input id="rblist_1" type="radio" name="rblist" value="2" /><label for="rblist_1">Long Text 2</label></td>
                  <td><input id="rblist_2" type="radio" name="rblist" value="3" /><label for="rblist_2">Long Text 3</label></td>
            </tr>
      </table>
0
Comment
Question by:Psychotext
  • 3
  • 2
6 Comments
 
LVL 8

Accepted Solution

by:
KennyTM earned 2000 total points
ID: 16623933
>> If I leave this blank, all the table columns end up squashed to the left.
Sorry I don't get what this means. Anyway, for the first problem it can be solved by assigning a "vertical-align" to the <td>'s.

----

     <table id="rblist" border="1">
          <tr>
               <td><input id="rblist_0" type="radio" name="rblist" value="1" /><label for="rblist_0">Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long  Text 1</label></td>
               <td><input id="rblist_1" type="radio" name="rblist" value="2" /><label for="rblist_1">Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long Text 2</label></td>
               <td><input id="rblist_2" type="radio" name="rblist" value="3" /><label for="rblist_2">Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long Text 3</label></td>
               <td><input id="rblist_3" type="radio" name="rblist" value="3" /><label for="rblist_3">SHORT TEXT</label></td>
          </tr>
          <tr>
               <td><input id="rblist_4" type="radio" name="rblist" value="1" /><label for="rblist_4">Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long  Text 1</label></td>
               <td><input id="rblist_5" type="radio" name="rblist" value="2" /><label for="rblist_5">Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long Text 2</label></td>
               <td><input id="rblist_6" type="radio" name="rblist" value="3" /><label for="rblist_6">SHORT TEXT</label></td>
               <td><input id="rblist_7" type="radio" name="rblist" value="3" /><label for="rblist_7">Long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long Text 3</label></td>
          </tr>
     </table>

----

     <style type="text/css">
#rblist td { vertical-align: top; }   /* to align at the top */

          #rblist label {
               display:block;
               width:10em;
               float:right;}
                 
          #rblist input {
               display:block;
               float:left;}
     </style>
0
 
LVL 2

Author Comment

by:Psychotext
ID: 16625048
Kinda hard to explain properly, but if I leave off the width setting the radio button and the label text are only on the same line when that line does not wrap and the first line ends up as right aligned.  The crushing up of the columns must have happened on another method I was trying.  

If I set the width it displays as expected, but for some reason if you change the size of the text in Firefox (Not IE) it places the text underneath the radio button and wont go back when you set your text size back to normal. Not a big issue, but interesting.
0
 
LVL 2

Author Comment

by:Psychotext
ID: 16625051
Oh, and the vertical-align setting worked perfectly, thanks.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Expert Comment

by:KennyTM
ID: 16625086
BTW, I think it's better to use text-align: and padding-left: in this case instead of float:. The text won't go underneath the radio because of the negative indent value ("outdented" :) ).

<style>
#rblist td {
vertical-align: top;
padding-left: 2em;
text-indent: -2em;
}
#rblist input {
width: 2em;
position: relative;
}
</style>
0
 
LVL 2

Author Comment

by:Psychotext
ID: 16625116
Oddly enough that last suggestion works fine for me in IE, but still wraps in Firefox.  If I increase the numbers, the table ends up indented quite a way from the left (it's a table in a table) but I think I can sort that out by setting a padding value on the outer table.
0
 

Expert Comment

by:CCHP_GRP
ID: 22790870
I have been searching for a way to fix multiline information in a radio button for what seems like forever!  I used KennyTM's suggestion and in 3 minutes my radio buttons look great.

Thank you so much for the help!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month16 days, 17 hours left to enroll

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question