Lightbox Offset in Internet Explorer

Aug 17, 2018

Jamie Liske
By Jamie Liske

I've run across an issue where a lightbox is offset to the upper left corner of the screen (see image).Offset Lightbox in IE

This occurs when published with Storyline 360 v.3.18.16449.0 and I've encountered the problem on Articulate Review and SCORM Cloud.

The good news is I fixed the issue by updating the main.min.css file in the published output. You can do the same by opening the folder directory that is created when you publish a project and following this path: html5/lib/stylesheets. There you'll find the CSS file in question. Open it and add the following to it (I put it at the end). Be sure to zip the output or copy the CSS file to the zipped folder directory before you upload it to an LMS.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {.lightbox .slide-container{position:relative;top:50% !important;right:initial;bottom:initial;left:50% !important}}

This will target IE 10 and 11 and it'll fix the offsetting.

8 Replies
Alyssa Gomez
over 5 years ago08/20/18 at 3:09 pm (UTC)

Hi there Jamie,

So sorry for the trouble. We're seeing the same problem when using the Modern player. Fortunately this doesn't happen with the Classic player, so that could be an alternative if using Internet Explorer is essential.

Thanks for sharing how you got around it! We'll let you know as soon as we get this sorted out. 😁

This discussion is closed. You can start a new discussion or contact Articulate Support.