Shadowbox and Internet Explorer 7

[MikeN]

Hi there, Please can somebody assist me with the following : When opening Shadowbox in Internet Explorer 7, it opens off the screen so if you don't know to scroll to the top of the screen, you don't see the Shadowbox. (...works perfectly in IE6, Firefox, Opera and Chrome) An example is here... click on the umbrella to open the shadowbox This is quite a problem, especially for blogs where the top of the page could be a very long way from a link at the end of the blog roll. I notice that the issue also seems to be on the Shadowbox home page when opening the example in IE7... so is this a problem with the actual shadowbox code? If so, how do I go about getting Shadowbox to work in IE7. Many thanks for any advise or ideas. Kind regards, Michael

[MikeN]

Hi Shadowbox community,

Can anybody please assist me with an answer to this problem of Shadowbox not opening correctly in IE7?

Many thanks,
Mike

[MikeN]

Hello... is Mr Jackson out there?

Please can you assist with this post. I really like Shadowbox for presentation of everything from photos and videos to flash panoramas. I have purchased a commercial license and am using Shadowbox as my choice of display... but Shadowbox does open properly in IE7 and this is now causing me a big problem, because almost 70% of visitors to my site use IE7. (I know... I know)

Even opening the examples on the shadowbox.js home page in IE7 is a problem. When you click on the link it appears that nothing is happening when in fact the shadowbox has opened but you need to scroll way up to to the top of the screen before you can see it.

I have tested on different computers with the same result although it is exaggerated by smaller monitors.

Shadowbox works perfectly in all other browsers!!

Please Mr Jackson could you offer a solution.

Many thanks and kind regards,
Mike

[Martin Arrua]

Try to replace :

body>#sb-container{position:fixed;}

with :

html>#sb-container{position:fixed;}


in the shadowbox.css file

[MikeN]

Hi Martin,

Fantastic! Thank you very much for your advise.

I changed the "body" to "html" as you suggested.

The result is that Shadowbox now opens perfectly in IE6 and IE7, but opens at the top of the screen in Firefox, Safari, Opera, and Chrome.????

Example here.

Now is it at all possible to combine "body" and "html" to get Shadowbox to work in all browsers?

Many thanks,
Michael

[Martin Arrua]

The solution that i found is to have two css files, the original "shadowbox.css", and a "sbiefix.css" with the css correction to work on IE, then you must use css conditionals to use "sbiefix.css" in case of the web is being "browsed" with any IE

Google for "css conditionals" for more info.

[Žiga]

That css modification works for me

[Alper]

excellent solution, works like a charm.. Thank you..

[Lt. Columbo]

Hi all,

I have been reading through this thread a million times now and made every (to me) thiinkable attempt to make this work. I'm glad to know that you guys have got it working. That gives me hope at least. I have this exact same problem in IE8. The overlay scrolls the opposite way of my content in IE, while everything works fine on FF and other browsers.

I tried changing "body>#sb-container{position:fixed;}" to "html>#sb-container{position:fixed;}" - but got the same error as MikeN. Then it doesn't work properly on Firefox. :(

Then I followed Martin Arrua's advice and created a seperate .css file to import. In order to do that I use this string: "<!--[if IE]> <style type="text/css">@import "shadow.css";</style> <![endif]-->" - which I found here: IE Conditional CSS by CreativeBits.

Now I'm running out of ideas - and any help what so ever will be much appreciated. You can see my page here: Article about Motorcycle. I am trying to use the shadowbox on the images on the right and side. But in IE it just doesn't work properly. :(

Please, if anybody has any ideas as to what causes this, and more important, how I fix it I'd be very grateful.

Thanks in advance for any help.


Rgds,
Chris.

[Wizzud]

Sorry, no help to you, but I can't see any problem (IE7/8 on WinXP).
[ I would wonder about the use of XHTML syntax and namespace, with an HTML DocType? ]

[Lt. Columbo]

Hi,

Thanks for the reply.

But, really? ... You don't see the problem when scrolling the page? I have this problem on my own machine IE8 and my work laptop with IE8 as well.

You're right about the "XHTML syntax and namespace, with an HTML DocType?" -thing. But I don't know enough about these things to know where you're heading, to be honest. :)

I'm just trying to build my site using Joomla (latest version) on the Elevation template from JoomlaBamboo. Could it be that it's because of something in Joomla, that I'm facing these problems?

i have tried everything I can think of, moving things around and in and out - all to no avail. Any small hint or insight would be great, so I can get this fixed. I'd really like to start using Shadowbox. It's cool!

:)

Cheers.

Chris.

[Wizzud]

Do you experience the same problem with the Shadowbox Home page?
What OS are you running? (WinXP? Vista?)

With XHTML syntax everywhere else, I (personally) would try to use an appropriate DocType, eg...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

...(which may/may not have some other impact).

Unrelated observations :
You are loading 2 copies of MooTools v1.11 (1 compacted, 1 packed), and 2 versions of swfobject (v1.5 and v2.1). They have no bearing on your current problem, but you should be aware of them, particularly the swfobject version difference. Also, given the nature of Joomla extensions, it's not easy to avoid such duplication sometimes.

[Ron]

Hi.

The Shadowbox home page fails for this as well (IE7).

Has a permanent fix been established to fix (most) browsers? Or is the CSS conditional the only way to go?

I thought for sure that the modification above by Martin Arrua fixed both browsers a few months ago. Is it possible that security updates are messing with this?

I love the effect as well!

[Wizzud]

This is precisely what makes it so difficult to fix ... because the Shadowbox home page works perfectly for me. And it is nigh on impossible to fix what can't be seen to be broken!

[Raivo]

I found one solution to this problem that does not include other css files.

replace body>#sb-container{position:fixed;} in shadowbox.css with:

html>#sb-container{position:fixed;}@-moz-document url-prefix() {body>#sb-container{position:fixed;}}

havent tested in other browsers but in my FF and IE8 (also with compatibility mode) works fine.

what do you think about this_

Regards.

[Ron]

@Wizzud - I totally understand the frustration! Many variables.

@Raivo - That seems to work for FF & IE. Google chrome now fails (not that it's THAT important to me). Is there similar code for Chrome that you're aware of?

[J.G.]

Thanks for posting that, I have this annoy bug on ie8 on winxp, and a huge amount of my customers use xp.

what about targeting ie, with David Bloom css hack, pacing after body>#sb-container{position:fixed;}

IE8 Standards-Mode Only:
html>#sb-container{position/*\**/:fixed\9}body>#sb-container{position/*\**/:absolute\9}

All IE versions, including IE8 Standards Mode:
html>#sb-container{position:fixed\9}body>#sb-container{position:absolute\9}

both cases works for me on ie8, ie7 tester, ie6 tester, firefox 3.5 and chrome

[Ron]

You're right. Works for everything except IE8/XP?
EDIT: Actually, it doesn't work in XP or Windows 7 now :( - haven't checked IE8/Vista

It's exhausting trying to satisfy all browsers -- and now OS's!