is Shadowbox positioned relative to the body tag?

classic Classic list List threaded Threaded
16 messages Options
Reply | Threaded
Open this post in threaded view
|

is Shadowbox positioned relative to the body tag?

Neophyte
Hello All -

I'm using shadow box on a project that uses the <body> tag for the content wrapper. the body tag is sized to 780px wide.

On FF, Safari (WIN), Opera and Chrome, Shadowbox displays as expected. However, on IE9 (perhaps IE8 as well) the top/left of the entire display (shadowbox background and content) displays exactly at the top/left corner of my content <body> container.

Has anyone else experienced this when using <body> as the main content container?

I'd hate to re-code the project with a <div> container, but if that's the only way to make shadowbox display correctly in IE then I'll have no choice.

So, my questions are:
1. Does shadowbox use the top/left of <body> for it's default positioning... and if so...
2. Is there a way to alter the .js so it uses <html> instead?

All replies are greatly appreciated.

Neophyte
Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

arttronics
For example, if I use the following markup:
<body style="width:780px;height:480px">

The above will produce scrollbars once I resize the browser window smaller than the size specified.


I do not notice any unusual Shadowbox behavior in IE8. Shadowbox is centering everything correctly.

For your questions:
1. The source code for Shadowbox dimension and centering calculations indicate it does not use top/left.
2. I don't understand your question. But you can use Shadowbox HTML Player (Inline and/or dynamic HTML) or Shadowbox iframe Player (External sites and pages) if required.

Make sure your downloaded copy of Shadowbox has those players to use them, or download Shadowbox with those options.

It could be that you have other things effecting Shadowbox. Post your markup or provide a link.

TIP: Once you paste code into the MESSAGE BOX here on the forum, select that markup with your mouse and from the toolbar choose More options then click Raw Text to preserve the HTML format.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

Neophyte
Hello arttronics -

Thanks very much for your reply.

I thought that my explanation may be a bit difficult to understand without a link so here it is:

http://www.koisis.com/index.php?cmd=01.02.00.01&lac=en-us

This is my live development environment.

If click any of the thumbs on the left-hand side of the text content in FireFox (for example) you'll see that everything works fine.

Now try it in IE 9 and you'll see that the entire shadowbox display is indeed aligned to the top left of my container (which is the <body> tag).

As mentioned previously, this behavior ONLY happens in IE 9 - Maybe 8 and 7 as well... I haven't checked those versions yet.

If you have any idea what I can do to fix this, I'd be very grateful.

Neophyte
Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

dataload
All the shadowbox markup is contained in a div with an id of sb-container which gets appended to the body tag. For modern browsers this uses CSS position:fixed to keep it in view as the user scrolls the site. IE6 doesn't support fixed positioning so uses absolute positioning along with a scroll event handler to constantly update the top value of sb-container. Unfortunately v3.0.3 of Shadowbox uses browser sniffing rather than feature detection and this particular method actually gets targeted at all versions of IE not just IE6 (this has since been updated to use feature detection in the shadowbox source of skin.js).

