Fancybox / Lightbox with margin: auto

[noiseordinance]

Hi there. I'm curious if someone can help me (I guess that's a no-brainer). About a year ago, I posted about centering a page horizontally and vertically, and someone suggested using "margin: auto" to accomplish this. It works great and all, but I'm trying to incorporate Fancybox / Lightbox onto our website and the image won't properly center on the page. Yet, when I remove margin: auto, it centers fine. Is there any way that anyone can think of to make the image center on the parent document and ignore the div that contains it?

Thank you much!

[Major_Payne]

Might help for dead centering:

[wpdfd.com...]
[nopeople.com...]

Using CSS To Center Content [elated.com]

Dead Centre [wpdfd.com]

Those may give you ideas on how to adopt the centering for your pages.

[Major_Payne]

Server hung up on me and refreshing apparently submitted a duplicate post.

[SuzyUK]

As a guess... It sounds like the lightbox itself may be using positioning to center itself, but it does not know to take it's position from your centered page and is defaulting to the nearest "containing" ancestor which is probably the body element.

A containing block [w3.org] for absolutely positioned elements is the nearest ancestor which itself is positioned (not static)

try adding

position: relative;

to your page centering div.. the same one you have

margin: auto;

on see if that helps

if that doesn't work can you post the lightbox CSS.. not all of it just the main (possibly first part) so we can see how the lightbox itself is trying to center/position itself

[noiseordinance]

Thank you much for the replies. I have set the position to relative and it no longer centers the website when I do that, so I've kept it at position: absolute.

Here's my body tag that I use to center:

body {
font: normal 12px/normal Arial, sans-serif;
color: #eaeaea;
background-color: #3D3A32;
width: 1100px;
height: 768px; 
position: absolute; 
top: 0;
bottom: 0; 
left: 0; 
right: 0; 
margin: auto; 
padding: 0px;
border: none;
}

And here's the code for the Fancybox CSS:

#fancybox-loading {

position: fixed;

top: 50%;

left: 50%;

height: 40px;

width: 40px;

margin-top: -20px;

margin-left: -20px;

cursor: pointer;

overflow: hidden;

z-index: 1104;

display: none;

}



* html #fancybox-loading {/* IE6 */

position: absolute;

margin-top: 0;

}



#fancybox-loading div {

position: absolute;

top: 0;

left: 0;

width: 40px;

height: 480px;

background-image: url('fancybox.png');

}



#fancybox-overlay {

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: #000;

z-index: 1100;

display: none;

}



* html #fancybox-overlay {/* IE6 */

position: absolute;

width: 100%;

}



#fancybox-tmp {

padding: 0;

margin: 0;

border: 0;

overflow: auto;

display: none;

}



#fancybox-wrap {

position: absolute;

top: 0;

left: 0;

margin: 0;

padding: 20px;

z-index: 1101;

display: none;

}



#fancybox-outer {

position: relative;

width: 100%;

height: 100%;

background: #FFF;

}



#fancybox-inner {

position: absolute;

top: 0;

left: 0;

width: 1px;

height: 1px;

padding: 0;

margin: 0;

outline: none;

overflow: hidden;

}



#fancybox-hide-sel-frame {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: transparent;

}



#fancybox-close {

position: absolute;

top: -15px;

right: -15px;

width: 30px;

height: 30px;

background-image: url('fancybox.png');

background-position: -40px 0px;

cursor: pointer;

z-index: 1103;

display: none;

}



#fancybox_error {

color: #444;

font: normal 12px/20px Arial;

padding: 7px;

margin: 0;

}



#fancybox-content {

height: auto;

width: auto;

padding: 0;

margin: 0;

}



#fancybox-img {

width: 100%;

height: 100%;

padding: 0;

margin: 0;

border: none;

outline: none;

line-height: 0;

vertical-align: top;

-ms-interpolation-mode: bicubic;

}



#fancybox-frame {

