Question

Background

I’m developing a website using jQuery, jQuery Validation, and jQuery Autocomplete. I’m developing a form which uses validation to ensure a few form elements are valid, autocomplete to fill a text box, and then AJAX to dynamically replace the form. The form contains a couple of form elements, including some drop down list boxes (…). The list boxes are styled with CSS3 (with Modernizr for backward compatibility).

The Problem

The problem is with Internet Explorer. I’m testing with IE9 but I don’t think it works in IE7 or IE8 either. There are two drop down select boxes and both are malfunctioning. When the user clicks the drop down arrow to show the list of selectable options, the list disappears as soon as the mouse moves over it to make a selection, as if the user had clicked the mouse (but without making the selection).

Other notes:-

• The boxes behave properly in every other browser.
• The boxes are styled using CSS3.
• If I toggle compatibility view the boxes function as they should, though they look terrible.

The Code

HTML

<form name="form1" action="#" method="post" id="form1">
    <fieldset>
        <label for = "radio1">
            <input type="radio" id="radio1" name="type" value="1" checked = "checked" />
            Sell</label>
        <label for = "radio2">
            <input type="radio" id="radio2" name="type" value="2" />
            Buy</label>
    </fieldset>

    <label>Address or zipcode</label>
    <input name="address" id="address" type="text" size="40" placeholder="Address or zipcode" class="ui-helper-clearfix" />

    <label>Second Option</label>
    <select name="first_option" id="first_option">
        <option value="" disabled="disabled">Select Option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>

    <label>Second Option</label>
    <select name="second_option" id="second_option">
        <option value="" disabled="disabled">Select Option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 1</option>
        <option value="3">Option 1</option>
        <option value="4">Option 1</option>
        <option value="5">Option 1</option>
        <option value="6">Option 1</option>
        <option value="7">Option 1</option>
        <option value="8">Option 1</option>
        <option value="9">Option 1</option>
    </select>

    <input name="submitbutton" type="submit" value="Submit" />
</form>

CSS

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
label{display:none;font: 100 italic 1.2em/1em "museo-sans";}
label[for=radio1], label[for=radio2]{display: inline-block;margin-right: 1em;padding: 0.7em 0;}
input, select, input[type=placeholder]{color:#666}
select, input, textarea, datalist{ outline: none;font:100 italic 1.2em/1em "museo-sans";margin:0 0 0.5em} 
datalist, select, input[type=text], input[type=email], input[type=tel], textarea{padding: 2%;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;border: 1px solid #CCC;width: 96%;background:#fff}
select{width:100%}
input[type=submit], input[type=button], a.button, button {
color: #fff;border: none;width:100%;text-align:center;padding: 0.8em 0;font-size:1.3em;font-weight:700;font-style:normal;text-transform:uppercase;background: #ed4136;border: none; 
-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;cursor:pointer;margin-bottom:0}

The Question

Does anyone know whether this is a script bug or a CSS bug? I’ve tried searching the web for similar problems, but don’t have any leads. It would be good just to get an insight into what sort of things might cause the bug.

I have a hunch that it’s a CSS bug because compatibility view makes the bug disappear. It would be good if someone verify whether I’m right or wrong and offer some insight.

If anyone has any information on this at all, or a suggested fix I would be very thankful.

Answer 1

I have learned that position:relative; covers a lot of ie browser sins.