Log in

View Full Version : 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/dynamicindex4/lightbox2/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:


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:



#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:



#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.