CODEWITHSUNDEEP
cssinternet-explorerdoctypehtml-select
testing123
testing123

Reputation: 11447

Why HTML selects look different in IE based on the doctype?

Until recently, our app did not specify a doctype. Then, to make the app more cross-browser compatible, we added a strict doctype. This made everything behave a lot more similar across different browsers. However, in IE9, we noticed that this changes how select elements look. To make sure that was the only thing going on, I made an HTML page with the following:

<html>
<select>
    <option>Testing</option>
</select>
</html>

This HTML is rendered like this in IE9:

no doc type

Then I just add a doctype as follows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<select>
    <option>Testing</option>
</select>
</html>

The HTML then renders like this:

with doc type

There are some subtle differences, but the biggest one that stands out to me is the part of the dropdown where the down arrow is. One has a white background and the other is gray. Is there some kind of CSS standard that changes the style on selects? We'd like to keep it how it used to display, but I'm not sure if that's possible.

I tried doing the same test in FireFox and both the no doctype and strict doctype display with a white background for the down arrow. The same test for Chrome has both doing it with the gray background.

Is there any way to control this? Any information about this would be much appreciated. Thanks.

Upvotes: 0

Views: 294

Answers (3)

Rob
Rob

Reputation: 15160

Lack of a doctype puts you into quirks mode where you never want to be. A doctype is required of all modern web pages in order to be in standards mode. In quirks mode, the proper box model is not followed, particularly by IE, and all sorts of strange things can occur. This is why a doctype is always the first thing to be put on every web page. And once it is set, you never ever change it.

Upvotes: 0

Jay Tomten
Jay Tomten

Reputation: 1717

This is an unfortunate side effect of mixing native OS elements into the page. The best way top deal with it in my experience is to completely re-style the element. The older the browser and more browsers you support the more difficult this becomes as they all have subtle differences. Here are a couple pages to get you started with styling these elements.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

http://bavotasan.com/2011/style-select-box-using-only-css/

Upvotes: 1

nobody
nobody

Reputation: 269

Maybe look in to using YUI Reset to clean any browser stylesheets from your page first?

http://developer.yahoo.com/yui/reset/

Upvotes: 0

Related Questions