OneUI ? IE7? Seriously…………? Another one of *those* days…..

Working with a client and we are trying to insert some Bootstrap code into a OneUI site running on IE11 – everything was working smoothly until we actually tested in IE11. (Of course we developed using Chrome – well who wouldn’t….)

Compatibility Mode

So finding the root cause of the problem was simple – Compatibility Mode being run on the customer intranet – AAAAAAh yes that old chestnut – well we overcome that issue with a phaseListener as documented by Mark Hughes many years ago.

But that did not fix the layout issue – IE=edge was in the header and everything else looked just fine…..

Then I noticed this in the Page HTML….

ie7

but I look at the page source and I find this……no Class

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;
<html lang=”en”>
<head>

Oh OneUI you old devil

So after some digging I found this included in the HTML

/domjava/xsp/theme/oneuiv2.1/js/ie7.js

and there, in the code……

/* Copyright IBM Corp. 2010, 2013  All Rights Reserved.              */

document.getElementsByTagName("html")[0].className+=" lotusui_ie lotusui_ie7";

OH MY……….so what is happening is that the Notes Server is detecting that the IE11 Compatiblity Mode browser is actually trying to behave as IE7. And it is adding an IE7 style sheet, as the page is loaded, overriding the theme’d OneUI CSS which is being added earlier up the HTML DOM (yay cascading stylesheets I guess…)

Easy fix.

Naturally we are using jQuery within the page so the classes can be easily removed with the following code at the end of the XPage

$(document).ready(function() {		
	//This is HACK CODE to remove the lotusui_ie7 class which is 
	//programmatically added to the page by OneUI after the page is loaded in IE7 compatibility mode
	$('html').attr('class', ' ');
});

 

3 thoughts on “OneUI ? IE7? Seriously…………? Another one of *those* days…..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s