Interesting Browser Bug with CSS border and the Select element

code 0 comments suggest edit

UPDATE: Pretty much disregard this entire post, except as a reminder that it’s easy to make a mistake with DOCTYPEs and markup. As many people have told me, I had an error I didn’t notice in the original HTML. I forgot to close the SELECT tag. I’ll leave the post as-is.

Not only that, the DOCTYPE is not specified in the document, which causes IE to render in Quirks mode, not standards mode. So I guess the bug is in IE 7 rendering.

So this is a case of PEBKAC, the bug is in the HTML, not the browser.

Here’s an example of the HTML with the SELECT tag properly closed and the proper DOCTYPE. It renders correctly in FireFox 3 and IE 8.

In testing our helper methods for rendering a <select /> element which has some styling applied to it if the element has a validation error, a developer on the MVC team found an interesting bug in how browsers render a select element with a border applied to it via CSS. Check out the following HTML.

<html>
<head>
<style type="text/css">
select {
border: 1px solid #ff0000;
color: #ff0000;
}
</style>
</head>
<body>
 
<select >
  <option>A</option>
<select>
 
</body>
</html>

Here’s how IE 8 renders it. Notice there’s no border. UPDATE: According to people on twitter, this is because I left out the doctype, so IE8 rendered it in old quirks mode, not standards mode.

 ie8-select

Here’s Firefox 3. There’s a border, but there’s two drop-down arrows.

select-ff

Here’s Google Chrome, which gets it right. Since Google Chrome uses the Safari Webkit rendering engine, I believe Safari gets it right as well. I didn’t test it personally, but Opera gets it right too.

select-chrome

Now if you add the following meta tag to the <head /> section of the HTML.

<meta http-equiv='X-UA-Compatible' content='IE=8'>

IE 8 now renders correctly.

select-ie8-meta

You can see for yourself by pointing your browser to an example with the meta tag and without it.

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

14 responses

  1. Avatar for Chris Ammerman
    Chris Ammerman October 14th, 2008

    You mean IE7, I assume, not 8?

  2. Avatar for maudite
    maudite October 14th, 2008

    Firefox does the double drop-down list b/c there are two select's being output.
    Took this from the html on the demo page:
    <select>
    <option>A</option>
    </select><select>

    </select>

  3. Avatar for John Sheehan
    John Sheehan October 14th, 2008

    You didn't show a proper doctype, which I believe would cause IE8 to display it correctly without the meta tag.

  4. Avatar for maudite
    maudite October 14th, 2008

    didn't know select would render.

    <select>
    <option>A</option>
    </select><select>

    </select>

  5. Avatar for Chris Ammerman
    Chris Ammerman October 14th, 2008

    As maudite noted, though not explicitly, your select tag isn't being closed. You just have a second open tag. That might be the source of the problem.

  6. Avatar for Clint Rutkas
    Clint Rutkas October 14th, 2008

    Phil, it is because your HTML isn't closed properly.
    Your ending select doesn't terminate /select instead of just select

  7. Avatar for haacked
    haacked October 14th, 2008

    Thanks all! I updated the post with a big mea culpa. Yep, it's because the SELECT tag is not closed and the DOCTYPE wasn't specified. I included a link to an example with corrected HTML and it indeed does work correctly.
    So consider this a bug with my HTML and not with the browsers. :)

  8. Avatar for Chris Ammerman
    Chris Ammerman October 14th, 2008

    I admit I haven't tried IE8 yet... Does it really look essentially IDENTICAL to IE7???
    Not a good idea, methinks.

  9. Avatar for RichB
    RichB October 14th, 2008

    Firefox's Html Validator add-on is invaluable when building sites. It's amazing how a small mistake in your markup causes strange bugs you find difficult to spot. A quick run through with Html Validator and you spot them immediately.
    I use it as yet another Lint alongside the browser's error console (usually firebug nowadays) and JavaScriptLint for checking my AJAX.

  10. Avatar for Chris Moorhouse
    Chris Moorhouse October 16th, 2008

    Nice to know that even the big boys miss a typo now and then. It's not just me!

  11. Avatar for Cesar
    Cesar January 30th, 2009

    Hi, I have the same problem with the borders, but, in IE7 with the <select multiple> tag, when I put CSS, IE7 not render correctly my control, how can I apply correctly the CSS to the control? Thanks!!

  12. Avatar for Google
    Google March 11th, 2009

    <marquee><select><option>test</option></select></marquee>

  13. Avatar for Planadecu
    Planadecu June 8th, 2010

    Safari renders it worse. It does not even show the small arrow. Do you know any workaround?

  14. Avatar for Jose Figueredo
    Jose Figueredo December 3rd, 2010

    Sorry it does not work in IE 7 :(