hello everybody.i'm kinda new here but i really hope i'll get some answers, as my problem is getting more and more annoying.

so i've installed Lightbox a few days ago and everything seems to work perfectly, EXCEPT the bad positioning. when i click the image for a preview, the lightbox appears but on the left of the page, not in the center as it would normally do.

i checked both my page's and lightbox's css styles but i just can't seem to find anything. i think something is wrong with my page. do you have any idea what should i change? i really really hope you can help me, i'm desperate to finish my project and i've been stucked with this problems for 2 days now:rolleyes: thanx everybody !

Welcome to WDF!

 

The first thing I'd check is to see if you have any clashing CSS classes or ID's. You may have one that's taking precedence over the Lightbox CSS.

Welcome to WDF!

 

The first thing I'd check is to see if you have any clashing CSS classes or ID's. You may have one that's taking precedence over the Lightbox CSS.

 

 

hey bluedreamer and thanks for your answer! you mean 2 classes with the same name, right ? i checked and everything seems just fine. i actually downloaded the lightbox files from a web site and all i had to do was change the links, nothing else, that's why i think it's my page that's not working well.there must be a coding problem at my body{ class.i just can't figure out what. i really don't have any idea, i keep staring at my css and don't know what to change anymore.

Hi there,

Have you got a link to a live site/page?

Hi there,

Have you got a link to a live site/page?

 

well my site isn't online yet that's why i can't wait to solve this problem once and for all so i can upload it. but i can give you the lightbox css style:

 

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}

#lightbox img{ width: auto; height: auto;}

#lightbox a img{ border: none; }

 

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer{ padding: 10px; }

 

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

 

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

 

#imageData{ padding:0 10px; color: #666; }

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }

#imageData #caption{ font-weight: bold; }

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }

#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

 

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

 

 

 

and this is my page's body{ css:

 

body {

background-image:url(background.jpg);

background-attachment:scroll;

background-repeat:repeat;

position:absolute;

z-index:1;

margin:0;

padding:0;

}

 

i think there is something missing. there must be, otherwise i can't explain it. i hope it's useful, i can't wait to hear your opinion.thanx

What happens if you remove the position:absolute; from your body css?

What happens if you remove the position:absolute; from your body css?

 

whoa . now that worked fast ! jesus, i'm so lame, i know

ElanMan you are the best, and thanks to you now i'm all up and running again THANK YOU

whoa . now that worked fast ! jesus, i'm so lame, i know

ElanMan you are the best, and thanks to you now i'm all up and running again THANK YOU

Ha ha! Good stuff!

Glad to know you got it sorted!

Hey all,

I am a newbie to this site. Nice! Great forums.

I have been searching for a solution to my problem with regards to lightbox position and I hope it's OK that I have used this old thread that I have found.

 

Basically when the images open in IE they open in the absolute top position, but in Firefox they open in the middle. As the pictures are a little large I would prefer them to open at the absolute top.

Here is the standard lightbox css file and a link to the site itself. web link

 

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

 

Please let me know if I have forgottem to place any information on here.

 

Thanks

Con

 

btw I tried this and it didn't work. suggested fix