Lightbox 2 - Prev Next Buttons Only Visible in Dreamweaver

Get Started
1

Hey ya’ll,
I’ve been having an issue with getting the preview and next button to show in my Firefox, Chrome and IE browser.
Initially it wouldn’t show at all but I added a “/” to images/prev.png in the lightbox style sheet and now it shows in Dreamweaver.
Everything works correctly but those two buttons are invisible.

I opened the demo and everything works on that page also except the prev and next buttons.

Here is the html code for my site and the CSS below it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="en-us" http-equiv="Content-Language">
<meta content="," name="keywords">
<title> Graphic Design</title>
<link rel="stylesheet" type="text/css" href="r93styles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>



</head>

<body>
<div id="container">
<div class="wrapper"> <!--Start Wrapper!-->
</br>
<h1 id="logo"><a href="r93media.html" class="link"><img src="images/r93.gif" alt=""/></a></h1>
</br>
<div class="listmenu">
<ul>
    <li><a href="r93media.html" class="link">PORTFOLIO</a></li>
    <li><a href="about.html" class="link">ABOUT</a></li>
</ul>
</br>
	<div class="info">
</p>**</p>
</p>**</p>
</br>

<div class="copyright">
<p>**</p>
<p>**</p>
<p>Copyright ©  2012</p>
</div>
	</div>
</div>
</div><!--End Wrapper!-->

	<div id="artwork">
<h1><i><b>PORTFOLIO</b></i></h1>
                  	

<a href="images/PURPLEGOLD_11-2.jpg" class="imglink" title="Tigers Apparel  rel="lightbox[set1]"><img src="images/PURPLEGOLD_prev.jpg"/></a>
<a href="images/HVA.jpg" class="imglink" title="Volleyball Association Logo" rel="lightbox[set1]"><img src="images/HVA_prev.jpg"/></a>
<a href="images/lls.jpg" class="imglink" title="Living Life Logo" rel="lightbox[set1]"><img src="images/lls_prev.jpg"/></a>
<a href="images/RACEFORACURE.jpg" class="imglink" title="Race For A Cure T-Shirt Design"rel="lightbox[set1]"><img src="images/RACEFORACURE_prev.jpg"/></a>
<a href="images/jacks.jpg" class="imglink" title="Jacks - Girl Apparel" rel="lightbox[set1]"><img src="images/jacks_prev.jpg" alt=""/></a>
<a href="images/zapps2011.jpg" class="imglink" title="Zapps  Deisgn" rel="lightbox[set1]"><img src="images/zapps_prev.jpg"/></a>
<a href="images/whodat.jpg" class="imglink" title="Who Dat Nation Concept" rel="lightbox[set1]"><img src="images/whodat_prev.jpg"/></a>
<a href="images/OFMWDN.jpg" class="imglink" title="The Who Dat Nation Logo - Concept" rel="lightbox[set1]"><img src="images/WDN_prev.jpg"/></a>
<a href="images/WhoDatNation.jpg" class="imglink" title="Who Dat Nation Concept" rel="lightbox[set1]"><img src="images/WhoDatNation_prev.jpg"/></a>


		
	</div>
</div><!--Closed Container!-->
<div class="footerstyle"></div>
</body>
</html>




body, html{
    background-color: #2c2c2d;
    background-repeat: no-repeat;
font-family:Arial,Helvetica,sans-serif;
    font-size: 12px;
    height: 100%;
}

#container {
   height:100%;
   margin-bottom: -15px;

}
div.wrapper {

    height: 100%;
    background-color: #141415;
    width: 155px;
    text-align: left;
    margin-bottom: -15px;

   position: fixed;
}


.list menu li{
   text-decoration: none;
   margin-left: 25px;
   font-weight: normal;
   font-size: 12px;
   font-family:Arial,Helvetica,sans-serif;
   color: #b2b2b2;
   list-style: none;
}
#artwork {
    left: 155px;
    position: fixed;
    padding: 15px;
    text-align: left;
    right:0px;
    vertical-align: top;
    width: 1000px;}
.class{}

a.link:link {
   margin-left: 25px;
   text-decoration: none;
   font-weight: normal;
   font-size: 12px;
   color: #b2b2b2;
}

a.link:visited {
   margin-left: 25px;
   text-decoration: none;
   font-weight: normal;
   font-size: 12px;
   color: #b2b2b2;
}
a.link:hover {
   margin-left: 25px;
   text-decoration: none;
   font-weight: normal;
   font-size: 12px;
   color: #e81e75;
}
a.link:active {
    text-decoration: none;
   margin-left: 25px;
   font-weight: normal;
   font-size: 12px;
   font-family:Arial,Helvetica,sans-serif;
   color: #e81e75;
}
.footer {

color: #141415;
   font-size: 11px;
   text-align: center;
}
.footerstyle {
    background-color: #e81e75;
    width: 100%;
    height:15px;
position:fixed;
bottom; 0;
    margin-bottom: 15px;
    clear:both;
}
* { margin:0; padding:0;}
.info{
    font-size: 12px;
    color:#e81e75;
    text-align:left;
    margin-left: 25px;
}
.copyright{
    font-size: 10px;
    color: #b2b2b2;
    text-align:left;
}
g {border: none; }
h1{ font-size: 50px; text-align:left; color: #b2b2b2; }
a, img {
    border:none;
}

Thanks for your help in advance. Side-note, when lightbox wasn’t working at all I saved it as a UTF-8 in notepad. Don’t know if that info is relevant but anyway, what ya’ll think? :scratch:

2

Riley_93. Welcome to the forums. :slight_smile:

Remember that Dreamweaver isn’t a browser, so however something appears in there is pretty much irrelevant. The real test is what you see in the real browsers.

This is probably a CSS issues, but it’s much easier to see what’s going on with a live link. Are you able to post it here?

3

My site is just local for now. This is my first time designing a page but you are right. It was a css issue. I copied the original lightbox css and placed it in the css folder. It works properly now.

I really appreciate the fast response.

4

No probs. Glad you found a solution. Hope we see you around again. :slight_smile: