jQuery UI Slider and IE8 Compatibility Mode / IE7

After implementing the slider control from jQuery UI with our video player I was quite happy with the overall performance and the look and feel, unfortunately I experienced some headaches when it was deployed as the setup I had implemented did not work with IE8 in the compatibility mode. Now, thankfully the app was for internal use where I can tell people not to use IE8 in the compatibility mode, but obviously some were using it that way otherwise I would not have had any complaints.

The whole thing irked me a bit so I figured out how to make it work properly.

The first issue was that the slider did not slide. The Javascript was reporting back that the width of the element was 2 rather than 500 as it did in IE8. I tracked that down to needing to specifically set the size of the DIV that contained the DIV that the player was in. So it ended up as…

I did already have elements within that container div that had a width set to 500px, but the slider in IE7 mode did not expand properly without giving the container it was in a specific width. YMMV.

The other problem I encountered was that while using a UI theme with the slider and having it report progress using the single slider and a background value (in this case a background image) the image would often expand to 100% of the height of the page (though only downward, not up) so you would end up with the progress bar of the slider expanded as a giant block over whatever was below it.

The solution to this was to override these particular styles and give them a fixed height rather than the 100% they are set to by default. In my case I changed them to 2.0em as that fit with the other changes I made to the height of the slider.


One Comment

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>