locked
Sometimes HTML buttons are not rendered in IE9 RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    I am facing one unusual issue in IE9.

    Issue: We have migrated our application from IE7/XP to IE9/Win7. When some of our production users load a web page, sometimes HTML button which has keyboard focus is not rendered on the web page. This behavior is very inconsistent. 

    My Observation: To show the keyboard focus on web page, we have applied CSS filter on button: style="filter: progid:DXImageTransform.Microsoft.Glow(color=#1E90FF, strength=1);"

    When I verify HTML code of rendered page through fiddler tool, i could see HTML button code is present but its not rendered due to some unknown reason. When user do mouse over to the space where buttons should be placed, he could see the clickable icon and I could perform the action. 

    Note: We are using document mode as 'IE8 emulate' to make it compatible with other integrated third party application.

    Can anybody tell why this behavior happening in IE9?

    Thursday, September 19, 2013 12:18 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    style rules 'cascade' (ccs==cascading style sheets).

    you create a style rule for the element ID or a class that includes the various variants of the style rule.

    button.fancy:hover{

    filter: progid:DXImageTransform.Microsoft.Glow(color=#1E90FF, strength=1);

    -ms-filter: progid:DXImageTransform.Microsoft.Glow(color=#1E90FF, strength=1);

    }

    you should avoid using inline style rules, depreciated presentational attributes or inline event handlers... (tip: validate your markup validator.w3.org)

    Post your questions to the appropriate forum. For technical assistance with websites include a link to your site with your question.

    Rob^_^

    • Marked as answer by Cloud_TS Sunday, October 6, 2013 8:15 AM
    Wednesday, September 25, 2013 7:41 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    According to your description, it may be caused that your code is incompatible with IE9.

    Please check your code.

    Regards,

    Kelvin_Hsu

    TechNet Community Support

    Friday, September 20, 2013 9:13 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Kelvin,

    Thanks for your reply !!

    If code is not compatible with IE9 then it would have been failed every time when web page is loaded. But its not the case. Button is getting disappeared sometime only. If user tries to reload the page by doing refresh then it becomes visible. 

    We never faced this issue in development or testing environment. But its coming only in production.

    - Rupesh


    Friday, September 20, 2013 11:15 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    For this issue,I want to confirm if IE 8 is ok every time.

    Meanwhile,I suggest you try to  reset the IE setting to check the result.

    How to reset Internet Explorer settings:

    http://support.microsoft.com/kb/923737

    If the issue still persists,I suggest you test the code in IE9 environment.

    Regards,

    Kelvin_Hsu

    TechNet Community Support

    Sunday, September 22, 2013 12:26 PM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Kelvin,

    Thanks for your reply !!

    If code is not compatible with IE9 then it would have been failed every time when web page is loaded. But its not the case. Button is getting disappeared sometime only. If user tries to reload the page by doing refresh then it becomes visible. 

    We never faced this issue in development or testing environment. But its coming only in production.

    - Rupesh


    see http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx

    Downlevel Support and Internet Explorer 4.0 Filters

    Browsers that don't support the filter property or even style sheets simply ignore filters. Even browsers that support the filter property can do so in different ways without affecting the Web designs. The differences between the filters for Internet Explorer 4.0 and Internet Explorer 5.5 illustrate this. The most obvious change is the syntax; programmatic identifiers (PROGIDs) are used with the Internet Explorer 5.5 filters, but not with Internet Explorer 4.0.

    Though the Internet Explorer 4.0 filter syntax is permitted in Internet Explorer 5.5, it is recommended that you replace them with the current versions. Besides efficiency, there are behavioral differences between the effects produced with Internet Explorer 4.0 filter syntax compared to Internet Explorer 5.5 syntax.

    In Internet Explorer 8 mode, filters must be prefixed with "-ms-" and the PROGID must be in single or double quotes to make sure Internet Explorer 8 renders the filters properly.  The -ms-filter Attribute is an extension to CSS. This syntax will allow other CSS parsers to skip the value of this unknown property completely and safely.It also avoids future name clashes with other CSS parsers.

    // Internet Explorer 4.0 syntax

    <Element STYLE="filter:filtername(sProperties)" >

    // Internet Explorer 5.5 syntax

    <Element STYLE="filter: progid:DXImageTransform.Microsoft.filtername(sProperties)" >

    // Internet Explorer 8 syntax

    <Element STYLE="-ms-filter: 'progid:DXImageTransform.Microsoft.filtername(sProperties)'" >

    Tip: Don't use.... use jQuery.ui instead for interoperable webform FX.

    Post questions about html, css and scripting for website developers (WITH A LINK TO YOUR WEBSITE) to the MSDN IE Web Development forum....if possible validate and correct your markup errors first at validator.w3.org.

    Rob^_^

    Monday, September 23, 2013 3:22 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    I haven't tested this application in plain IE8 browser, as we directly migrated from IE7 to IE9 (IE8 emulate mode).

    Also I will try to reset IE9 setting in PROD environment.

    Thanks,

    - Rupesh

    Monday, September 23, 2013 12:26 PM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Thanks Rob !!

    I have gone through above article and it seems we should use '-ms-filter' instead of 'filter' as we are using IE9. But in our application we are using filter for showing default key focus on web page dynamically i.e. first page is loaded and then focus is set by providing Id of a button.

    I am not sure how to apply '-ms-filter' dynamically.

    I tried changing CSS class having '-ms-filter', but it is overriding existing CSS classes. Therefor we can't apply this solution.

    Also even if we use 'filter', its working in most of the cases. failure rate is very minimal, around 1 in 100 requests. Any idea ?

    - Rupesh

    Monday, September 23, 2013 12:33 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    Finally we could replicate this defect in our development environment.

    Steps to reproduce:
    1. Increase the IE9 process memory more than 800 MB (can be seen through Task manager)
    2. Keep browser open for more than 9 hours
    3. Button with Glow Filter becomes hidden.

    When I tried to disable 'Glow Filter' using Developers tool button becomes visible.

    - Rupesh
    • Proposed as answer by kelvin_hsu Wednesday, September 25, 2013 2:35 PM
    Wednesday, September 25, 2013 1:14 PM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    style rules 'cascade' (ccs==cascading style sheets).

    you create a style rule for the element ID or a class that includes the various variants of the style rule.

    button.fancy:hover{

    filter: progid:DXImageTransform.Microsoft.Glow(color=#1E90FF, strength=1);

    -ms-filter: progid:DXImageTransform.Microsoft.Glow(color=#1E90FF, strength=1);

    }

    you should avoid using inline style rules, depreciated presentational attributes or inline event handlers... (tip: validate your markup validator.w3.org)

    Post your questions to the appropriate forum. For technical assistance with websites include a link to your site with your question.

    Rob^_^

    • Marked as answer by Cloud_TS Sunday, October 6, 2013 8:15 AM
    Wednesday, September 25, 2013 7:41 PM