/    Sign up×
Community /Pin to ProfileBookmark

lightbox troubles…

I have several galleries on my site that use lightbox. They look exactly how i want them to in firefox and safari, but IE and Opera are different. Instead of having an outline around the thumbnails, there is an underscore separating each one. Is there any way to fix this?
[url]www.amberbonogofsky.com[/url] is the site

HTML:

<!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 http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
<title>Amber Bonogofsky</title>
<link href=”CSS/portfolio.css” rel=”stylesheet” type=”text/css” />
<style type=”text/css”>
<!–
.style1 {font-family: “Century Gothic”}
–>
</style>
<link href=”CSS/portfolio.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div id=”container”>
<div id=”header”><img src=”Header1.jpg” alt=”header” />

</div>
<div id=”subheading”>
<div id=”logo”>
<div align=”left”><img src=”weblogo_trans.png” alt=”amber bonogofsky” width=”300″ height=”100″ /></div>
</div>
<ul id=”nav”>
<li> <a href=”contact.html”>Contact</a></li>
<li><a href=”print.html”>Print</a></li>
<li><a href=”web.html”>Web</a></li>
<li><a href=”photo.html”>Photo</a></li>
<li><a href=”index.html”>Home</a></li>
</ul>
</div>
<div id=”sidebar”><p align=”left”><img src=”photo_sidebar.png” alt=”photo” width=”75″ height=”425″ /></p>
</div>
<div id=”mainContent”>
<div align=”left”>
<div id=”pgallery”>
<a href=”photo/davecell.jpg” rel=”lightbox[photo]” title=”Mouse over the left or right edges to flip through images, or use arrow keys. “><img src=”thumbnails/davecell_t.jpg” /> </a>
<a href=”photo/deanna.jpg” rel=”lightbox[photo]”><img src=”thumbnails/deanna_t.jpg” /> </a>
<a href=”photo/dwindow.jpg” rel=”lightbox[photo]”><img src=”thumbnails/dwindow_t.jpg” /> </a>
<a href=”photo/kyletunnel.jpg” rel=”lightbox[photo]”><img src=”thumbnails/kyletunnel_t.jpg” /> </a>
<a href=”photo/lexlaughing.jpg” rel=”lightbox[photo]”><img src=”thumbnails/lexlaughing_t.jpg” /> </a>
<a href=”photo/davephone.jpg” rel=”lightbox[photo]”><img src=”thumbnails/davephone_t.jpg” /> </a>
<a href=”photo/nicky_ledge.jpg” rel=”lightbox[photo]”><img src=”thumbnails/nicky_t.jpg” /> </a>
<a href=”photo/pat_effect.jpg” rel=”lightbox[photo]”><img src=”thumbnails/pat_effect_t.jpg” /> </a>
<a href=”photo/daveface.jpg” rel=”lightbox[photo]”><img src=”thumbnails/daveface_thumb.jpg” /> </a>
<a href=”photo/patgum.jpg” rel=”lightbox[photo]”><img src=”thumbnails/patgum_t.jpg” /> </a>
<a href=”photo/pumpkins.jpg” rel=”lightbox[photo]”><img src=”thumbnails/pumpkins_t.jpg” /> </a>
<a href=”photo/face.jpg” rel=”lightbox[photo]”><img src=”thumbnails/face_t.jpg” /> </a>
<a href=”photo/citybus.jpg” rel=”lightbox[photo]”><img src=”thumbnails/citybus_t.jpg” /> </a>
<a href=”photo/bad.jpg” rel=”lightbox[photo]”><img src=”thumbnails/bad_t.jpg” /> </a>
<a href=”photo/skiba.jpg” rel=”lightbox[photo]”><img src=”thumbnails/skiba_t.jpg” /> </a>

