HTML5 in Internet Explorer 11 problem

I tested a course in Internet Explorer 11 using the HTML5 output and there seems to be a problem with the "Menu". I have the "Menu" set up in the Player as a button instead of the "Menu" filling the side of the Player. When viewed in HTML5 in IE11 when you click the "Menu" button, you get a small box with a scroll bar (see attachment). Has anyone experienced this, and do you have a solution? I need the course to run exclusively as HTML5, NOT Flash (long story, don't ask).

37 Replies
Mindy Smith

Thank you, when I log on to the forum, I don't see the messages I'm being sent. Otherwise I would have responded through the forum

Mindy L. Smith
Corporate Instructional Systems Designer
Corporate Compliance and Ethics
INVISTA S.à r.l., Wichita, KS
(O) 316-828-1640
(F) 316-828-1158

Leslie McKerchie

Well that's interesting Mindy. When your e-mail comes in, and you click 'View' vs 'Reply' it should direct you to the forum post.

You should then see an option to 'Edit' below each of your replies.

It's no worries on our part, but I like for the users to be aware that their signature is being attached and it would be more difficult to include files/attachments as well.

Hope that helps :)

Robert Stewart

HTML5 output in IE11 (old post but I see developers who gave up).

I found that when the menu is set to be on top left corner as a drop down, it displayed just the menu title but having no height or width too.

Inspecting it in IE11 DOM explorer I found that the wrapper div with the class "toptab tab outline notitle active" had the .toptab as position: relative and overflow-x as 'hidden'. This took me a whole 5 minutes of my time.

Unchecking these in style examiner to the right made the menu appear as it should.
They should fix this as inserting CSS overrides is just another pain in this program.

Standard reply: "We only support Chrome".
My reply: "Very lame. Better get some CSS developers on the team".

Bottom line: anything can be made to work in IE if you google stackoverflow.
(By the way, start putting ids on every element developers including iframes!)

Ashley Terwilliger

Thanks Robert for sharing that intel and I also wanted to let you know that with the release of Articulate 360 we were able to broaden the scope of browsers supported for HTML5 content.  The support for HTML5 across these browsers has always had a base in how each of the browsers would perform given the rich content and interactions created in Articulate content - so as each browser advances with their HTML5 development, we're able to begin including them in our supported list. 

Robert Stewart

Thanks, I'll be looking forward to the stand-alone version when released. Don't care too much about the cloud since Adobe thought they need some more Jags.

Just one more thought: Will Storyline 3 use real names for files ?
e.g.   boat.jpg  car.png
instead of Bx456sEbdtHHdebbDfsddhGGfsssssiidTdWqCCxnTTxzOpPu.jpg
Make that request for folder and iframe names too.

Nothing like republishing an entire project then FTP-in every files just to change one single image of the same dimensions.

Ashley Schwartau

Hey, anyone have any if the attached images show issues related to IE11?? A client sent them to us saying the course they're viewing locally (HTML5) is displaying all funky like this but we can't recreate it in any browser, locally or in SCORM cloud. The letter F is missing from everything!!! Any ideas??????

Greg Eales

Hi Robert, I realize this post is 3 years old but my company is experiencing this menu issue in IE11. We are trying to move to a new browser (more than likely MS Edge Chromium) as our main browser but that may not come in time for the Flash player end-of-life date this year.

You mentioned you could fix this menu issue by inserting a CSS override. Is this an easy process?

Really appreciate your time and thoughts on here. 

Ken Flieger

I'm using Storyline 360 now and went from IE11 to Chrome. Note Edge now uses the same chromium engine and layout (History panel sucks with no sidebar). I'd suggest you use Chrome but if you must use IE11 then insert CSS using Javascript and the Master page. Sorry, Cannot help you on Javascript code but its just a line or 2 - pretty simple. - Use f12 to find the class name, way back then it was 'toptab tab outline notitle active'. I'm on someone elses computer now so disregard the name 'Ken'.