position: relative;

width: 100%;

height: 100%;

border: none;

display: block;

}



#fancybox-title {

position: absolute;

bottom: 0;

left: 0;

font-family: Arial;

font-size: 12px;

z-index: 1102;

}



.fancybox-title-inside {

padding: 10px 0;

text-align: center;

color: #333;

}



.fancybox-title-outside {

padding-top: 5px;

color: #FFF;

text-align: center;

font-weight: bold;

}



.fancybox-title-over {

color: #FFF;

text-align: left;

}



#fancybox-title-over {

padding: 10px;

background-image: url('fancy_title_over.png');

display: block;

}



#fancybox-title-wrap {

display: inline-block;

}



#fancybox-title-wrap span {

height: 32px;

float: left;

}



#fancybox-title-left {

padding-left: 15px;

background-image: url('fancybox.png');

background-position: -40px -90px;

background-repeat: no-repeat;

}



#fancybox-title-main {

font-weight: bold;

line-height: 29px;

background-image: url('fancybox-x.png');

background-position: 0px -40px;

color: #FFF;

}



#fancybox-title-right {

padding-left: 15px;

background-image: url('fancybox.png');

background-position: -55px -90px;

background-repeat: no-repeat;

}



#fancybox-left, #fancybox-right {

position: absolute;

bottom: 0px;

height: 100%;

width: 35%;

cursor: pointer;

outline: none;

background-image: url('blank.gif');

z-index: 1102;

display: none;

}



#fancybox-left {

left: 0px;

}



#fancybox-right {

right: 0px;

}



#fancybox-left-ico, #fancybox-right-ico {

position: absolute;

top: 50%;

left: -9999px;

width: 30px;

height: 30px;

margin-top: -15px;

cursor: pointer;

z-index: 1102;

display: block;

}



#fancybox-left-ico {

background-image: url('fancybox.png');

background-position: -40px -30px;

}



#fancybox-right-ico {

background-image: url('fancybox.png');

background-position: -40px -60px;

}



#fancybox-left:hover, #fancybox-right:hover {

visibility: visible;  /* IE6 */

}



#fancybox-left:hover span {

left: 20px;

}



#fancybox-right:hover span {

left: auto;

right: 20px;

}



.fancy-bg {

position: absolute;

padding: 0;

margin: 0;

border: 0;

width: 20px;

height: 20px;

z-index: 1001;

}



#fancy-bg-n {

top: -20px;

left: 0;

width: 100%;

background-image: url('fancybox-x.png');

}



#fancy-bg-ne {

top: -20px;

right: -20px;

background-image: url('fancybox.png');

background-position: -40px -162px;

}



#fancy-bg-e {

top: 0;

right: -20px;

height: 100%;

background-image: url('fancybox-y.png');

background-position: -20px 0px;

}



#fancy-bg-se {

bottom: -20px;

right: -20px;

background-image: url('fancybox.png');

background-position: -40px -182px; 

}



#fancy-bg-s {

bottom: -20px;

left: 0;

width: 100%;

background-image: url('fancybox-x.png');

background-position: 0px -20px;

}



#fancy-bg-sw {

bottom: -20px;

left: -20px;

background-image: url('fancybox.png');

background-position: -40px -142px;

}



#fancy-bg-w {

top: 0;

left: -20px;

height: 100%;

background-image: url('fancybox-y.png');

}



#fancy-bg-nw {

top: -20px;

left: -20px;

background-image: url('fancybox.png');

background-position: -40px -122px;

}



/* IE */



#fancybox-loading.fancybox-ie div{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_loading.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-close{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_close.png', sizingMethod='scale'); }



.fancybox-ie #fancybox-title-over{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_title_over.png', sizingMethod='scale'); zoom: 1; }

.fancybox-ie #fancybox-title-left{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_title_left.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-title-main{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_title_main.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-title-right{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_title_right.png', sizingMethod='scale'); }



