ASP.NET code rendered in Chrome looks different - asp.net

Question

I was wondering why the following code:
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None
AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>
produces the combobox with label "Days" to the right off of it in IE9 and FireFox but when I run it using Chrome the "Days" label appears below the combo box?
How do I make it to be drawn to the right off the combo box like the rest of the browsers?

Answer 1

First up the Combo Box is not part of the "Standard" asp.net controls. I'm assuming you are using the asp.net AJAX Toolkit for this. As the Combo box is a compound control it does not render "Clean HTML" eg:
<select id="DropDown1"></select> Days
Instead it renders:
<div id="DropDown1" style="display:inline-block;">
<table id="DropDown1_Table"
class="ajax__combobox_inputcontainer"
cellspacing="0"
cellpadding="0"
border="0"
style="display:inline-block;border-width:0px;border-style:None;border-collapse:collapse;position:relative;top:5px;">
<tr>
<td class="ajax__combobox_textboxcontainer">
<input name="DropDown1$TextBox"
type="text"
id="DropDown1_TextBox"
autocomplete="off"
style="width:30px;" />
</td>
<td class="ajax__combobox_buttoncontainer">
<button id="DropDown1_Button"
type="button"
style="visibility:hidden;"></button>
</td>
</tr>
</table>
<input type="hidden"
name="DropDown1$HiddenField"
id="DropDown1_HiddenField"
value="-1" />
</div> Days
Which for me in chrome 14 displays with the Days in the same line as the drop down.
The thing to note is the div wrapping up the combo box control. Either the version on chrome you are using is ignoring the display:inline-block; style or you have some CSS somewhere that is somehow overriding this.
Maybe look at using the standard controls and use jQuery and page methods to roll your own combo box, or better still look at FlexBox.
Which version of chrome on which OS is causing the issue?
If you don't need AJAX functionality just use the standard ASP:Dropdown control.
UPDATE:
Using Microsoft's Combo Box Sample page reproduces your issue in Chrome. Looking at the rendered code it is different in IE and Chrome. This leads me to believe I have a different version of the tool kit to yourself and Microsoft (probably older!)
IE uses display:inline-block while chrome renders display:inline which would be causing the display anomaly.
To work around the issue with the version of the toolkit you are using, I would try the following:
<div style="display:inline-block">
<asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True">
</asp:ComboBox>
</div>
<asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal>

Answer 2

I guess no one gets the "correct answer" check for this one.
Here's how I was able to "patch it" -- again, good ol' table came to rescue...
<table width="100%" border=0 cellpadding=0 cellspacing=0>
<tr>
<td valign="bottom" width="1%"><asp:ComboBox ID="DropDown1" runat="server" Width="30px" AutoCompleteMode=None AutoPostBack=false DropDownStyle=DropDown EnableViewState="True"></asp:ComboBox></td>
<td valign="bottom" width="99%"> <asp:Literal ID="myid1" runat="server" Text="Days"></asp:Literal></td>
</tr>
</table>
On the side note, I don't know guys how you can use that ASP.NET & VS2010. Both are such a headache and I'm so glad that my short stint with it is over!!!

Answer 3

"why do I need to wrap attributes into quotes"
Yes, you do need to pick up a good book on HTML / CSS and study it.