View Full Version : [CLOSED] Rendering problem in IE8

21 May 2010, 4:25 AM
Another user also noticed this bug:


Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'Client/resources/images/default/s.gif';

this.generic = new Ext.form.ComboBox({
displayField: 'Name',
width: 150,
emptyText: 'Select'

this.quantity = new Ext.form.TextField({
name: 'quantity',
value: 0,
width: 70

var viewport = new Ext.Viewport({
layout: 'form',
border: true,
items: [this.quantity, this.generic]


The border below is not shown.

This css is the possible cause:

.ext-ie7 .x-form-text {
margin:-1px 0px


Jamie Avins
21 May 2010, 10:48 AM
What version of Ext are you using?

22 May 2010, 7:05 AM
Sorry I forgot to include the version.

I use the latest 3.2.1

27 May 2010, 3:12 PM
try this...

.x-form-text, .ext-ie .x-form-text, .ext-ie .x-form-file {
margin: 0px 0px;

28 May 2010, 1:28 PM
It seems this problem only occurs in IE8 Compatibility Mode, which we do not support.

22 Jan 2011, 6:13 PM
Working with ExtJS 3.3.1 and testing the issue with different versions of IE, I found out that the problem is not exactly the IE7 but the rendaring engine (http://en.wikipedia.org/wiki/Trident_%28layout_engine%29). IE8 uses Trident version 4 and for some weird reason when it's on IE7 mode, it doesn't like the -1px margin (same problem when you have Compatibility Mode). I understand that you don't want to support Compatibility Mode but how about HTAs? With IE8 HTA renders as IE7 with Trident/4 and raises this bug.. Using IE9 HTA still renders as IE7 but with Trident/5 that has no problems.

I have attached my testing HTA and my results on deferent IE installs (you can see the browser reported info).

Using the "forced compatibility mode" trick (http://weblogs.asp.net/joelvarty/archive/2009/03/23/force-ie7-compatibility-mode-in-ie8-with-iis-settings.aspx), does solve the border issue but the triggers at the combo box are misplaced. To check it add this meta tag in my hta
<meta http-equiv="X-UA-Compatible" content="IE=8" />

You can "fix" it by adding the following css but it *might* break the display on real ie7 browsers...

<!--[if IE 7]>
<style type="text/css">
.ext-ie .x-form-text, .ext-ie .x-form-file {
margin: 0px 0px;

It would be really nice if you could find a way to solve this problem. My guess is that we shall check Trident's version too in combination with IE's... :-?


PS: I'm sorry for digging a closed thread... If a moderator wants to move my post on a separate thread, please do so...

PS2: Here's a way to check ie versions (http://www.strictly-software.com/scripts/downloads/IE8.js):

* Author: Rob Reid
* CreateDate: 20-Mar-09
* Description: Little helper function to return details about IE 8 and its various compatibility settings either use as it is
* or incorporate into a browser object. Remember browser sniffing is not the best way to detect user-settings as spoofing is
* very common so use with caution.
function IEVersion(){
var _n=navigator,_w=window,_d=document;
var version="NA";
var na=_n.userAgent;
var ieDocMode="NA";
var ie8BrowserMode="NA";
// Look for msie and make sure its not opera in disguise
if(/msie/i.test(na) && (!_w.opera)){
// also check for spoofers by checking known IE objects
if(_w.attachEvent && _w.ActiveXObject){
// Get version displayed in UA although if its IE 8 running in 7 or compat mode it will appear as 7
version = (na.match( /.+ie\s([\d.]+)/i ) || [])[1];
// Its IE 8 pretending to be IE 7 or in compat mode
// documentMode is only supported in IE 8 so we know if its here its really IE 8
version = 8; //reset? change if you need to
// IE in Compat mode will mention Trident in the useragent
ie8BrowserMode = "Compat Mode";
// if it doesn't then its running in IE 7 mode
ie8BrowserMode = "IE 7 Mode";
}else if(parseInt(version)==8){
// IE 8 will always have documentMode available
if(_d.documentMode){ ie8BrowserMode = "IE 8 Mode";}
// If we are in IE 8 (any mode) or previous versions of IE we check for the documentMode or compatMode for pre 8 versions
ieDocMode = (_d.documentMode) ? _d.documentMode : (_d.compatMode && _d.compatMode=="CSS1Compat") ? 7 : 5;//default to quirks mode IE5

return {
"UserAgent" : na,
"Version" : version,
"BrowserMode" : ie8BrowserMode,
"DocMode": ieDocMode

15 Feb 2011, 1:04 AM
Sorry for posting to a closed thread but I'm running into exactly the same problem that combos and testboxes are rendered wrong with HTA apps on ie8.

Does anyboy find a workaround meanwhile to address this issue?

Thanks a lot.