Question

I am developing a web application which needs to work with both IE7 and Firefox 3.6. I am laying out the forms using CSS. The forms are pretty standard. I want each div (data-group) on its own line with the labels and options lined up together within the div (as a row). Here is the CSS that works in Firefox:

.data-group 
{
    /*display: inline-block;*/
    vertical-align: top;
    padding-top: 5px;
    padding-bottom: 5px;
}

.editor-label, .option1, .option2
{
    display: inline-block;
    /*float: left;*/
}

.editor-label
{
    width: 250px;
    vertical-align: top;
}

Unfortunately, this does not work in IE7. To achieve the same effect, I have to uncomment the two commented lines and comment the inline-block on .editor-label, .option1, .option2 selection. Unfortunately this breaks Firefox…and this really does not seem like the correct thing to do anyway (the Firefox way makes far more sense). (I can get this way to work in Firefox if I add a “clear” div where I have “clear: both” on that div’s class…but this seems like a hack.)

Am I missing something obvious here? Suggestions to help make this work in both browsers would be great.

Edit: Provide requested (trivialized) HTML.

    <div class="data-group">
        <div class="editor-label">
            <%: Html.CheckBoxFor(model => model.cb1)%>
            <%: Html.LabelFor(model => model.label1) %>
        </div>
        <div class="option1">
            <%: Html.TextBoxFor(model => model.tb2)%>
            <div class="label"><%: Html.LabelFor(model => model.label2) %></div>
        </div>
        <div class="validation">
            <div><%: Html.ValidationMessageFor(model => model.tb2) %></div>
        </div>
    </div>

    <!-- Repeat many diff. data-groups. -->
    <div class="data-group">
        <div class="editor-label">
            <%: Html.CheckBoxFor(model => model.cb1)%>
            <%: Html.LabelFor(model => model.label1) %>
        </div>
        <div class="option1">
            <%: Html.TextBoxFor(model => model.tb2)%>
            <div class="label"><%: Html.LabelFor(model => model.label2) %></div>
        </div>
        <div class="validation">
            <div><%: Html.ValidationMessageFor(model => model.tb2) %></div>
        </div>
    </div>

Answer 1

inline-block doesnt properly work in IE, http://work.arounds.org/using-inline-block-ie7-and-ie6/

You have to re-declare display:inline; on the block level elements that are given inline-block to IE. Meaning you have to redeclare the rule for the div you gave inline-block in a separate rule.

<!--[if lt IE 8]>
<style>
.editor-label { display:inline; zoom:1; }
</style>
<![endif]-->

This will most likely solve your issue. If not, please post a demo.