ansaurus

Question

<SELECT> (dropdown) doesn't render correctly when you add a <!DOCTYPE html blah blah blah...

Answer 1

A:

Try changing the type of !DOCTYPE you're using. For a list of doctypes, check out http://www.w3schools.com/tags/tag_DOCTYPE.asp

bkritzer 2009-12-23 18:15:03

Answer 2

A:

Your HTML is incorrect:

<SELECT style="width:200px"  id=select1 name=select1>

When you don't use a Doctype the browser enters in what's called "Quirks mode" where it tries to make the best of the given code (usually emulating old browsers). When you add a Doctype it goes into "Standards Mode" expecting standards compliant HTML.

The first problem is that you used an XHTML doctype which demands all tags to be lowercase (<select>), the second issue is that you haven't enclosed properties in quotes (id=select1 instead of id="select1") which is probably triggering the error.

Some browsers even have an "Almost standard mode" (like FF)

(Btw, you're already using css with style="width: 200px" :)

Januz 2009-12-23 18:17:25

I applied the changes you suggested but nothing changes. The dropdownbox is rendered differently in any case (border style, color, height...)

meco_r 2009-12-28 11:36:59

Answer 3

A:

I can not reproduce your problem with a simple test-case, however for the samples you provided I can see that the width of the select element is being calculated differently. This seems to me to be a Quirks vs Standards mode issue. In Standards mode the browsers implement the spec more rigorously and thus you'll find issues like this often when you switch between them. However for consistent cross-browser results you're usually better off using standards mode (by specifying a doctype).

Mr. Shiny and New 2009-12-23 18:19:39

Answer 4

+1 A:

This is expected behavior, unfortunately. A SELECT's height and width need to be adjusted for the size of the border and the padding of it. So if you want a 100x20 select with a 1px border you will need to set height/width to 100x20 as opposed to most everything else where you would set height/width to 98x18.

Andrew G. Johnson 2009-12-23 18:19:59

Answer 5

A:

I've seen that behavior before as well, and it unbelievably annoying! THe only way I could find to get around it is to make the select box a few pixels wider than the normal textboxes. Not an optimal solution, though, so I hope someone else has a better way. Good luck!

darthnosaj 2009-12-23 18:21:00

ansaurus

tags:

views:

answers:

<SELECT> (dropdown) doesn't render correctly when you add a <!DOCTYPE html blah blah blah...

related questions