Lightbox overlay problem - IE, Opera

**Schmoopy** · 11-21-2008, 01:12 PM

1) Script Title: Lightbox

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:

Note: I downloaded the script from Lokesh's website, but thought I'd just link it here because it would be easier.

Basically, in IE and Opera, the overlay isn't covering the whole page, it's ok height wise, just not width. In firefox it does cover the whole page. I did look it up and it seems someone else had this problem before, but I tried the code in that post and it didn't seem to work =/.
The one I'm looking at is the Ivyleaf Mountainboarding Centre, it's in the southwest, 2nd from the left (I'm aware the rest of the spots look weird, but I haven't finished yet obviously :P)

In Ivyleaf, click on gallery, and then image1, 2 or 3, and you should see what I mean.

Since there's too much code to put in here, I will provide a link:

http://www.bombthehills.com/test/ridingspots-uk.html

Hope you can help

Jack

**jscheuer1** · 11-21-2008, 01:16 PM

Generally that can be fixed by this style:

Code:

html, body {
margin:0;
padding:0;
}

Then if you want a margin or padding around your page, use a container division around all of your content and give the margin/padding to it.

**Schmoopy** · 11-21-2008, 01:23 PM

Hey, thanks for the reply, but atm I have:

Code:

#html, body {
width:989px;
padding: 0;
background:#000;
margin:0 auto;
}

And taking out the "auto" part in margin makes the page not centred =/

**jscheuer1** · 11-21-2008, 04:46 PM

Apply it to your container division.

As I said:

Then if you want a margin or padding around your page, use a container division around all of your content and give the margin/padding to it.

That's the proper way to center content anyway. You should never use margin:0 auto on the HTML or BODY tags.

**Schmoopy** · 11-23-2008, 02:28 AM

Ok, sorry for the late reply but I was a bit confused as to what to do. It is working now

, I did what you said and changed the <body> to have a margin of 0 and a padding of 0. At first this didn't work after I added the new "wrapper" div, I had it set out like this:

Code:

#html, body {
padding: 0;
background:#000;
margin:0;
width:989px;
}

#wrapper{
width:989px;
margin:auto;
padding:0;
}
}

Then, after I removed the width from the body it worked again

silly me... Just wanted to post this in case anyone else has this problem, thanks for the help.

**jscheuer1** · 11-24-2008, 05:42 AM

Sorry, I could have been clearer. Glad you figured it out. There are a very limited number of things that can safely be used as styles for the html and body elements. This is due to a lack of standardization across browsers and DOCTYPEs as to what any styles applied to these elements might actually mean. The safest thing (in most cases) is to just zero out the margins and padding on them, use a container division for the page and apply any other styles that you might otherwise be tempted to use on the html or body elements to that container division.

Thread: Lightbox overlay problem - IE, Opera

Thread Tools

Search Thread

Lightbox overlay problem - IE, Opera

Bookmarks

Bookmarks

Posting Permissions