[Solved] Lightbox overlay conflict with body margin

[emma]

Hello

I am centering my website using margin: 0 auto; on the body. When I decided to use a lightbox on my site the neat dark overlay effect didn’t cover my entire screen. I read somewhere that this is because of the margin set on my body tag and as expected the problem was solved when I got rid of my side margins.

Is there another way of centering my site without affecting the lightbox overlay?

Many thanks
emma

[noahgelman]

Try:

Code:

html { text-align: center;}

body { text-align: left;}

That will line everything up just like margin:0 auto and shouldn’t affect the lightbox overlay

[tafkanator]

older ie browsers dont center the page using margin:0 auto but instead using text-align center. so using both rules will be the best solution. That way page is centered in every browser. But use margin 0:auto for your wrapper div.
It should look something like this:

Code:

body{
text-align:center
}
#wrapper{
margin:0 auto;
text-align:left
}

Code:

all content here

this wont affect your lihtbox overlay

[Author]

Posts