Ameya's Blog Bridging the gap between latest web technologies and SAP

How to Set Browser Compatibility Mode in SAP Portal Logon Page

If you want to know How to Set Browser Compatibility Mode in SAP Portal Logon Page, this post is for you. Browser compatibility mode is perhaps the most important feature that Portal Developers often ignore. Instead of attempting to fix the CSS for lower browser versions for e.g IE 8 and so on, it is better to tell your SAP Portal Logon Page to render page in compatibility mode. Though compatibility mode can be configured manually by changing mode in Developer Tools in IE. Before we get to see how can we programmatically set browser compatibility, lets first see how significantly it impacts application rendering.

First image below is of my logon page that is rendered in IE Quirks mode. Take a look how badly it is rendered. Not just that, CSS properties such as input focus, Overlay, and Z-index simply won’t work in this mode.

Logon Page in Quirks Mode

Logon Page rendered in IE Quirks Mode

As you can see above, input field focus is not working on my SAP Portal Logon Page. In addition, Log On button is also incorrectly placed. Now let us see how this page rendering is changed if you change browser mode via Developer Tool. If you are in IE, hit F12 – a shortcut to launch Developer Tools. Otherwise, Click on Tools > Developer Tools from command bar. Once you launch Developer Tools, change the mode to Standard as shown below.

Developer Tools

Now take a look at my logon page - 

Logon Page in Standard Mode

Logon Page rendered in IE Standard Mode

As you can see, page looks far better when Browser Mode is changed to Standards. In fact, it is good to see input focus is also working in this case.

How to programmatically set browser compatibility?

The problem with above approach is that you cannot ask users to change browser mode or set browser compatibility mode each time he / she access the SAP Portal. If user don’t change the mode, your logon page loses its beautiful design. However, there is a better solution available. You can programmatically tell your SAP Portal logon page to render logon page in compatible mode. This is done by adding a <meta> tag in logonPage.JSP file. Let see how is that done.

Open NWDS > your Logon WAR project > logonPage.jsp > add below code immediately after <head> tag

<!doctype html>
<html>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=8″>

All references to custom CSS and JavaScript files go after this <meta> tag. Browser mode can be changed by changing the value of “Content” attribute. Following are the available values for this attribute.

  • “IE=edge”
  • “IE=10″
  • “IE=EmulateIE10″
  • “IE=9″
  • “IE=EmulateIE9
  • “IE=8″
  • “IE=EmulateIE8″
  • “IE=7″
  • “IE=EmulateIE7″
  • “IE=5″

Here is what Microsoft says about each mode

  • IE10 mode provides the highest support available for established and emerging industry standards, including the HTML5, CSS3 and others.
  • IE9 mode provides the highest support available for established and emerging industry standards, including the HTML5 (Working Draft), W3C Cascading Style Sheets Level 3 Specification (Working Draft), Scalable Vector Graphics (SVG) 1.0 Specification, and others. [Editor Note: IE 9 does not support CSS3 animations].
  • IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.
  • IE7 mode renders content as if it were displayed in standards mode by Internet Explorer 7, whether or not the page contains a directive.
  • Emulate IE9 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in IE9 mode and quirks mode directives are displayed in IE5 mode. Unlike IE9 mode, Emulate IE9 mode respects the directive.
  • Emulate IE8 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in IE8 mode and quirks mode directives are displayed in IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the directive.
  • Emulate IE7 mode tells Internet Explorer to use the directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 7 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, Emulate IE7 mode respects the directive. For many web sites, this is the preferred compatibility mode.
  • IE5 mode renders content as if it were displayed in quirks mode by Internet Explorer 7, which is very similar to the way content was displayed in Microsoft Internet Explorer 5.
  • Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9.

On a side note, always use <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>. This tells your browser to render your page in the latest mode available. This is especially good if you do not want your browser to determine compatibility mode for your application.

With this simple trick, you can be sure that your page won’t break in lower version browsers. In addition, you can provide unified user experience irrespective of the browser. This is a huge plus point.

               

You Don't Need a Bribe To Join

Plain and Simple. Do you enjoy what you just read? Did you get help to solve a work issue or learn something new? Cool, then get more in your inbox whenever we publish a new post

SAP Netweaver consultant, writer, blogger, budding SEO analyst, learner & fun loving being.