As with any absolutely positioned element, it get positioned relative to its nearest positioned ancestor element. In your case you have position:relative set on your body tag. If you take it away Shadowbox will behave normally (though some of your other content will be out of place since it's probably relying on the body element being relatively positioned). The simplest fix is just to use an extra div around all your content that has the width and relative positioning, and just let the body tag do its own thing. I know you said you didn't want to put any extra markup in but I don't think even the strictest markup nazi would begrudge you a outer content div :-)
Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

arttronics
In reply to this post by Neophyte
I do see this problem in IE8.

Since you don't want to recode the whole site to accommodate an extra DIV, how about using a separate style sheet for IE?

For example, something like this in the HEAD section can be tested:

<!--[if IE]>
     <style type="text/css" media="screen">
          body
          {
          	width: 780px;
          	margin: 50px auto;
          	color: #E4E5E6;
          	font-family: Arial, sans-serif;
          	font-weight: normal;
          	font-size: 1.0em;
          }

     </style>
<![endif]-->

<!--[if !IE]><!-->
     <style type="text/css" media="screen">
          body
          {
          	position: relative;
          	width: 780px;
          	margin: 50px auto;
          	color: #E4E5E6;
          	font-family: Arial, sans-serif;
          	font-weight: normal;
          	font-size: 1.0em;
          }
     </style>
 <!--<![endif]-->

Other useful methods for IE styles are found here.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

Neophyte
In reply to this post by dataload
Petmitch (and arttronics):

Thank you both very very much for your suggestions.

Petmitch - you're right taking position:relative off of <body> does screw a lot of other elements up that cascade off of that declaration. So path of least resistance was indeed to add a wrapper div which I've done and re-uploaded to my live development server.

The technique worked and the additional work of including <div id="wrapper"> was worth it the effort.

One last thing however (still IE): I've hacked shadowbox slightly (as per another post) to include both a gallery head (above the image) as well as multi-line caption below the image counter and nav buttons. As usual, all works well in FF, Opera, (et al). In IE 9 (and probably 8 and 7) the green line I have separating the image counter from the image caption collapses and part of the caption is pushed up between the counter and nav buttons.

Go here in FF http://www.koisis.com/index.php?cmd=01.03.00.02&lac=en-us to and click on one of the small images on the left to see how it's suppose to look vs. how IE9 displays it.

I can't see the html shadowbox generates so I'm not sure how to attack this issue. The CSS provided for this caption is as follows:

#sb-caption{clear:both;font-size:1.10em;height:auto;line-height:16px;color:#fff;border-top: 1px solid #9CA027;padding-top: 5px;}

Appreciate any insight you (or anyone else on the forum) can give regarding this final wrinkle.

Neophyte

I've can't seem to view the displayed shadowbox source so I don't know how to attack this last issue in IE
Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

arttronics
I do not have IE9 to test with your site.

For IE8, I do not see any issues with the green line. No issues for IE8 Compatibility Mode as well.

When I use mode IE7 (within IE8), your site breaks and Shadowbox will not be shown.

If there is no issue with the Shadowbox Caption mod, perhaps your INTERNET EXPLORER CSS EXCEPTIONS for file gallery.css is affecting what you see. Perhaps disabling this temporarily to see if it makes a difference can lead you to what's causing the issue.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

dataload
This post was updated on .
In reply to this post by Neophyte
Looks like just the usual IE flakiness with CSS, easy fix is just to apply width:100% or zoom:1 to #sb-caption (any property that activates hasLayout in IE will do - worth googling hasLayout if you've not come across it before since it's the root cause of about 95% of all CSS layout issues in IE).

If you want to checkout the markup that Shadowbox actually generates try the Developer tools in any decent browser like Chrome, Opera, Safari, IE9 or use Firebug for Firefox.  If you want to test multiple versions of IE then I'd recommend IETester.
Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

arttronics
In reply to this post by Neophyte
Humm, another thing to consider is your "mashup" of Pixels and EM may be confusing IE9 specifically.

I noticed that #sb-info and #sb-title (among other items) are consistent to use only pixels.

Those items also do not require specific IE 9 CSS rules in order to be properly displayed. Your clear:both; may also play a factor and it might be better to include markup that is part of your actual caption.

@petemitch, that's a great IE tool I never heard about. Thanks for the share!

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

arttronics
This post was updated on .
In reply to this post by Neophyte
EDIT: This incorrect post was removed.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

Neophyte
Hello PeteMitch and Arttronics -

Thanks again to you both for weighing in on my IE issues.

Have tried the width:100% technique and then zoom:1 neither of which worked for me so this issue must be related to something else. Also corrected the css font-size rule from 'em' to 'px': still no love.

Then I looked at the developer controls in IE9. By default IE9 renders using the IE8 engine (sort of weird) so IE8 is really the cause of my collapsing caption problem. When I selected IE9 as the rendering engine, my captions displayed perfectly.

So, the fixes I've got to implement are for IE7 (where - as arttronics notes - the gallery doesn't show at all) and IE8 with the collapsing captions. What's really worrying me now is the IE7 "no gallery" issue.

Arttronics: will also implement the Caption Mod Fix you suggested to make the code more stable. Much appreciated. Will update my success/failures in the following days.

Thanks again to you both!
Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

arttronics
Unfortunately the Caption Mod fix works for Shadowbox.open calls, and will break captions when using Shadowbox rel attribute that you rely on, hence that post was deleted. I have no current solution that satisfies both methods.

