iandevlin.com

Icon

A mixture of musings on web design & development, history, and life

Shadowbox and Internet Explorer 8

This is a post from my previous blog which I thought I’d transfer here as it seems to be getting some Google hits!

(Originally posted Friday, 19th June 2009)

If, like me, you’ve been using Shadowbox.js by Michael J. I. Jackson for displaying shadow boxes for images and videos (see photos and videos), then you may have been slightly annoyed to get an “invalid argument in shadowbox.js” error when viewing the site in Internet Explorer 8.

To fix this, simply go to /(your-shadowbox-directory)/skin/classic/skin.css and add the following:

#shadowbox_title {
border: 0px solid;
}
#shadowbox_info {
border: 0px solid;
}

And it will all work!

15 Responses

  1. Polprav says:
    16 October 2009 at 02:49

    Hello from Russia!
    Can I quote a post in your blog with the link to you?

  2. ian says:
    16 October 2009 at 07:29

    Hi there Polprav, you can of course, thanks for asking, very polite of you! :-)

  3. Aaron Craig says:
    26 October 2009 at 09:57

    You can also just put those CSS statements in your own css file, as long as it loads after the shadowbox css.

    So, for my page I’ve got:

    … load shadowbox js and css …

    And then in ie-8.css I’ve placed your css statements.

  4. ian says:
    26 October 2009 at 10:02

    Indeed you can Aaron, and that’s probably a better idea, especially if you have an IE8 specific CSS file as you have as it separates the original CSS from any browser specific changes.

    Thanks for your comment!

  5. Tady says:
    9 December 2009 at 12:31

    You might find that you’ll run into a number of issues with JS API’s in IE8. One I use which is throwing a particular figary is Fancybox. There was no update available so what I did instead was add the following Meta tag to the page that called it:

    This forces IE8 out of Quirks Mode and into Compatibility mode and renders the page as if it’s IE7.

    Saved losing a couple of clients that one did…

    T

  6. Tady says:
    9 December 2009 at 12:33

    Probably didn’t render this as I put the pointy brackets on it so it may have actually deleted it, what with spam protection and all. Here’s the meta data again anyway…

    meta http-equiv=”X-UA-Compatible” content=”IE=7″

  7. ian says:
    9 December 2009 at 12:35

    Yeah if you use the ASCII code for the angled brackets instead, it’s fine. Annoying though, would have thought WordPress would have implemented that. There must be a plugin for it somewhere.

    You can also put it into <code> tags.

    &lt;meta http-equiv=”X-UA-Compatible” content=”IE=7″&gt;

  8. Info24h says:
    17 May 2010 at 09:10

    It work fire

    See more …
    www .info24h.net/shadowbox/Shadowbox%20not%20working%20with%20Internet%20Explorer%208

  9. ian says:
    17 May 2010 at 09:18

    Indeed, the link you referenced is exactly the same as the fix I suggested.

  10. Mason says:
    30 September 2010 at 18:34

    In case anyone else hits a problem similar to this, and goes googling, but this doesn’t help (like for me), I found the solution here:
    http://shadowbox-js.com/forum.html#nabble-td2634444

    I was using:

    
<script type="text/javascript">
Shadowbox.init({players:['qt']});
</script>

    But on systems that didn’t have quicktime installed, it tried to show an error, I’m guessing using the ‘html’ ‘player’, and failed. So instead I used:

    
<script type="text/javascript">
Shadowbox.init({players:['qt','html']});
</script>

    and I was bathed in the warmth of error free IE.

  11. Adam says:
    11 January 2011 at 04:06

    Thank you mason, your trick helped. The original blog did not.

  12. ian says:
    11 January 2011 at 11:04

    Well Adam I wrote this ages ago so it goes without saying that Shadowbox.js has moved on since then and there may now be different issues with different fixes. So no need to be arsey about it.

    Glad Mason’s solution works.

  13. Nitin Jaurkar says:
    12 July 2011 at 13:08

    Thank you very much sir. The CSS code in skin.css file helped me to remove the error. God Bless you.

  14. Tom says:
    13 July 2011 at 20:14

    If I could, I would kiss you!!! Simple fix, works perfectly in ie8 now. Thank you!!!

  15. Ian Devlin says:
    13 July 2011 at 20:30

    You’re welcome Tom, kisses not needed :-)

Leave a Reply