.fancybox-ie #fancybox-left-ico{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_nav_left.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-right-ico{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_nav_right.png', sizingMethod='scale'); }



.fancybox-ie .fancy-bg { background: transparent !important; }



.fancybox-ie #fancy-bg-n{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_n.png', sizingMethod='scale'); }

.fancybox-ie #fancy-bg-ne{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_ne.png', sizingMethod='scale'); }

.fancybox-ie #fancy-bg-e{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_e.png', sizingMethod='scale'); }

.fancybox-ie #fancy-bg-se{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_se.png', sizingMethod='scale'); }

.fancybox-ie #fancy-bg-s{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_s.png', sizingMethod='scale'); }

.fancybox-ie #fancy-bg-sw{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_sw.png', sizingMethod='scale'); }

.fancybox-ie #fancy-bg-w{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_w.png', sizingMethod='scale'); }

.fancybox-ie #fancy-bg-nw{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_shadow_nw.png', sizingMethod='scale'); }

Thank you much for any pointers!

[SuzyUK]

Ahh OK, you're right leave the body as it is if it's working for you.. I think it's the fact that the body element is your centering element and seeing as how I don't know what else may be affected in the site by fickering with that.. or indeed the fancybox code let's try containing the entire fancybox code instead

try adding a wrapper div around your fancy box code, just a plain div any classname you like, but my-fancy-wrapper or something that will help you remember why it's there.. it needs no width or anything else set - let it default like normal content inside your centered body - ONLY set it to be

position:relative;

instead.. and see if that works

The fancybox code is using a lot of absolute positioning for it's various loading timers, content next/previous buttons etc? and I don't want to ficker with the defaults on them yet (trying not to touch the core plugin if you like) - the idea is to try and contain the fancybox, within your already working code.

PS have you have tried the fancy box code on a plain HTML page, i.e. inside <body> element with no positioning etc.. and seeing it centered properly on there?

[noiseordinance]

Thank you for helping me once again as you have before, SuzyUK. I appreciate it greatly.

I have switched the "margin: auto" tag (in the body) to "margin: 0" and fancybox centers perfect after that. Naturally, the website is no longer centered, but it's that single tag that affects fancybox.

This is how I'm positioning fancybox links currently:

#slideshow {
position:absolute;
top:233px;
left:28px;
height:297px;
width:969px;
border:0;
z-index:100;
}
 

This is the container that holds my links section:

<div id="slideshow"> 
<div class="jMyCarousel"> 
<ul> 
<li><a rel="example_group" href="images/gallery_history/1.jpg" title=""> 
<img src="images/gallery_history/1_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/2.jpg" title=""> 
<img src="images/gallery_history/2_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/3.jpg" title=""> 
<img src="images/gallery_history/3_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/4.jpg"> 
<img src="images/gallery_history/4_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/5.jpg"> 
<img src="images/gallery_history/5_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/6.jpg"> 
<img src="images/gallery_history/6_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/7.jpg"> 
<img src="images/gallery_history/7_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/8.jpg"> 
<img src="images/gallery_history/8_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/9.jpg"> 
<img src="images/gallery_history/9_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/10.jpg"> 
<img src="images/gallery_history/10_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/11.jpg"> 
<img src="images/gallery_history/11_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/12.jpg"> 
<img src="images/gallery_history/12_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/13.jpg"> 
<img src="images/gallery_history/13_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/14.jpg"> 
<img src="images/gallery_history/14_Thumb.jpg" width="297px" height=297px"" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/15.jpg"> 
<img src="images/gallery_history/15_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/16.jpg"> 
<img src="images/gallery_history/16_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
<li><a rel="example_group" href="images/gallery_history/17.jpg"> 
<img src="images/gallery_history/17_Thumb.jpg" width="297px" height="297px" alt="" /></a></li> 
</ul> 
</div> 
</div> 

