CODEWITHSUNDEEP
asp.nethtmlinternet-explorercheckbox
Schroedingers Cat
Schroedingers Cat

Reputation: 3129

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

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.

Upvotes: 1

Views: 658

Answers (2)

Jeroen
Jeroen

Reputation: 63719

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

Upvotes: 1

Schroedingers Cat
Schroedingers Cat

Reputation: 3129

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.

Upvotes: 0

Related Questions