Hello, I am having some sort of container issue with my lightbox js and page.css file working. When you click the link at the bottom of the left hand side of the page, "HERE" a nice, beautiful image should popup via lightbox2. It's almost working, but a scroll bar appears and the image appears to be shifted to the right, although I have successfully used this on another site w/o the scroll bar or shift occurring. I am at a loss as to what to modify. here's the page i'm working on: Here is the page.css file: html, body { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background: #000 url(images/background.png); margin-top:30px; padding-top: 30px; } body a:link, body a:visited, body a:active { color: #808084; text-decoration: none; } body a:hover { text-decoration: none; color: #000000; } h1, h2, h3, h4, h5, h6 { font-family:Verdana, Arial, Helvetica, sans-serif; color:#f1f1f2; margin:1em 0; } ul, li { margin:0; padding:0; list-style:none; } /* overrides ***********************************************/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* misc ********************************************/ h1#logo, h1#logo a { float: left; margin:0; padding:0; display:block; text-indent: -9999px; background: url(images/amanda-bruce-logo.png) no-repeat left top; width: 260px; height: 40px; } /* main divs *****************************************/ #wrap { width:700px; margin:0 auto; padding:0; } #content { width:698px; } #contentHome { width:666px; height:476px; background-color:#fff; clear:left; padding:16px; } #photo { width: 432px; height: 309px; background: #fff url(images/bg_photos.gif) no-repeat 16px 16px; float:left; } img { margin: 16px 0 16px 16px; display: inline; } #photoTall { width: 432px; height: 667px; background: #fff url(../_src/bg_photos.gif) no-repeat 16px 16px; float:left; } #projectList { width:266px; /* padding:14px 14px 20px 14px; */ background-color:#fff; float:right; } #projectList h2 { font-size: 12px; margin-left:20px; } #projectList ul { margin-left:16px; /* padding-bottom: 10px; */ } #projectList li a { line-height:16px; padding-left:10px; } #projectList li p { line-height:16px; padding-left:10px; padding-right:16px; } #projectList a:hover { background: url(../_src/bullet.gif) no-repeat 0px 5px; } #projectList a.active { background: url(../_src/bullet-active.gif) no-repeat 0px 5px; } #slides, #slidesWide { width:432px; height:38px; background-color:#736F67; font-size:1px; float:left; clear:left; } #slidesWide { width:698px; } #slides ol, #slidesWide ol { width:280px; margin:0; padding: 12px 0px 0px 12px; } #slides li, #slidesWide li { display:inline; float:left; height:12px; } #slidesText a { text-indent: -9999px; text-decoration: none; display:block; background: url(../_src/slides.gif) no-repeat left top; width: 54px; height: 12px; } #one a { text-indent: -9999px; text-decoration: none; display:block; background: url(../_src/01.gif) no-repeat left top; width: 30px; height: 12px; } #one a:hover { background-position: 0px -12px; } #oneActive { text-indent: -9999px; text-decoration: none; display:block; background: url(../_src/01.gif) no-repeat 0 -12px !important; width: 30px; height: 12px; } #two a { text-indent: -9999px; text-decoration: none; display:block; background: url(../_src/02.gif) no-repeat left top; width: 31px; height: 12px; } #two a:hover { background-position: 0px -12px; } #twoActive { text-indent: -9999px; text-decoration: none; display:block; background: url(../_src/02.gif) no-repeat 0 -12px !important; width: 31px; height: 12px; } #three a { text-indent: -9999px; text-decoration: none; display:block; background: url(../_src/03.gif) no-repeat left top; width: 29px; height: 12px; } #three a:hover { background-position: 0px -12px; } #threeActive { text-indent: -9999px; text-decoration: none; display:block; background: url(../_src/03.gif) no-repeat 0 -12px !important; width: 29px; height: 12px; } #four a { text-indent: -9999px; text-decoration: none; display:block; background: url(../_src/04.gif) no-repeat left top; width: 29px; height: 12px; } #four a:hover { background-position: 0px -12px; } #fourActive { text-indent: -9999px; text-decoration: none; display:block; background: url(../_src/04.gif) no-repeat 0 -12px !important; width: 29px; height: 12px; } #projectDetails { width:432px; background-color:#808084; color: #f1f1f2; float: left; clear:left; } #projectDetails a:link, body a:visited, body a:active { color: #f1f1f2; text-decoration: underline; } #projectDetails h2 { padding:0; font-size:12px; color: #BFBDB9; } #projectDetails h2, #projectDetails p, #projectDetailsWide h2, #projectDetailsWide p { margin: 0 20px; } #projectDetailsWide h2, #projectDetails h2 { margin-top: 20px; margin-bottom: 8px;} #projectDetailsWide p, #projectDetails p { margin-bottom: 30px; margin-right: 40px;} #projectDetailsWide p { margin-right: 250px;} /* main menu **************************************/ #nav { width: 380px; float: right; height: 40px; padding:0; margin-right: -11px; } #nav li { display: inline; float:left; } #print a, #printActive a { text-indent: -9999px; text-decoration: none; display:block; background: url(images/nav_print.png) no-repeat left top; width: 48px; height: 40px; } #print a:hover { background-position: 0px -49px; } #printActive a { background-position: 0px -100px; } #advertising a, #advertisingActive a { text-indent: -9999px; text-decoration: none; display:block; background: url(images/nav_advertising.png) no-repeat left top; width: 96px; height: 40px; } #advertising a:hover { background-position: 0px -49px; } #advertisingActive a { background-position: 0px -100px; } #illustration a, #illustrationActive a { text-indent: -9999px; text-decoration: none; display:block; background: url(images/nav_illustration.png) no-repeat left top; width: 88px; height: 40px; } #illustration a:hover { background-position: 0px -49px; } #illustrationActive a { background-position: 0px -100px; } #web a, #webActive a { text-indent: -9999px; text-decoration: none; display:block; background: url(images/nav_web.png) no-repeat left top; width: 48px; height: 40px; } #web a:hover { background-position: 0px -49px; } #webActive a { background-position: 0px -100px; } #infographics a, #infographicsActive a { text-indent: -9999px; text-decoration: none; display:block; background: url(images/nav_infographics.png) no-repeat left top; width: 100px; height: 40px; } #infographics a:hover { background-position: 0px -49px; } #infographicsActive a { background-position: 0px -100px; } /* sub menu **************************************/ #subNav, #subNavWide { height:30px; width:420px; font-size:1px; float:left; clear:left; } #subNavWide { width:698px; } #subNav li a, #subNavWide li a { text-indent: -9999px; text-decoration: none; display:block; height: 10px; } #subNav li, #subNavWide li { display:inline; float:left; height: 10px; margin: 10px 0px 0px 0px; } #philosophy a { width: 62px; background: url(../_src/philosophy.gif) no-repeat left top; } #friends a { background: url(../_src/friends.gif) no-repeat left top; width: 43px; } #about a { background: url(../_src/about.gif) no-repeat left top; width: 38px; } #contact a { background: url(../_src/contact.gif) no-repeat left top; width: 45px; } #philosophy a:hover, #friends a:hover, #about a:hover, #contact a:hover { background-position: 0px -10px; } #copyright a, #copyrightWide a { background: url(../_src/copyright.gif) no-repeat 0 0; width: 61px; } #copyright a { margin: 0px 0px 2px 160px; } #copyrightWide a { margin: -20px 0px 2px 620px; /* headings *********************************************************************/ #projectList h2, projectDetails h2 { font-size:1px; /* ie cancel height */ padding:0; } h2#h_print { text-indent:-9999px; width:87px; height:16px; margin:26px 0 10px 26px; background: url(images/h_print.png) no-repeat 0px 0px; } h2#h_about { text-indent:-9999px; width:87px; height:16px; margin:20px 0 10px 0; background: url(../_src/h_about.gif) no-repeat 0px 0px; } h2#h_contact { text-indent:-9999px; width:87px; height:16px; margin:20px 0 10px 0; background: url(../_src/h_contact.gif) no-repeat 0px 0px; } /* proj headings *********************************************************************/ h2#p_archive { text-indent:-9999px; width:230px; height:16px; margin:0 0 10px 0; padding:0; background: url(images/h_archive.png) no-repeat 0px 0px; } /* extras *********************************************************************/ #photo img, #photoSquare img { margin: 16px 0 16px 16px; display: inline; } HTML: here is the lightbox.css file: #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; } HTML: any help would be GREATLY appreciated... I really need another set of eyes.. thanks in advance! amanda
Can I see the HTML, too? Thanks. ^^^^^^^ Oh forget that... I'll take a look at it when in I'm the office
The problem is in your page.css file: img { display: inline; margin: 16px 0 16px 16px; } Code (markup): The margin is pushing the picture out of the lightbox. Instead of img you could use a class and add the class to all other picture where you need the margin. E.g. img { margin:0; } img.other { display: inline; margin: 16px 0 16px 16px; } Code (markup):
Ok - that did not work.... BUT you got me to thinking about the margins. The problem was in the lightbox.css file. (I used to have this all as one CSS file but had some problems that only resolved once I separated the files). I used Firefox's Web Developer tools to "Display Element Information" and adjusted the id #lightbox img and hoped for the best: Now it displays perfectly! Thanks again!