Hopefully this paints the picture a little bit. The container is absolutely positioned within my absolutely-positioned, centered body. When I change the slideshow div to relative, the fancybox script still loads crooked. D'oh!

[SuzyUK]

Oh and my bad.. trying to contain the lightbox I forgot to mention that the code you use to center your body element is too much and even corrected doesn't have full backwards support for IE don't know if that's a problem or not..

You don't need absolute positioning (AP) to center a page whether it's the body element or a containing wrapper or whatever..

try this as example:

html {background: lime;}

body {
font: normal 12px/normal Arial, sans-serif;
color: #eaeaea;
background-color: #3D3A32;
width: 800px;
height: 768px;
/*
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
*/
margin: auto;
padding: 0px;
border: none;
}

try that CSS on a blank HTML page, you'll see I've commented out the Absolute positioning from your CSS, and added an HTML background (don't know if you have one of them but this is just for demo) - now that the page is properly centered even in IE7, but if you then also remove the background color on the HTML element it won't look centered because without a background on the HTML element it takes the body background,

margin: auto;

works to center without the need for AP, which might help other containing problems within the page.. use AP sparingly! ;)

secondly the IE support for actually working with the body element only appeared in IE7 and that's why you more often see people use a wrapper div (fake body element) around their entire content, just for this purpose.. and it also means you can use multiple background effects which is an aside.. but there you go

so if you can and it works for you I would remove the AP off the body element as the <body> shouldn't really be taken out of the flow (which AP does) seeing as it's a main structural element

[SuzyUK]

LOL now we're cross-posting.. but I think the root of the problem is found?

try centering the site first without using AP (reverse of what you just posted) use margin: auto, and not AP.

Then either add position:relative to the body OR I think more containable and preferable, as explained in my post above, would be to add a relatively positioned wrapper div instead.. the AP fancybox should work fine after that without you having to change any of your internal Fancybox code.. she hopes anyway ;)

[edited by: SuzyUK at 9:07 pm (utc) on Jul 1, 2010]

[noiseordinance]

Eggcelent, I will give this a try! Thanks a ton. :)

[noiseordinance]

Hey there, I tried the code above as mentioned, and I get the 800x768 grey box on a green background, but it's not centered vertically, only horizontally...

[SuzyUK]

yep, it was, I had a feeling there was going to be more to this, so here goes .. ignore the lightbox for now.. I've discovered the Fancybox code does takes it's position from the body element so it, the FB code, needs to be outside any of your site's normal positioning AND the BODY element needs to be free and clear of any restrictions

so to center your site both ways is a subjective thing, horizontal is easy as shown above and vertical is hard because we, well I don't know how tall your site content is or how tall the viewers browser is..

most vertical centering methods will work best if your content is a fixed height and you have allowed a wrapper between the content and the body element to be tall enough take care of what happens if the browsers window is too small. If you don't do that when a browser is minimised the content will disappear off the top and bottom of the window without a scrollbar to reach it:

Note: I'm now moving to use "wrapper" divs to demonstrate this because you will ultimately need this for your fancybox to work with whatever you decide to go with.. keep that body element clean ;)

example 2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; border: 0;}

body {
font: normal 12px/normal Arial, sans-serif;
background: lime;
}

/*
#sitewrap {
color: #eaeaea;
background-color: #3D3A32;
width: 1000px;
height: 768px;
margin: auto;
position: relative;
}
*/


#deadcenter {
position: absolute;
top: 50%;
left: 50%;

height: 500px;
width: 800px;

margin-top: -250px; /* negative half of required height */
margin-left: -400px; /* negative half of required width */

background: #fff;
color: #000;
}

</style>
</head>
<body>
<div id="sitewrap">
<div id="deadcenter">horizontal and vertical centered div</div>
</div>
</body>
</html>

first use that with the "sitewrap" CSS commented out, "sitewrap" is the fake body div I have introduced. With the CSS code commented out the white div is vertically and horizontally centered, it is taking its position from the default canvas, which is fine if no other positioning is required.. however if you minimise the browser you will see that the top text disappears with no way to reach it.

