CODEWITHSUNDEEP
htmlcsslayout
Sam Cogan
Sam Cogan

Reputation: 4334

Select Box not in line in IE

Ok, didn't really want to ask this question as it should be quite a simple solution, but I've spent hours trying to resolve it to no avail. I have a web page with a text box, and then a select drop down next to each other. In Firefox and chrome they line up fine next to each other, but in IE the select box sits higher than the text box. Theres is no CSS applied to this select box, or the text box.

Image

This is an aspx page, the generate HTML source for this is:

<label for="ctl00_main_primaryEmail" id="ctl00_main_primaryEmailLabel">Primary Email: </label>
<input name="ctl00$main$primaryEmail" type="text" id="ctl00_main_primaryEmail" />
<select name="ctl00$main$acceptedDomainsDropDownList" id="ctl00_main_acceptedDomainsDropDownList">
            <option value="domain.com">domain.com</option>
            <option value="doamin1.com">domain1.com</option>
            <option value="domain2.com">domain2.com</option>
            <option value="domain3.com">domain3.com</option>
        </select>

Upvotes: 0

Views: 2455

Answers (5)

Sam Cogan
Sam Cogan

Reputation: 4334

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

Upvotes: 3

David Snabel-Caunt
David Snabel-Caunt

Reputation: 58361

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.

Upvotes: 0

Ola Tuvesson
Ola Tuvesson

Reputation: 5201

Are you using any CSS to reset the margins and padding across all tags? It's quite useful to start your stylesheet with something like: 

    *,html {
    margin: 0;
    padding: 0;
    }

This gets rid of many rendering inconsistencies between browsers (i.e. IE) and the extra CSS needed to provide padding/margins where actually needed tends to be minimal. With this "reset" rule in place the boxes line up in IE (6 & 7 tested), though the issues of different default font-sizes remains:

alt text http://www.mikrogroove.com/stackoverflow/textbox_selectbox_alignment.gif

Upvotes: 3

Daan
Daan

Reputation: 6994

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.

Upvotes: 2

Ali Kazmi
Ali Kazmi

Reputation: 3660

using a table for layout might help

Upvotes: 0

Related Questions