CSS display: inline-block doesn't work in 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

firefox

IE7

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.

You should post the actual html + css. It's hard to get the html from the site because the html is built — santosc
– santosc, Commented Jan 14, 2010 at 3:40
That header is really evil! Specially because as it isn't done in flash Flashblock didn't block it :P I wan't my webpages as my car trips: unsurprising and with little unexpected movements/distractions. — Esteban Küber
– Esteban Küber, Commented Jan 14, 2010 at 3:50
You can use FireBug to view the HTML from the form. I'll post an excerpt anyway, — alex
– alex, Commented Jan 14, 2010 at 3:53

santosc · Accepted Answer · 2010-01-14 04:09:27Z

9

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.

answered Jan 14, 2010 at 4:09

santosc

1,2838 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

alex Over a year ago

+1 and accepted answer - because you answered with my solution as I was typing it :D

K Prime · Accepted Answer · 2010-01-14 03:40:14Z

0

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

answered Jan 14, 2010 at 3:40

K Prime

5,8791 gold badge28 silver badges19 bronze badges

1 Comment

alex Over a year ago

Perhaps, except I float the input left and the label right, meaning they will automatically become block level elements right? Thanks for your answer.

Collectives™ on Stack Overflow

CSS display: inline-block doesn't work in IE7

Firefox

IE7

Update

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Firefox

IE7

Update

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related