Question

I have looked through other similar entries, and not found a solution.

I have an asp checkbox, generated by code behind. The html it generates is:

<span class="covered">
    <label for="">Multi</label>
    <input type="checkbox">
</span>

This is contained within a table cell:

<td>
    <input class="cniid" type="hidden" value="3375" name="">
    <input class="accid" type="hidden" value="759880" name="">
    <span class="covered">
        <label for="">Multi</label>
        <input type="checkbox">
    </span>
</td>

In Firefox this works fine:

However in IE, it is misaligned:

How can I fix this, and make the IE version work like the FF version?

I didn’t include css because there is none relevant – the styling around the td is as follows:

.displaytable {font-size: smaller;}
body {color: #7B0343;font-family: "Tahoma","Lucida Grande","Segoe UI",Arial,Helvetica,Verdana,sans-serif;font-size: 14px;font-weight: bold;}

The classes are more used for js code than styling in this case.

Added js fiddle which shows this. I will continue working on the fiddle to reduce this code to the point where it still produces the problem. So there is more than this, but I have attempted to include just what I need to.

Answer 1

** Update after Question Edit **
Looking at the fiddle I can reproduce this problem only on IE7 and lower. There are several issues with IE7 and display CSS, see for example this SO question.

That answer actually seems to apply to your code as well. I’ve forked your fiddle and updated the CSS such that it works in IE7 too. This is the jsfiddle. In short, I’ve replaced all your CSS with:

.covered input {
    float: right;
    display: inline-block; 
    zoom: 1;
    *display: inline; 
}
.covered label {  float: left; }

Original answer:

I have pasted your code in this jsfiddle, which looks the same in IE9 and FF for me. Some things that could be the problem:

• IE is caching something (css perhaps), hit ctrl+f5 or use F12 to set it to always refresh
• You’re using a different IE version that’s showing this behavior (what modes do you have if you hit F12)
• CSS (most likely source I’d guess)

If it is indeed CSS try:

• playing around with the display property of span/label/input as well as the width of those elements
• hitting F12 in IE, selecting the elements in the TD, and inspect the styles on them to see what’s happening
• stripping it from your site one piece at the time until you found the responsible code
• setting something like span { border: 1px solid fuchsia; }, and dito for inputs, labels, etc

If all those things don’t help, try to make a jsfiddle that shows this problem and link it in your question.