Select Box not in line in IE

Answer 1

using a table for layout might help

Answer 2

I have tried the following code. This lines up perfectly, when testing in IE7.

<input type="text">

<select>
  <option>option1</option>
  <option>option2</option>
</select>

My guess is that some CSS styling from parent elements (body, form, parent classes) gets applied to one or both of these elements, but without seeing the source code, this is hard to judge.

Answer 3

I'd suggest putting your form in some surrounding markup. I commonly use definition lists, so the markup would be something like

<dl>
    <dt>
     <label for="ctl00_main_primaryEmail" id="ctl00_main_primaryEmailLabel">Primary Email: </label>
    </dt>
    <dd>
     <input name="ctl00$main$primaryEmail" type="text" id="ctl00_main_primaryEmail" />
    </dd>
    <dt style="display: none;">
     <label for="ctl00_main_acceptedDomainsDropDownList">Accepted Domains</label>
    </dt>
    <dd>
     <select name="ctl00$main$acceptedDomainsDropDownList" id="ctl00_main_acceptedDomainsDropDownList">
      <option value="exchange.samcogan.com">exchange.samcogan.com</option>
      <option value="doamin1.com">domain1.com</option>
      <option value="domain2.com">domain2.com</option>
      <option value="domain3.com">domain3.com</option>
     </select>
    </dt>
</dl>

Then you can float/position the dt and dd elements to appear in a single horizontal row.

This approach, whether you use a dl, ul or other, gives better positioning in general.

Answer 4

It turns out this issue was CSS related. It was a border setting for the select element buried deep in the IE only stylesheet of the Blueprint Library, hence not showing up in firebug. For anyone else that comes across it, its this CSS for the select element

margin : 0.5em 0px