lightbox: half of the image is whited out |
lightbox: half of the image is whited out |
explorers5000 |
Aug 11 2011, 11:32 PM
Post
#1
|
Newbie Group: Members Posts: 16 Joined: 8-August 11 Member No.: 15,126 |
HI, i know exactly what the problem is.. i have already troubleshot it. now i would kindly ask for a solution if possible... this is my gallery page: http://tercume.pro/gallery.html this page already had the layout.css and then i decided to use lightbox2 for the gallery. lightbox has its own .css which is called lightbox.css. now once i integrate lightbox into the page this is what happens: Uploaded with ImageShack.us photographs popup, you can navigate next and previous but then half of the picture has this white block. other than that it works fine but that's something i guess i have to get rid of. if i don't include the layout.css then i works fine but then i lose the main style. they are conflicting. i had this problem before with a popup contact window which we solved thanks to the forum. now any ideas? lightbox.css: CODE #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; } layout.css: CODE /* Template Name: Academic Education File: Layout CSS */ @import url(navi.css); @import url(forms.css); @import url(tables.css); @import url(homepage.css); @import url(gallery.css); @import url(portfolio.css); @import url(featured_slide.css); @import url(popup-contact.css); body{ margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#979797; background-color:#06213F; } img{margin:0; padding:0; border:none;} .justify{text-align:justify;} .bold{font-weight:bold;} .center{text-align:center;} .right{text-align:right;} .nostart{list-style-type:none; margin:0; padding:0;} .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;} .clear{display:inline-block;} html[xmlns] .clear{display:block;} * html .clear{height:1%;} a{outline:none; text-decoration:none; color:#55ABDA; background-color:#F9F9F9;} .fl_left{float:left;} .fl_right{float:right;} .imgholder, .imgl, .imgr{padding:4px; border:1px solid #DEDACB; text-align:center;} .imgl{float:left; margin:0 15px 15px 0; clear:left;} .imgr{float:right; margin:0 0 15px 15px; clear:right;} /* ----------------------------------------------Wrapper-------------------------------------*/ div.wrapper{ position:relative; margin:0 auto 20px; width:960px; text-align:left; } div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{ margin:0 0 15px 0; padding:0; font-size:16px; font-weight:normal; font-style:normal; line-height:normal; } .row1{color:#999999; background-color:#06213F;} .row1 a{color:#FCFCFC; background-color:#06213F;} .row2, .row3, .row4{color:#979797; background-color:#F9F9F9;} /* ----------------------------------------------Generalise-------------------------------------*/ #header, #container, #footer{ display:block; width:960px; } .rnd{ display:block; width:960px; padding:12px 0 0 0; background:url("../images/round_top.gif") top left no-repeat; } /* ----------------------------------------------Header-------------------------------------*/ #header{padding:25px 0 0 0;} #header h1, #header p, #header ul{ margin:0; padding:0; list-style:none; line-height:normal; } #header h1{font-size:36px; font-variant:small-caps; font-style:normal;} #header .fl_right{ display:block; width:360px; } #header .fl_right ul{ margin-bottom:10px; font-size:11px; } #header .fl_right li{ display:inline; margin:0 4px 0 0; padding:0 6px 0 0; border-right:1px solid #FCFCFC; } #header .fl_right li.last{ margin:0; padding:0; border:none; } /* ----------------------------------------------Content-------------------------------------*/ #container{ width:920px; padding:20px; line-height:1.6em; background:url("../images/round_bot.gif") bottom left no-repeat; } #container a{ color:#55ABDA; background-color:#F9F9F9; } #container h1, #container h2, #container h3, #container h4, #container h5, #container h6{ padding-bottom:8px; border-bottom:1px solid #DEDACB; } #container .readmore{ display:block; width:100%; text-align:right; line-height:normal; } #content{ display:block; float:left; width:600px; } /* ------Comments-----*/ #comments{margin-bottom:40px;} #comments .commentlist{margin:0; padding:0;} #comments .commentlist ul{margin:0; padding:0; list-style:none;} #comments .commentlist li.comment_odd, #comments .commentlist li.comment_even{margin:0 0 10px 0; padding:15px; list-style:none;} #comments .commentlist li.comment_odd{color:#666666; background-color:#F7F7F7;} #comments .commentlist li.comment_odd a{color:#55ABDA; background-color:#F7F7F7;} #comments .commentlist li.comment_even{color:#666666; background-color:#E8E8E8;} #comments .commentlist li.comment_even a{color:#55ABDA; background-color:#E8E8E8;} #comments .commentlist .author .name{font-weight:bold;} #comments .commentlist .submitdate{font-size:smaller;} #comments .commentlist p{margin:10px 5px 10px 0; padding:0; font-weight:normal; text-transform:none;} #comments .commentlist li .avatar{float:right; border:1px solid #EEEEEE; margin:0 0 0 10px;} /* ----------------------------------------------Column-------------------------------------*/ #column{ display:block; float:right; width:300px; } #column .holder, #column #featured{ display:block; width:300px; margin-bottom:30px; } #column .holder h2.title{ display:block; width:100%; height:65px; margin:0; padding:15px 0 0 0; font-size:20px; text-transform:none; line-height:normal; border-bottom:1px dotted #999999; } #column .holder h2.title img{ float:left; margin:-15px 8px 0 0; padding:5px; border:1px solid #999999; } #column div.imgholder{ display:block; width:290px; margin:0 0 10px 0; } #column .holder p.readmore{ display:block; width:100%; font-weight:bold; text-align:right; line-height:normal; } /* Featured Block */ #column #featured ul, #column #featured h2, #column #featured p{ margin:0; padding:0; list-style:none; color:#666666; background-color:#F7F7F7; } #column #featured a{ color:#55ABDA; background-color:#F7F7F7; } #column #featured li{ display:block; width:250px; margin:0; padding:20px 25px; color:#666666; background-color:#F7F7F7; } #column #featured li p.imgholder{ display:block; width:240px; height:90px; margin:20px 0 15px 0; } #column #featured li h2{ margin:0; padding:0 0 8px 0; font-weight:normal; font-family:Georgia, "Times New Roman", Times, serif; line-height:normal; border-bottom:1px dotted #999999; } #container #column .readmore a{ display:block; width:100%; margin-top:15px; height:auto; padding-left:0; font-weight:bold; text-align:right; line-height:normal; background:none; } #column .latestnews{ display:block; width:100%; margin:0; padding:0; list-style:none; } #column .latestnews li{ display:block; width:100%; height:99px; margin:0 0 11px 0; padding:0 0 21px 0; border-bottom:1px dotted #C7C5C8; overflow:hidden; } #column .latestnews li.last, #column .last{ margin-bottom:0; } #column .latestnews p{ display:inline; } #column .latestnews img{ float:left; margin:0 10px 0 0; padding:4px; border:1px solid #C7C5C8; clear:left; } /* ----------------------------------------------Footer-------------------------------------*/ #footer{ width:920px; padding:5px 20px 15px 20px; background:url("../images/round_bot.gif") bottom left no-repeat; } #footer .fl_left img{margin-bottom:30px;} #footer address{ display:inline; float:left; margin-left:40px; text-transform:none; font-style:normal; line-height:1.8em; } #footer .fl_right{ display:block; width:400px; } #footer .fl_right p{margin:0 0 15px 0; padding:0; line-height:normal;} #footer .fl_right #social{display:block; width:100%; margin:0 0 15px 0; padding:0; line-height:normal;} #footer .fl_right #social ul{margin:0; padding:0; list-style:none;} #footer .fl_right #social li{float:left; /* Only For IE */} #footer .fl_right #social a{display:block; float:left; width:49px; height:49px; margin-right:20px; overflow:hidden; text-indent:-4000em; background:url("../images/social-sprite.gif") no-repeat;} #footer .fl_right #social li.last a{margin-right:0;} #footer .last{margin:0;} /* ----------------------------------------------Copyright-------------------------------------*/ #copyright{ padding:0 12px; } #copyright p{ margin:0; padding:0; } #copyright, #copyright a{ color:#55ABDA; background-color:#06213F; } |
Frederiek |
Aug 12 2011, 02:21 AM
Post
#2
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
You have specified a background-color for ALL links, by using the element selector A in layout.css:
CODE a { background-color: #F9F9F9; } And that causes the #nextLink of the Lightbox to turn "white". |
Darin McGrew |
Aug 12 2011, 03:10 AM
Post
#3
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Oops, I posted this in the wrong thread. Here it is:
The a#prevLink and a#nextLink elements match the rule: CODE a{outline:none; text-decoration:none; color:#55ABDA; background-color:#F9F9F9;} in layout.cssCombine that with the "width" 49%" and "height: 600px" that you've specified for them, and you cover about half the image with the color #F9F9F9. |
Lo-Fi Version | Time is now: 27th April 2024 - 02:03 PM |