Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#12096 closed defect (worksforme)

dijit.form.ComboBox renders incorrectly in IE 7 mode of IE 8

Reported by: saj14saj Owned by: Douglas Hays
Priority: high Milestone: tbd
Component: Dijit - Form Version: 1.5
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

dijit.form.ComboBox renders with a blank line next to the dropdown icon, and then the current value on a second line below, all inside the major outline in IE 7 mode of IE 8. (I assume it does this in actual IE 7 as well).

This rendering is visually incorrect:

Screenshot comparing FF vs IE 7 mode rendering

Attachments (1)

ComboBox comparison.png (27.0 KB) - added by saj14saj 9 years ago.
Screenshot comparing FF vs IE 7 mode rendering

Download all attachments as: .zip

Change History (7)

Changed 9 years ago by saj14saj

Attachment: ComboBox comparison.png added

Screenshot comparing FF vs IE 7 mode rendering

comment:1 Changed 9 years ago by mark007

Seems to be a duplicate of mine http://trac.dojotoolkit.org/ticket/11992

Bill wasn't able to reproduce even though I can reproduce on 3 different machines, very same issue as you.

comment:2 Changed 9 years ago by saj14saj

Additional information:

This rendering bug only happens in QUIRKS mode. When a doctype triggers standards mode, rendering is good.

Rendering problems in quirks mode can also be seen in the theme test page.

comment:3 Changed 9 years ago by bill

Description: modified (diff)

comment:4 Changed 9 years ago by bill

Owner: set to Douglas Hays

I tried loading themeTesterQuirk.html on IE8 with the IE7-compat mode button depressed, it loads fine for me. Maybe Doug can reproduce.

comment:5 Changed 9 years ago by Douglas Hays

Resolution: worksforme
Status: newclosed

Please append a testcase. themeTester and the fs.html from #11992 work for me. This problem is easy to recreate with bad CSS. Starting in Dojo 1.5, the arrow icon is an INPUT as well. Note even in the attached Firefox screenshot that the arrow is cut-off. This means that the font-size or padding of that INPUT is different than that of the main INPUT. Most likely some custom user-defined CSS will need to be tweaked to either include all INPUT tags within the widget template or else the special dijit class dijitInputField, depending on the actual user-defined CSS.

comment:6 Changed 8 years ago by bill

Component: DijitDijit - Form
Note: See TracTickets for help on using tickets.