Skip navigation
All Places > System Administrator Community > Blog > Author: rh0071219

About: Internet Explorer and Blackboard Learn don't play nice together. This article explains how to create a warning that will appear only for users who attempt to log in to your Blackboard environment using Internet Explorer.

 

What's the Problem?

For the better part of my career as an LMS administrator, I've told anyone who would listen that Internet Exploder (Explorer) is good for only one thing; downloading a different browser. While I've seen many people abandon the little blue "e" for a more modern browser, there remains a coterie of diehard IE adherents who simply refuse to switch.

 

In their defense, there are plenty of reasons folks may still be on IE. Some are running old machines. Some lack (or think they lack) the technical knowledge needed to update their browser. Others are comfortable with the way things are and just don't want to change. Whatever the reason, (and I'm sure the reason is a very good one), it's time for a change. It's 2019. Microsoft officially ended support for Internet Explorer three years ago, and the old blue "e" just ain't what it used to be.

 


Why Now?

 

Deep in the heart of the Learn SaaS v3500.0.3 Flexible Deployment release (roughly equivalent to v3500.9.0 for Continuous Delivery), something changed, rendering useless some functionality for Internet Explorer users. Since the release of 3500.0.3, we've received calls from frustrated IE users for whom the platform no longer functioned properly and we had to break the bad news to them that the only way to fix their problem was to stop using Internet Explorer.

 

But it's far better to catch these users before they log in to the system so that they aren't in the middle of something when they realize that there is an issue.

 

To help minimize frustration for our end users, we created an "Incompatible Browser" warning that appears on the login page. We didn't want to do was use the login page announcements area (because these messages cycle through) or display the warning to users who were already on a compatible browser.

 

So we had to come up with a different solution...

NOTE: If you're working with a single sign-on portal that bypasses the Blackboard login page, you might as well stop reading here, contact your portal admin and ask for their help in creating an appropriate intervention for IE users.

 


Danger, Will Robinson! Danger!

 

Still with me? Cool.

 

Our solution to this issue was to create a warning. It's only a warning. It doesn't force anyone to do anything, but it provides users with critical information based upon their system configuration, explains the problem and provides instructions on how to correct the issue.

 

The warning is designed so it will only be seen by IE users but will not prevent them from logging in. It is also configured so that it cannot be dismissed by the end user.

 

Since we're writing code for old browsers, we want to keep it as simple as possible and avoid using JavaScript or other elements that the browser might not recognize or render properly. So, the simplest solution is one that is 100% CSS and HTML.

CAVEAT: Each institution's login page is configured differently. Before beginning, make sure you have a backup copy of your login page downloaded to a local machine. When you go to test your changes, make sure you're logged in to your environment in a separate browser from the one through which you're uploading the updated .jsp file. This way, if you accidentally insert code that breaks your login page, you can still change it back to the previous version.

To Catch IE (or, the part you want to go to if you skipped all that intro text)

 

To ensure that you get all the IE users, you have to approach it from two different directions, because in the world of Internet Explorer, there are two different technologies. Newer versions of Internet Explorer (10 and up), can be identified by using a media query. Old versions of Internet Explorer (9 and earlier) can be detected with a conditional comment (something that was abandoned after version 9).

 

First Things First

Both technologies will display the same warning. So we're creating a <div> element and making it visible when certain conditions are met. Before we worry about how to make it visible, we need to first create the element and hide it. To do this, I opened the login.jsp file and found the CSS section. After the main components were configured, I added the <div> element and set it to be hidden by default. It looks like this...

 

#IEMessage {

display: none;

}

 

 

Media Queries

I mentioned that there were two different ways we had to approach this. The first is the more modern media query method to detect IE10 and higher. I'm not going to go into what media queries are (you can do that research on your own), but suffice it to say that it's a little piece of CSS that says to the browser, "Hey! If you can interpret this code, please use these parameters. Otherwise, ignore it." In this case, all browsers EXCEPT for Internet Explorer will look at the code and be like "I have no idea what you're talking about. I'm ignoring you." You can add this at any point in the CSS, because CSS isn't compiled code and it isn't rendered in any particular order.

 

