Lightbox 2 - Prev Next Buttons Only Visible in Dreamweaver

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:

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?

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.

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