Please note that seeing your site with the real IE7 is important since the render mechanism in IE8 could be the issue here... much like your issue when rendering IE8 when your using IE9.


That said, you've made an important discovery here: Your site displays perfectly in IE9 when the render engine is IE9. It fails when the render engine is IE8.

For me, the real IE8 that is rendered for both IE8 (normal) and IE8 Compatibility Mode work without issue.


It seems to me that whenever a render engine is less than the current build of IE is where the issue is at... which could mean no issues are with your site to begin with... and it's IE mimicking a previous version that is at fault.

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

dataload
In reply to this post by Neophyte
OK, just realised that setting any property from the IE9 dev console made the weird caption wrap go away, so I thought the width:100% or zoom:1 was doing the trick but it wasn't. Use #sb-caption {overflow:auto}, that definitely fixes the caption wrapping (it's a clearfix variation that some people use for autocontaining floated content). As for the IE8 rendering mode you have this in your document head section:
<!-- FORCES IE-8 TO ALWAYS RENDER USING IE-8 ENGINE -->
<META content=IE=8 http-equiv=X-UA-Compatible>
As the comment suggests it forces IE9 to use the IE8 rendering engine - quite handy when you've got an old site and you don't want to have to rehash the css everytime microsoft see fit to bless us with the next version of IE (though to be fair they've done a reasonable job with IE9). AFAIK it shouldn't have any effect on IE7 so it's probably not the source of your IE7 issues (though might be worth getting rid of it temporarily just to check). IETester that I linked to above is very good for testing IE since it actually uses the rendering and javascript engines from the legacy versions of IE so tends to be a bit more reliable than just using the various compatibility modes in the newer versions of IE (though the only way to do truly reliable legacy IE testing is to set up VM for every version you want to support).

I think the cause of your IE7 issue might be in the file 02.shadowbox_init.js:

/*
 * Shadowbox.js, version 3.0.3
 * http://shadowbox-js.com/
 *
 * Copyright 2007-2010, Michael J. I. Jackson
 * Date: 2010-10-21 05:34:57 +0000
 */
Shadowbox.init({
    overlayOpacity: 0.85,
    //displayNav:     false,
    //displayCounter: false		   
});

Try getting rid of the comma after the 0.85

Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

arttronics
In reply to this post by Neophyte
When removing the comma as petemitch mentions, IE8 will render IE7 with no issues seen, and it was the comma for the last Shadowbox Option that was at fault. Good catch petemitch!

When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.

Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

Neophyte
PeteMitch and Arttronics -

I hope you guys heard my unrestrained sobs of joy and appreciation. Now I can sleep tonight.

The latest suggestions to fix both the IE7 issue (which really wasn't an IE7 issue) as well as the comment formatting issue in IE8 both worked flawlessly - thank you both very much for your continued assistance - particularly PeteMitch.

Next time (or at any time) either one of you end up in the Philippines, a case of San Miguel is on me!

Neophyte

PS (and OT): within the next 3 months or so I'll be needing another modification to shadowbox. I'm really a PHP guy - a little basic jQuery but no hard-core javascript and I'm interested in hiring someone to create this modification. If either of you feel qualified to do this and are interested in this task, I'd like to speak with you off list - how to carry a conversation off-list I'm not sure!
Reply | Threaded
Open this post in threaded view
|

Re: is Shadowbox positioned relative to the body tag?

arttronics
Glad your issues are resolved, as I always learn from those that I help. It's a win-win situation if you ask me.

There's a chance your modification request has already been implemented, but to be sure I am about helping others on this forum... your free to post any help you need but I don't do this for financial gain or gifts because that is contrary to what this forum is provided for.

Chat with you next time for the next Shadowbox topic!

Adios from sunny California, USA.


When posting your markup here on the forum follow these simple steps:

0. Login and paste your markup into the Message Box.
1. Mouse select the markup you just pasted.
2. Press the More Button from the Message Box Toolbar.
3. Select Raw text from the drop down menu. DONE!

If I don't respond to your POST, it's your inability to provide your markup correctly.

Check out a few DEMOS I made that are here in this forum.