The @media all and (-ms-high-contrast: active), (-ms-high-contrast: none)media query tells the browser to display the div ONLY IF the stated conditions are met, and since -ms-high-contrast is a setting that only pertains to IE 10+, it will be ignored by everything except IE10+. The most important setting is display: inline-block; part because that's what tells the browser to make it visible (there are options other than inline-block, but I'll let you research that on your own). The rest is purely cosmetic.

 

 

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {

#IEMsesage {

border: 4px outset #EAEAEA;

display: inline-block;

margin: auto;

position: relative;

text-align: center;

width: 70%;

max-width: 600px;

background-color: #FAEBD7;

color: #CCCCCC;

}

}

 

Conditional Comments

Conditional Comments only work on IE9 and older versions. Conditional comments are statements that go in the HTML part of the page (not the CSS) and should immediately follow any <meta> tags. The conditional comment, similar to the media query, says to the browser "Hey! If you can read this, do this. Otherwise, ignore it." To take your CSS from the media query and put it into the conditional comment, just paste everything from the #IEMessage div into the space between <style> and </style> tags.

 

 

<!--[if lte IE 9]>

<style>

 

</style>

<![endif]-->

 

 

Add the <div> to the <html>

The HTML area of the login.jsp file lays out exactly how the elements on your homepage will be displayed. In this part, you WILL need to worry about positioning because these are the content and formatting information that is passed to the browser.

 

In our case, I added the warning above the login options (we have three buttons from which users select their role in our system and are then directed to the login page appropriate to their role).

 

This part contains the actual text of the message, and you can say whatever you want, just make sure it's properly formatted. The key is to create a <div> with the ID of "IEMessage" (or whatever you named the div in the CSS) and insert all your code.

 

 

<div id="IEMessage" style="margin-left: 5px; margin-right: 5px;">

<h1>WARNING!</h1>

<b><i>We have detected that you are using Internet Explorer to access Blackboard.</i></b><br><br>Please note that Internet Explorer is<b>not</b> compatible with Blackboard and may not perform as expected. To avoid errors and frustration, we

<b>strongly</b> suggest that you use a different web browser.<br><br>For best results, we recommend <a href="http://www.google.com/chrome/" target="_blank">Google Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Mozilla Firefox</a>,<br> but any of the <a href="https://help.blackboard.com/Learn/Student/Getting_Started/Browser_Support" target="_blank">supported browsers in this list</a> will work as well.<br><br>

If you wish to proceed using Internet Explorer, you may log in below.

</div>

 

Now, all you have to do is save your updated file, upload it into Blackboard and navigate to your login page using Internet Explorer. If it worked, you'll see your message displayed.

 

ie_warning.png

 

To see how it will render under various versions of Internet Explorer, you can click on the cog in the IE menu and select "F12 Developer Tools" from the dropdown. To preview the page as it would be rendered in other versions of Internet Explorer, change the document mode by clicking on the funky little document mode icon (just to the right of "Memory" in the menubar) and selecting which version of IE you'd like to render the page using.

 

iedevtools.png

 

At this point, there are only 3 more things you need to do....

 

  1. Tweak.
  2. Test.
  3. Repeat.

 

Hopefully this made some sense to someone out there.

I was going to start a discussion and solicit feedback, then I realized I could just as easily create a blog post and have the discussion in the comments section.   So here we are.

 

What's this about?

 

Part of staying on top of my work is keeping up with Known Issues in Blackboard.  A lot of times, I don't have time to log in to BtBb and look things up, so what I'll do is keep a copy of the Known Issues spreadsheet on my workstation for quick reference. This blog post explains the hows and the whys, and also goes into what I do with the data once I've got it.

 

Getting the Data from BtBb

 

Log in to Behind the Blackboard and click on the link to Known Issues.btbb_platform_select.png

Once the Known Issues page is loaded, you'll want to narrow down the results a bit.  To do this, click the "Release" dropdown and select your environment.

 

NOTE:  There are only two options available, 9.1 and SaaS. If you don't know which of these is applicable to your institution, you probably shouldn't be logging into BtBb in the first place.

 

So as the image to the right will attest, I've selected my release (SaaS), and my Product (Learn) and Article Type (Known Issues) were selected by default when I clicked on the "Known Issues" link from the BtBb main page.

 

 