<a href=”photo/poltergeist.jpg” rel=”lightbox[photo]”><img src=”thumbnails/poltergeist_t.jpg” /> </a>
<a href=”photo/twins.jpg” rel=”lightbox[photo]”><img src=”thumbnails/twins_t.jpg” /> </a>
<a href=”photo/littleboy.jpg” rel=”lightbox[photo]”><img src=”thumbnails/littleboy_t.jpg” /> </a>
<a href=”photo/prestley.jpg” rel=”lightbox[photo]”><img src=”thumbnails/prestley_t.jpg” /> </a>
<a href=”photo/meg.jpg” rel=”lightbox[photo]”><img src=”thumbnails/meg_t.jpg” /> </a>
<a href=”photo/leximirror.jpg” rel=”lightbox[photo]”><img src=”thumbnails/leximirror_t.jpg” /> </a>
<a href=”photo/bros.jpg” rel=”lightbox[photo]”><img src=”thumbnails/bros_t.jpg” /> </a>
<a href=”photo/angel.jpg” rel=”lightbox[photo]”><img src=”thumbnails/angel_t.jpg” /> </a>
<a href=”photo/family.jpg” rel=”lightbox[photo]”><img src=”thumbnails/family_t.jpg” /> </a>
<a href=”photo/dance.jpg” rel=”lightbox[photo]”><img src=”thumbnails/dance_t.jpg” /> </a>
<a href=”photo/baby.jpg” rel=”lightbox[photo]”><img src=”thumbnails/baby_t.jpg” /> </a>
</div>
</div>
</div>
<div id=”footer”> <p align=”center” class=”style1″> Amber Bonogofsky 2009.</p>
</div>
</div>
</body>
</html>

CSS:
@charset “UTF-8”;
/* CSS Document */

body
{
padding: 0;
margin: 0;
background-color: #333333;
color: #000;
text-align: center;
}

#container
{
margin-top: 0px;
margin-right:auto;
margin-left: auto;
width: 1024px;
height: 768px;
background-color: #333333;
padding: 0px;
}

#header
{
width: 1024px;
height: 150px;
background-color:#333333;
}

#mainContent
{
margin: 0 0 0 150px;
padding: 0 20px;
width: auto;
height:450px;
top: 800px;
}

#gallery
{
float:right;
position:relative;
padding: 150px;
padding-left: 75px;
padding-top: 50px;
margin-right: 250px;
}

#pgallery
{
float:right;
position:relative;
padding: 50px;
padding-left: 45px;
padding-top: 50px;
margin-right: 45px;
}

#bio
{
float:right;
position:relative;
padding: 150px;
padding-left: 75px;
padding-top: 50px;
margin-right: 150px;
}

#sidebar
{
width: 150px;
height:450px;
float:left;
background-color:#333333;
margin-bottom: 0px;
}

#subheading
{
width: 1024px;
height: 100px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: medium;
color: #000000;
background-color: #333333;
margin: 0px;
padding: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
}

#logo
{
float:left;
height: 100px;
}

#footer
{
width: 1024 px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}

#nav, #nav ul{
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
padding-top: 65px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
font-family: “Century Gothic”;
font-size: large;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

#nav a:link, #nav a:active, #nav a:visited{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#000;
text-decoration:none;
background-color:#333;
}

#nav a:hover{
background-color:#000;
color:#333;
}

#nav li{
float:right;
position:relative;
padding: 0px;
margin-right: 0px;
}

#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; }

a:link {
COLOR: #CCC;
}
a:visited {
COLOR: #CCC;
}
a:hover {
COLOR: #FF00CC
}
a:active {
COLOR: #CCC;
}

to post a comment
HTML

4 Comments(s)

Copy linkTweet thisAlerts:
@FangFeb 13.2009 — Remove the space between the img and the closing anchor tag.
Copy linkTweet thisAlerts:
@crowsnestauthorFeb 13.2009 — That worked, thanks for your help!

Also,

I am having trouble figuring out how to control the amount of space that is in between each thumbnail. In firefox and safari it automatically spaces them out, but in opera and IE they are just all piled on top of each other...
Copy linkTweet thisAlerts:
@FangFeb 13.2009 — #pgallery img {margin:10px;}
Copy linkTweet thisAlerts:
@crowsnestauthorFeb 14.2009 — that fixed it, thanks for all your help!
×

Success!

Help @crowsnest spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 7.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 1000 SATS,

tipper: @Nanditha,
tipped: article
amount: 1000 SATS,
)...