Question

I am creating a form with <ol>, <label> and <textbox> in asp.net
the form looks like this:

1. Question 1? ___Textbox1____
2. Question Number 2? ____TextBox2____

I want the textboxes to appear in same column (i.e. in same vertical column) like this:

1. Question 1?           ___Textbox1___
2. Question Number 2?    ___TextBox2___

My code looks like this:

        <ol start="1">
            <li class="qOpenEnd">
                <asp:Label ID="lblQ1" AssociatedControlID="txtID1" runat="server">
                    Question1
                </asp:Label>
                <asp:TextBox ID="txtID1" runat="server" />
            </li>

            <li class="qOpenEnd">
                <asp:Label ID="lblQ2" AssociatedControlID="txtID2" runat="server">
                    Question Number 2?
                </asp:Label>
                <asp:TextBox ID="txtID2" runat="server" />
            </li>
        </ol>

My CSS looks like this:

 .qOpenEnd
 {
  float: left;
  clear: left;   
  width: 100%;
  list-style: decimal;
 }
 .qOpenEnd label
 {
  float: left;
  clear: left;
  width: 50%;
  margin-right: 5em;
 }

This working fine for Firefox, but in IE9 the number isn’t showing up!
Any idea? The number WAS showing up in IE9 before I added the float:left, but at that time the textboxes weren’t aligned.

Answer 1

This is your code output in my project on IE9:

Make sure you are in IE9 Standards mode, and not compatibility view (hit F12 to view/switch modes).