display: inline-table equivalent 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;