I was trying to switch my blog from using greybox to using lightbox2 because I wanted keyboard navigation in gallery mode. However, I found that the section below the image for the caption and "image 1 of 27" text were black text on a very dark gray background, so they were almost unreadable. On the official lightbox2 website, in it's demo, this text is on a white background so that it is easily readable. After playing with various things, I found that if I used the css from the "official" distribution of lightbox 2 at http://www.huddletogether.com/projects/ ... ox2.04.zip it all started to work. Looking back at the CVS history on sourceforge, it looks like lightbox2.js was updated 11 months ago, but lightbox2.css hasn't been updated for 2 years, so I wonder if the two got out of date. Or possibly it is just an interaction with some other plugin on my blog.
Here are the diffs of the "stock" css and the s9y version (minus whitespace changes). I don't know much about css so I can't say which one is "correct". But in case the stock one is correct and the s9y one is just out of date, I thought I would point it out here in case someone else could benefit from my investigation.
Code: Select all
--- stock-lightbox.css 6/8/2009 7:32:31 PM
+++ s9y-lightbox2.css 6/5/2009 9:10:11 PM
@@ -1,12 +1,13 @@
#lightbox{
position: absolute;
+ top: 40px;
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{
@@ -16,21 +17,23 @@
height: 250px;
margin: 0 auto;
}
+
#imageContainer{
padding: 10px;
}
@@ -43,72 +45,73 @@
#prevLink, #nextLink{
width: 49%;
height: 100%;
- background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
+ background: transparent url(blank.gif) no-repeat; /* 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; }
+#prevLink:hover, #prevLink:visited:hover { background: url(prevlabel.gif) left 15% no-repeat; }
-#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
+#nextLink:hover, #nextLink:visited:hover { background: url(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;
+ padding:0 10px;
}
#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;}
+#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }
#overlay{
position: absolute;
@@ -76,80 +77,104 @@
width: 100%;
height: 500px;
background-color: #000;
+ filter:alpha(opacity=60);
+ -moz-opacity: 0.6;
+ opacity: 0.6;
+ }
+
+
+.clearfix:after {
+ content: ".";
+ display: block;
+ height: 0;
+ clear: both;
+ visibility: hidden;
+ }
+
+* html>body .clearfix {
+ display: inline-block;
+ width: 100%;
+ }
+
+* html .clearfix {
+ /* Hides from IE-mac \*/
+ height: 1%;
+ /* End hide from IE-mac */
}