(12) Comments

  1. Hi Ameya,
    What about IE11, i have a custom framework and strut based application. All good but not rendering in IE11.
    But if i am setting compatibility mode from internet setting, its working. Any programmatically solution for this.

    We have SAP NW 7.0 EHP1. SP07. Not in a position to upgrade this now.

    Regads
    Manoj

  2. Hi Manoj,

    Apologies for the late reply. Did you try changing – Content=”IE=Edge” ? Setting property value to Edge makes your browser render UI in latest IE mode that is available. I assume this will also take care of IE 11. Not sure though? Did you try this? By the way, let me remind you, IE is very notorious when it comes to design and support of modern age UI concepts. So better have a separate CSS for IE and then re-direct using conditional statements.

    Ameya

  3. i have added the X-UA Compatible ,content = “IE=7″ In logon page of Portal . but we are not able to set BRowser Mode to IE7. do u have any help appreciated

    • Hi Venkata,

      Can you please share more details on what are you up to? I assume you are working on Logon Page? When you say that browser mode isn’t set, did you confirm that via developer tools or concluded based on design rendering?

      Ameya

  4. Hi ,

    yes I have added the as below

    in the Portal Logonpage.jsp , when I try to launch the Portal the IE Browser need to set to : IE7 in F12 Devloper Tools but its sets Document mode to :IE7 of F12 Devloper Tools.

    I want to force the Portal Browser mode to IE7 not document Mode of F12 Devloper Tools .

    please suggest me solution

    can it possible to force the browser mode to IE7

    • Hi Venkat,

      Yes, it is possible. Also note that portal.jsp is just a file that is rendered in a separately nested HTML DOM. This is different from main HTML created by Portal Body. So perhaps this is a reason your browser compatibility isn’t set correctly. That is the reason there are no HTML body tags defined in logon page JSP file. Unless you find a way to override configuration of portal body or the main HTML, you might have to tweak rendering from CSS properties. There is a combination of things that works. If setting browser compatibility doesn’t work by adding META tags, you have to fix specific rendering issues by writing browser complaint CSS. Let me know if need any help in that.

      Best,
      Ameya

  5. Hi Ameya

    I am also facing compatibilty issue in my IE browser.The document mode which is selected is Quirks .I have tried to the include the meta tag as suggested in your blog in logon.jsp file but the issue still exists.
    Please help in resolving the issue.

    Thanks
    Shaily

    • Hi Shaily,

      This is because logon page and Portal framework are rendered in different HTML DOM. Portal framework has its own DOM and logon page is rendered as a child DOM. So when you try to set compatibility mode for logon page, configuration of parent DOM takes preference and overwrites your settings. One of the solutions could be setting compatibility mode for framework page as well. You can navigation to Standard Framework OR AJAX Framework from admin menu and search for a property that controls compatibility or rendering modes. Set a value of this property to desired mode and then check. Let me know if you still face any problems.

      Best,
      Ameya

  6. Hi Ameya

    Thanks for the reply.

    I tried modifying the Browser Document Mode iView property to IE=EmulateIE9 in the AJAX Framework page but I couldn’t see any effect.

    Please suggest.

    Regards
    Shaily
    Please suggest

  7. Hi Shaily,

    First of all, I am sorry for the late reply again. I was away and had no access to my blog. Did you try the second solution I earlier mentioned in my comment? Did you try setting mode for framework page?

    Best,
    Ameya

  8. Hi Ameya

    I have question regarding to the same context on this blog. Talking about the browser compatibility in NW 7.3 with IE8, IE9, IE10, IE11.

    In SAP NW 7.3 under the
    Ajax Framework Page ->BROWSER DOCUMENT MODE –> IE=EMULATEIE7. (Default Config)
    we change to
    Ajax Framework Page ->BROWSER DOCUMENT MODE –> IE=EMULATEIE9. (Customizied.)

    http://s7.postimg.org/b9o3hjsaj/Ajax_Framework_Page.png

    I have .Net application integrated with Portal via URL iview. Since the .net application runs on IE9 and above browser, to make it work we are forced to change the Document mode from default ( IE=EmulateIE7) to IE=EmulateIE9. On doing so , the application run perfectly fine via URL iview.

    But it causing the issue with other native application in portal such as Web Dynpro application , Even on opening the USER ADMINISTRATION , the default WebDynpro User Search application lost its rendering. where it gives us the Error msg ” Use the device ‘Standards’ in your application – otherwise the application will not work correctly or visualization error may Occur”.

    – Any Suggestion over this issue to make the Iview rendering in One specific document mode and rest all other iview runs on different (standard) document mode. ?

    Thanks
    Ramesh

    • Hi Ramesh,

      Unfortunately, I cannot access the image from your link. From my initial understanding, why not try working with two frameworks? Use one that needs browser compatibility mode for running your application and for all other admin activities use the vanilla ajax framework. Is it possible for you to customize master rules? Not a side note, I am not 100% sure about this solution, but it looks like this can be worked out with custom ajax frameworks for admin and application usage.

      Ameya

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

x
Never Miss an Update!
Stay Updated with latest posts on