export_to_excel.pngSo once I've selected my Release, I click on  "Export to Excel" to download the data.  (The "Export to Excel" icon is on the upper region of the page, on the right-hand side, hidden in plain sight, as it were.)

 

Your browser will download the file, and depending on your browser and system configuration, you may or may not be prompted to do something. My machine is so accustomed to me doing this that it doesn't even bother me when I go to download pretty much anything from Bb.

 

We've got data, 'cause we've got a band.1

 

Now that the XLS file has been downloaded to your workstation, you're ready to get to work and do all sorts of magical things.   So locate that file on your machine and open it in Excel.

 

excel_btbb_error.pngWhen you try to open the file, Excel will return an error, indicating that the file format and extension don't match and asks if you want to open it anyway.  Click "yes" to ignore the error and open the file.

 

 

When you open the file (against Excel's better judgement) something weird happens. 
There's data that resembles a spreadsheet but what in tarnation is all that gobbledegook in the very first cell?btbb_export_01.png

 

That, my friends, is something they didn't teach you at Monument University.

When you download the .XLS file, there's a surprise hidden inside.

 

The spreadsheet from BtBb is NOT an XLS file at all, but rather an HTML document with a .XLS extension.  Excel can open it and present the data because it’s HTML and it’s laid out in tables, so Excel says “oh.  Ok.  I can figure this out.” and it goes from there.  But because it’s not “real” Excel data, it’s hard to work with (and that’s also why it’s always got that big ugly line of code in the top row).

 

To see for yourself, download the file from BtBb, change the extension to .HTM (or .HTML), then open the renamed file in your favorite text editor or browser.   It will look okay, but it’s still not quite right.  If you copy and paste that text into Excel, you’ll have a lot of blank rows and your sorts will be wonky as a result.

 

The next section shows here’s how to fix that. 

 

Making Sense of the Weird Exported Data

 

Open the HTML document in a text editor (There are tons of them out there.  I'm a fan of Atom because it's cross-platform.  But I confess, if I'm on a PC, I'm partial to Notepad++).

 

PART ONE - CLEAR YOUR HEAD

 

Once you've opened the document, delete everything before the <table> tag.  There's a lot.  Most of it is in the <script>, which is actually the only thing you need to get rid of, but it's simpler just to get rid of everything rather than look for the start and end of the <script>, especially if you're not used to working with HTML code in a text editor.

btbb_delete_header.png

 

Now we are left with a document with no HTML heading information.  This would be a terrible practice for actual HTML coding, but we're not doing actual HTML coding for publication, we're just cleaning up a mess.  Your browser will still read it without issue (browsers are smart like that).

 

PART TWO - ELIMINATE THE EMPTY PARAGRAPHS

If you saved the file at this point and opened it with your browser (or with Excel), you'd see that the garbage at the top was gone.   But we want to do something else before we save it.   What you can't see in the browser is that there are several <p> elements in the code that would cause Excel to render the data as a blank row.  This isn't cool.   So you want to eradicate all of these. 

 

So...  do a find/replace for <p>, replacing each instance of <p> with a delimiter of your choice (I like ; in this instance, but that’s just me). 

btbb_remove_p_tags.png

Save the file.

 

PART THREE - GETTING USABLE DATA INTO EXCEL

 

We're not quite done.  Now that you've saved the HTML file, open it in your web browser of choice.  Magically, all of the extraneous rows are now gone.  Now, copy all of that data in the table (the one in your browser) into a blank Excel document.  Depending on your computer, it may take a bit, as there is a lot of data there.

 

However, if you check out the Excel spreadsheet, you'll notice that the data is clean and much easier to work with.

 

So save the Excel file, and you now have a copy of the Known Issues saved locally.  YAY!!

 

Wrapping it up

 

This isn't the end, but it gives you something to work with.  The real tricky part comes when you want to make those dates something you can actually use, because at the moment, Excel is treating that data as generic text because it doesn't know any better.

 

If there's interest, I'll write a follow-up piece to this about how to clean up the date data so that it actually means something.

 

I will confess, this is a clunky, labor-intensive method, and I’ll come up with a more elegant method eventually, but for the moment, it gets the job done.

 

 

 

 

 

 

 


 

1Okay, it should be noted that while I'm writing this, I'm watching a live Phish concert (on the web, not in person), hence the oddball headers and occasionally goofy tone of the article).