Visual Lightbox not working in Firefox

Content
1

Hi,

Could someone pls help? I’ve just about finished my first website, quite basic, I’m pretty new to web design. I’m using the free version of Visual Lightbox and it works in all browsers except Firefox (at least my version 3.6.15), i.e. the photo should pop out and be nicely framed before moving on to the next one. Instead it opens it up in the same page and you have to click back to see the photos again.

Not sure what I’m doing wrong: Robin Eyre Gallery Pictures

Many thanks.
Robin

2

Hi robine! Welcome to SitePoint. :slight_smile:

At the bottom of your <head> section you have an opening conditional comment for Internet Explorer, but you’ve closed it off after the critical lightbox links rather than before.

So, instead of this (the bit in blue)


<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>

<!-- Start VisualLightBox.com HEAD section -->
		<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/vlightbox2.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/vlightbox3.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/vlightbox4.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/vlightbox5.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/vlightbox6.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
		<script src="engine/js/jquery.min.js" type="text/javascript"></script>
		<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
		<script src="engine/js/vlbdata.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/builder.js"></script>
		<script type="text/javascript" src="js/effects.js"></script>
		<!-- End VisualLightBox.com HEAD section -->

[COLOR="Blue"]<![endif]-->[/COLOR]

move it to here (in red)


<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
[COLOR="Red"]<![endif]-->[/COLOR]

<!-- Start VisualLightBox.com HEAD section -->
		<link rel="stylesheet" href="engine/css/vlightbox1.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/vlightbox2.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/vlightbox3.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/vlightbox4.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/vlightbox5.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/vlightbox6.css" type="text/css" />
		<link rel="stylesheet" href="engine/css/visuallightbox.css" type="text/css" media="screen" />
		<script src="engine/js/jquery.min.js" type="text/javascript"></script>
		<script src="engine/js/visuallightbox.js" type="text/javascript"></script>
		<script src="engine/js/vlbdata.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/builder.js"></script>
		<script type="text/javascript" src="js/effects.js"></script>
		<!-- End VisualLightBox.com HEAD section -->
3

Wow. Thanks ralph.m. Pure genius.