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:
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;
}
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;
}