Reputation: 7153

IE8 CSS different from IE7 & Firefox

I'm applying a css style to a select dropdown and input textboxes.

The style appears to work in IE7 and Firefox but not in IE8.

The css is:

input.text, input.file, textarea.textarea, select.select 
{
    font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
    color:#333;
    margin:0;
    padding:4px;
}

input.text, textarea.textarea, select.select{
    border-top:1px solid #7c7c7c;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-bottom:1px solid #ddd;
}

The style appears to apply fine to textboxed but not selects/

Any ideas about why this is happening in IE8?

                                    <label class="desc" >
                                        First name</label>
                                    <input type="text" name="nuFirstname" id="nuFirstname" class="text pop" value="" /></li>
                                <li>
                                    <label class="desc" >
                                        Surname</label>
                                    <input type="text" name="nuSurname" id="nuSurname" class="text pop" value="" /></li>
                                <li>
                                    <label class="desc" >
                                        Colour</label>
                                    <select class="select pop" id="nuDept" name="nuDept">
                                        <option value="-" selected="selected">-</option>
                                        <option value="2">Green</option>
                                        <option value="3">White</option>
                                        <option value="4">Orange</option>

                                    </select></li>

Upvotes: 0

Answers (4)

wjdp

Reputation: 1488

Have a read of this and check to see what 'mode' of IE you're in to see how it's interpreting the code. I don't believe this applies to newer versions of IE (ie >=9ish probably)

http://www.quirksmode.org/css/quirksmode.html

Upvotes: 0

Amber June

Reputation: 376

If you want your select boxes to look the same cross browser, I suggest using a jQuery plugin (something like this) to do so. Unfortunately, you will never have consistent results with select boxes if you try to control them with just CSS. It's just the way of the web... for now.

Upvotes: 1

thegunner

Reputation: 7153

Ok seems like someone was having the same problem.

IE8 and border css property on select menus

The solution appears to be putting this line in the header:

What on earth is going on with IE8?

Upvotes: 0