display：内联表等效crossbrower

Question

I have 2 radiobutton inside a <td> attribute in a HTML table. They both have a <label> tag. As we know, the table tag doesnt have the attribute width, and I'm trying to find a crossbrowser solution to set a space between the labels of each radiobutton.

I have this code:

<td class="changeUnitsSetLabelWidth">
  <?php echo $form->radio("changeUnitsMode",UnitsTabComponent::SET_ALL_METRIC)->set("id","changeUnitsMode_metric") . $form->label("changeUnitsMode", "Metric")->set("for","changeUnitsMode_metric");
        echo $form->radio("changeUnitsMode", UnitsTabComponent::SET_ALL_IMPERIAL)->set("id","changeUnitsMode_imperial") . $form->label("changeUnitsMode", "Imperial")->set("for","changeUnitsMode_imperial");
  ?>
</td>

and I added the following line in my CSS:

.changeUnitsSetLabelWidth label{ display: inline-table; width: 80px;}

After searching on the internet, I found it doesnt work for IE7 (what a news!?!) so I'd like you to help me to find another way to do this display: inline-table, in a way I can set the width in the label.

Answer 1

using display:inline-table does not make any sense here. Just set display:inline-block and set a width and a margin for the space between and you should be fine.

The IE7 hack for behaving like inline-block is:

 zoom: 1;
 *display: inline;

Answer 2

Try this:

.changeUnitsSetLabelWidth input,
.changeUnitsSetLabelWidth label {
    float: left;
}
.changeUnitsSetLabelWidth label {
    padding-left: 10px;
    padding-right: 10px;
    width: 80px;
}

Answer 3

The solution I found was changing it all and, instead of using inside a <td> attribute, I used it in a <div> <span> attribute and it worked well. Thanks for the help

Answer 4

My issue was solved by

.my-class{
    *display: inline; 
    zoom: 1; 
    vertical-align: top;` 
}

It kept all elements top aligned.