Problem with CSS's display: inline-block and IE7!

Question

I created this to simply explain my problem. It is of some list items being displayed as inline blocks. I had an original method that didn't work either, so I used this CSS.

http://jsbin.com/upexu/edit

This works great in FF and IE7, as a standalone.

Unfortunately, in my implementation on my site, it doesn't display correctly in IE7 (they appear stacked one above the other).

Firefox

IE7

Now can anyone tell me why they don't work in my example (see images above and look at site, it is in the far right (can't miss it).

It seems to work in IE7 if I give the list items an explicit width - but this seems dangerous, as well as an extra piece of maintenance I don't want to do. I could probably do li#nsw { width: 3.5em } but is ugly and I shouldn't have to.

I do use Eric Meyer's CSS Reset Reloaded.

If you know of a solution, please tell!

Thanks.

Update

Here is the HTML of the checkboxes

<ul class="checkboxes">
    <li><input type="radio" id="free-case-review-nsw" value="nsw" name="state" /><label for="free-case-review-nsw"><acronym title="New South Wales">NSW</acronym></label></li>

    <li><input type="radio" checked="checked" id="free-case-review-qld" value="qld" name="state" /><label for="free-case-review-qld"><acronym title="Queensland">QLD</acronym></label></li>

    <li><input type="radio" id="free-case-review-nt" value="nt" name="state" /><label for="free-case-review-nt"><acronym title="Northern Territory">NT</acronym></label></li>

    <li><input type="radio" id="free-case-review-other" value="other" name="state" /><label for="free-case-review-other">Other</label></li>
  </ul>

And here is the CSS

 #free-case-review-form .checkboxes {
        border: 1px solid #000;
        padding: 5px 0;
        margin-bottom: 8px;
        overflow: hidden;
    }

    #free-case-review-form .checkboxes li {
        display: inline-block;
        display: -moz-inline-box;
        *display: inline; /* for ie */
        zoom: 1;
        overflow: hidden;
    }

    #free-case-review-form .checkboxes li input {
        display: inline;
        width: auto;
        border: none;
        margin-bottom: 0;
        padding: 0;
        float: left;
    }

    #free-case-review-form .checkboxes li label {
        display: inline; /* just an attempt - they should be block level anyway */
        float: right;
    }

Though I do recommend looking at the site above, as a lot more CSS is inherited, especially by using the style reset.

Answer 1

Most likely, you accidentally triggered hasLayout on 1 of the children, either the input or the label

Answer 2

Far as I can tell, it's the "float: right" on the css for the label. Whatever you are doing, try doing it without setting the float: right on the label.

when I removed "float: right" it went back to inline on my IE.

Answer 3

I took the float: left off the input element and the float: right off the label element and it appears to work now, with everything being displayed inline.

So I guess elements that are made inline blocks can have not block level elements inside? Makes (sort of) sense! I would love some clarification though.