so uncomment the sitewrap CSS and check again, the content does not disappear because the sitewrap div is the one doing the containing.. you can check this by commenting the margin:auto rule out of the sitewrap CSS.. the grey box will no longer center because we just removed that margin but the white div is still horizontally and vertically centered within it, i.e it's being contained by the sitewrap div and not the viewport.

This is as far as I can go as I do not know your content, scrollbar requirements, dynamic content fixed height/widths etc. but the main problem people have with vertical centering is not realising that as soon as you use fixed heights you are usually restricting your content in some way what works for one page may not work for another even on the same site!

You will however see I have now added two wrapper divs just to achieve this and it's still not perfect. You can achieve this without positioning, and allowing for variable content heights using CSS table display properties, and Bruno Fassino amongst others have example code showing how, the downside to that is IE support, it usually needs workarounds, conditional CSS (even extra HTML divs in some cases) to allow it to use display inline-block.. so if you're beginning to go down that route, why not think about using a single cell table (radical thought ;))

It involves much less HTML code and actually in some cases less wrappers, and no backward compliant CSS.. although you would still need to use a relatively positioned div, inside the cell, if you want to use positioning inside your centered block as you cannot position to a table cell <td> itself.

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Page Title </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; border: 0; height: 100%;}

body {
font: normal 12px/normal Arial, sans-serif;
background: lime;
text-align: center;
}

#sitewrap {
color: #eaeaea;
background-color: #3D3A32;
width: 1000px;
height: 100%;
margin: auto;
}

#sitewrap td {
vertical-align: middle;
padding: 50px;
text-align: left;
}

#sitewrap td #pr {
position: relative;
background: #fff;
color: #000;
height: 200px; /* this is not required and is for demo only adjust to see affect of long/short content */
}

.test {
position: absolute;
margin: 0;
top: 0;
right: 0;
width: 150px;
height: 150px;
background: #dad;
}

</style>
</head>
<body>
<table id="sitewrap">
<tr><td><div id="pr">
<p>horizontal and vertical centered content inside the sitewrap</p>
<p class="test">test this for positioning in table cell</p>
</div></td><tr>
</div>
</body>
</html>

now all the ingredients are there for both positioning inside and outside your content area and you table will grow if required (by default) to keep all content accessible try adjusting the height of the div#pr in the CSS to test this

I have horizontally centered the table itself and vertically aligned the content in the table cell as well as add a bit of padding to the table cell to stop content from touching the absolute top of the page should it get too long, maintaining a nice vertical centered effect even if scrolling comes into play

I have also popped in a positioned paragraph to prove that it will not position properly without the nested #pr div.. comment out

position: relative

on the #pr div to check this

the div#pr is the div that should be relatively:positioned if you intend to use positioning inside your content section, while you can also use it as your master font/color/background setter (like the body element)

no matter which way you do it, even if you decide to investigate the Pure CSS equivalent of vertical centering, in both cases leave the body alone (what brought us here ;)) - do not margin or position it - and put your fancybox HTML placeholder after/outside the wrapper div/table but before the closing </body> tag, this means it will take its position from the viewport which is what it's meant to do to enable the "greyed out" bit to cover the whole screen and adjust its images to suit the size of the viewers browser no matter where they are scrolled to in your page

IF you are using fixed heights for your content and have got a scrollbar on it, (content would be #deadcenter in my example 2) to keep all content accessible and wrapper to provide extra space around it if required - it should be easy enough to use the first absolute positioning method, though the advantage of using a single table cell is the x-browser support even for IE 5/6/7 ;)

either way you need to make your sites positioning bulletproof from anything that you may want to add in the future, mainly this means leave the main structural elements, HTML and BODY, alone if you're not sure what you'll need to be adding yet ;)

Have Fun!