Cannot display MVC Checkbox / Label command in one horizontal line

Question

I have 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 have tried many templates, here is an example of a simple CSS style used to render the Label → and CheckBox in the same horizontal line.

 #ConsentToMarketingEmailsPart { display:inline; } 

No matter what I do, it always looks like this in IE9:

What can I do to do it all on one line?

Note There is a lot of horizontal space, so packaging should not be a problem.

UPDATE

---

The following markup is currently being visualized:

 <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> 

Now this style has the following style that works everywhere except IE9:

 #ConsentToMarketingEmailsPart { display:inline; } #ConsentToMarketingEmailsPart label { float: left; } 

Answer 1

I clarified the problem ... The Label element had an alternative display set at a higher level in the document. In IE9, this translates to the result you saw in the Question. Here was offensive CSS.

 frameset label { display: block; } 

Answer 2

One of the methods.

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

Answer 3

Try putting the label to the left:

 label { float: left; } 

Answer 4

I had the same problem and I found a real solution how to show the checkbox and label inline

 @Html.CheckBoxFor(m => m.RememberMe) @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" }) 

Solution taken from MVC 4 web application template.