Using CSS to switch left/right position of <label> and <input> in IE7+

Question

I have a form comprising a sequence of <label>, <input> pairs (one per line) as follows:

<ol style="list-style: none;">
  <li class="normal">
    <label>Channel Name</label>
    <input type="text">
  </li>
  <li class="reversed">
    <label>Subscribe to this channel</label>
    <input type="checkbox">
  </li>
</ol>

I'm looking for a pure-CSS way to modify the second line to display the <input> checkbox to the left of the <label> (i.e. exchange their order without modifying the HTML).

The following simple rule works perfectly in Firefox, Chrome, Safari, Opera, IE8+...

li.reversed input {
   float: left;
}

... but it looks awful on IE7: the <input> checkbox floats to the left (as required), but the <label> appears on the preceding line.

The simplest solution I can find that works on all browsers is to abandon float altogether and use absolute positioning, i.e.:

li.reversed {
   position: relative;
}
li.reversed label {
   position: absolute;
   left: 20px;
}

Can anyone suggest a better way? Many thanks...

Answer 1

Use the following style sheet instead:

.reversed {
  unicode-bidi: embed;
  direction: rtl;
  text-align: left;
}
.reversed * {
  unicode-bidi: embed;
  direction: ltr;
}

This looks a bit contrived, but it turns the element to a directionality isolate where the direction is right to left but inside its sub-elements left to right. The net effect is just that the visual layout order of the sub-elements, the checkbox and the label, is reversed.

Here's a fiddle of the code to see it in action.

Answer 2

This worked of me (you would want to target IE7, and maybe tweak the numbers slightly).

li.reversed input {
   float: left;
   margin-top: -1.2em; 
}

li.reversed label {
    margin-left: 20px;
}