Trying to get an asp check box to align in a table in IE

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:

Firefox version

However in IE, it is misaligned:

IE version

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.

please provide the css style in the class you have used, currently without any style we are able to see the label and checkbox inline in IE and all other browsers. — Murtaza, Dec 14 '11 at 11:56
The problem cannot be observed when tested in a simple setting. By default, oth IE and Firefox center cell contents vertically and make the cell just as high as needed for the content (plus 2px padding or so). There must be something else on the page that cases the problem, so please provide more context. — Jukka K. Korpela, Dec 14 '11 at 11:58
Haven't tested but : Try using `float:left` for both `label` and `input` and see if it works for you. — yaka, Dec 14 '11 at 11:59
@Kavousi - floating left is not perfect, but does improve the situation. Can you post it as an answer, as it is a good candidate for now. I had tried floating the textbox, but not both. — Schroedingers Cat, Dec 14 '11 at 12:25
Adding the CSS in the edit and the apparent added markup (class=displaytable for the table element) still does not reproduce the problem. Please post the URL of the page. — Jukka K. Korpela, Dec 14 '11 at 12:57
@SchroedingersCat Note that if you either put the checkbox inside the label, or fill the `for=''` field of the label with the checkboxe's `name`, you can click the label to activate the checkbox. This goes a long way to improve the usability of the checkbox! — ANeves, Dec 15 '11 at 09:58
@ANeves - but this is an asp.net generated check box/label combination, so I have no direct control over it. I agree, but it is not straightforward in this situation. — Schroedingers Cat, Dec 15 '11 at 10:10
Ah well, "we've all been there". (Maybe it's possible to send the name for the checkbox.) — ANeves, Dec 15 '11 at 13:08
If it was important - specifically, for a public site - I might consider using JQ to restructure it, but for an internal site it will have to do without. — Schroedingers Cat, Dec 15 '11 at 19:41

score 1 · Accepted Answer · edited May 23 '17 at 12:01

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.

edited May 23 '17 at 12:01

Community

1
1

answered Dec 14 '11 at 13:30

Jeroen

60,696
40
206
339

1

Thank you - I will try to put a jsfiddle together that shows the problem. And I might even solve it by doing so. – Schroedingers Cat Dec 15 '11 at 09:24
If you do solve it be sure to post it as an answer and then accept that answer (helping out folks that land here with a google search). – Jeroen Dec 15 '11 at 10:47
Absolutely. The jsfiddle is up there now ( see main question edit ) so someone must find an answer! – Schroedingers Cat Dec 15 '11 at 11:41
See you've found the problem already. I updated my answer too, but guess that wasn't your problem after all. – Jeroen Dec 15 '11 at 12:47
I'd found the problem, but your solution is better than mine. – Schroedingers Cat Dec 16 '11 at 11:01
Sorry - yes it was IE7. I thought some of my colleagues were using IE8, but it turns out they were not. – Schroedingers Cat Dec 16 '11 at 16:22

score 0 · Answer 2 · answered Dec 15 '11 at 12:43

Finally found the solution - thank you to those who contributed. The problem was a rogue float:right on the inputs. In Firefox, this works perfectly well, and floats the box over to the right hand side of the cell. However in IE, it causes the oddities seen, by floating the input to the right on another line.

I have solved this by including in my IE specific css file by overriding the float, and including some padding. The problem with this is that when the text is not all the same length, the boxes will not line up, which is why I wanted to put them on the right hand side. But this will have to do.

It so frustrates me having to do these IE fiddles, because the main browsers do not interpret the code in the same - or even equivalent - ways.

Trying to get an asp check box to align in a table in IE

2 Answers2