{"id":334,"date":"2006-08-19T18:48:46","date_gmt":"2006-08-19T10:48:46","guid":{"rendered":"http:\/\/www.darkmirage.com\/2006\/08\/19\/lightbox-js-and-firefox\/"},"modified":"2006-08-19T18:54:42","modified_gmt":"2006-08-19T10:54:42","slug":"lightbox-js-and-firefox","status":"publish","type":"post","link":"http:\/\/www.darkmirage.com\/2006\/08\/19\/lightbox-js-and-firefox\/","title":{"rendered":"Lightbox JS and Firefox"},"content":{"rendered":"

\"Balancing\"
\nThe new loading image<\/p>\n

I changed the default loading.gif of Lightbox<\/a> (as you may have noticed in the post below) and modified the CSS file as best as I could to fit the new dimensions and it seems to work fine in Firefox. Click here<\/a> for a demo.<\/p>\n

<\/p>\n

However, on IE everything falls apart…<\/p>\n

\"Lightbox<\/p>\n

For some reason, the image sticks out of the box on IE even though the same box size has no problems on Firefox. Gah. I tried everything I could think of with the margins and positioning but it’s still no good. So I gave up.<\/p>\n

Here are the parts I modified from lightbox.css, commented lines are the original values:<\/p>\n

#outerImageContainer{
\n\tposition: relative;
\n\tbackground-color: #fff;
\n\twidth: 300px;
\n\theight: 375px;
\n\t\/\/height: 250px;
\n\t\/\/width: 250px;
\n\tmargin: 0 auto;
\n\t}<\/code><\/p>\n

#loading{
\n\tposition: absolute;
\n\ttop: 10%;
\n\t\/\/top: 40%;
\n\tleft: 0%;
\n\theight: 25%;
\n\twidth: 100%;
\n\ttext-align: center;
\n\tline-height: 0;
\n\t}<\/code><\/p><\/blockquote>\n

I really have no idea what is wrong with Internet Explorer. Hopefully someone out there does… In the meantime, please get Firefox if you want to see an animated gif of a maid balancing a plate the way it was meant to be seen!<\/p>\n