Search code examples
csshtmlstylesheet

Unable to render MVC Checkbox/Label combo in one horizontal line


I have an MVC 4 (Beta) View with the following markup:

<div id="ConsentToMarketingEmailsPart">
    @Html.LabelFor(m => m.ConsentToMarketingEmails)
    @Html.CheckBoxWithTooltipFor(m => m.ConsentToMarketingEmails, new { type = "checkbox", @checked = "checked" })
    @Html.ValidationMessageFor(m => m.ConsentToMarketingEmails)
</div>

Although I've tried many patterns, here is an example of a simple CSS style applied to render the Label --> then CheckBox in one horizontal line.

#ConsentToMarketingEmailsPart
{
    display:inline;
}

No matter what I do it always renders as follows in IE9:

enter image description here

What can I do to make this all render on one line?

Note: There is plenty of horizontal space so wrapping should not be an issue.

UPDATE


The following markup is what currently gets rendered:

<div id="ConsentToMarketingEmailsPart">
    <label for="ConsentToMarketingEmails">I consent to Marketing Emails</label>
    <input data-val="true" data-val-required="The I consent to Marketing Emails field is required." id="ConsentToMarketingEmails" name="ConsentToMarketingEmails" title="Indicates your willingness to except marketing emails" type="checkbox" value="true" /><input name="ConsentToMarketingEmails" type="hidden" value="false" />
    <span class="field-validation-valid" data-valmsg-for="ConsentToMarketingEmails" data-valmsg-replace="true"></span>
</div>

This now has the following style which appears to work everywhere except IE9:

#ConsentToMarketingEmailsPart
{
    display:inline;
}

#ConsentToMarketingEmailsPart label
{
    float: left;
}

Solution

  • Figured out the problem... The Label element had an alternate display set at a higher level in the document. In IE9 this translated to the result you saw in the Question. Here was the offending CSS.

    frameset label 
    { 
        display: block; 
    }