This duplicates another bug already reported in our system: EXTJS-3467
  1. #1
    Ext JS Premium Member Ron Howard's Avatar
    Join Date
    May 2011
    Posts
    115
    Vote Rating
    3
    Ron Howard is on a distinguished road

      0  

    Default [EXTJSIV-3449] Ext 3-4 CSS issues with isIE7 and isIE8

    [EXTJSIV-3449] Ext 3-4 CSS issues with isIE7 and isIE8


    REQUIRED INFORMATION

    *** Not sure which bug number this is but here is both of them.

    EXTJSIV-3449
    EXTJSIV-3467

    Ext version tested:
    • Ext 4.0+
    • Ext 3.0+


    Browser versions tested against:
    • IE7/8


    Description:
    • Using meta tags and DOCTYPE to make IE's document mode be either 7 or 8 engine makes Ext detect IE7 in Compat mode causing css to be wrong.


    Steps to reproduce the problem:
    • Using IE8 developer's tools to have browser mode of IE8 compatible mode.
    • Change between document mode of IE7 and IE8 you can see the ext-ie7 is used even when 8 is choosen.
    • I used
    • <!DOCTYPE html>
    • <meta http-equiv="X-UA-Compatible" content="IE=8; IE=7;">

    The result that was expected:
    • from javascript object document.documentMode you can tell what the desired engine is being used. When IE8 is used should have ext-ie8 css.
    The result that occurs instead:
    • ext-ie7 css tag is used instead
    HELPFUL INFORMATION

    Possible fix:
    • I made an override to go against what number document.documentMode is set too and turned on the correct isIE7 or isIE8 properties to true to fix the issue before ext-all.js loads.


    Additional CSS used:
    • only default ext-all.css


    Operating System:
    • Windows

  2. #2
    Ext JS Premium Member Ron Howard's Avatar
    Join Date
    May 2011
    Posts
    115
    Vote Rating
    3
    Ron Howard is on a distinguished road

      0  

    Default


    Ext 4
    Bug:
    issue1_bug_Ext4.jpg
    Correct:
    issue1_correct_css_Ext4.jpg
    Attached Images

  3. #3
    Ext JS Premium Member Ron Howard's Avatar
    Join Date
    May 2011
    Posts
    115
    Vote Rating
    3
    Ron Howard is on a distinguished road

      0  
    Last edited by Ron Howard; 11 Jul 2011 at 8:18 AM. Reason: Uploaded the wrong correct image in older post.

  4. #4
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Thanks for the detailed report, it's in our bug tracker now
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  5. #5
    Ext JS Premium Member Ron Howard's Avatar
    Join Date
    May 2011
    Posts
    115
    Vote Rating
    3
    Ron Howard is on a distinguished road

      0  

    Default


    Thanks Ed. I have a small code snippet to fix it for what I needed but wouldn't be a perm fix.
    If you want to look at that just let me know.

    Also not sure which bug number is the correct one so I will let you guys change the topic if it's the wrong bug number.


  6. #6
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    I actually duped it by mistake - the ticket number in the title is the correct one. I'll see if I can fix that
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  7. #7
    Ext JS Premium Member Ron Howard's Avatar
    Join Date
    May 2011
    Posts
    115
    Vote Rating
    3
    Ron Howard is on a distinguished road

      0  

    Default


    Any word on this bug?
    After I fixed the isIE7 and isIE8 with compat mode a lot of the quirky bugs our project was having went away.
    I am sure it will be helping you as well.

  8. #8
    Ext JS Premium Member Ron Howard's Avatar
    Join Date
    May 2011
    Posts
    115
    Vote Rating
    3
    Ron Howard is on a distinguished road

      0  

    Default


    Any updates on this bug issue?
    It's been 2 weeks since my last post.

    Just curious where things are going.

    Thanks,
    Ron

  9. #9
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    We have some higher priority issues we're addressing first. If you could post your override so we can verify the correction that would probably speed things up
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  10. #10
    Ext JS Premium Member Ron Howard's Avatar
    Join Date
    May 2011
    Posts
    115
    Vote Rating
    3
    Ron Howard is on a distinguished road

      0  

    Default


    Here is a quick snippet of what I'm using between ext-base.js and ext-all.js in Ext 3.1.1. My code for Ext 3.1.1 works correctly in IE9 also with no css issues at all when using this.
    All the IE7 and IE8 css fixes I had I didn't need anymore because Ext was setting the wrong flag for the documentmode IE was in. This also fixed any layout bugs I had for 3.
    Thats when I tested Ext 4 and found in Compat mode Ext was setting both IE7 and IE8 css tags like my screenshot above.

    PHP Code:
    if(Ext.isIE === true && Ext.isIE7 === true && document.documentMode && document.documentMode === 8) {
            
    Ext.isIE7 false;
            
    Ext.isIE8 true;
        } else if(
    Ext.isIE === true && Ext.isIE8 === true && document.documentMode && document.documentMode === 7) {
            
    Ext.isIE7 true;
            
    Ext.isIE8 false;
        } 

Thread Participants: 2