PDA

View Full Version : problem using lightbox++ (only in IE7 and 6)



esjjventura
Jan 16th, 2009, 04:55 PM
If you click on one of the bedrooms in the flash movie it is supposed to pop up a lightbox of an image. It works perfectly fine in firefox without errors. But when I try to click it in IE7 and 6, I get an error. IE gives me the line number the error is on, but since I include so many css files, it's almost impossible to figure out what line it's on.

http://dev.thelexappeal.com/floor-plans.html

jerry62704
Jan 16th, 2009, 06:02 PM
The problem is most likely here:

<div id="footer">
<a target="_blank" href="http://www.buckingham-co.com">
<div class="buckinghamLink"></div>
</a>

You can't have a div in an anchor tag.

esjjventura
Jan 16th, 2009, 06:37 PM
I tried getting rid of that code and it still doesn't work.

jerry62704
Jan 16th, 2009, 08:41 PM
I've pretty printed the code and moved the spans at the bottom. The two questions I had are marked with a LOOOOOOONG "*" comment next to them. Try this code and see if it fixes it or not.


<!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" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<base href="http://dev.thelexappeal.com/floor-plans.html" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />

<title>Floorplans</title>

<!-- load javascripts -->
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>
<script type="text/javascript" src="/modules/mod_briaskISS/mod_briaskISS.js"></script>
<script language="javascript" type="text/javascript" src="/templates/Lex_Design/scripts/mootools-release-1.11.js"></script>
<script language="javascript" type="text/javascript" src="/templates/Lex_Design/scripts/swfobject.js"></script>

<!-- load css -->
<link rel="stylesheet" href="/modules/mod_briaskISS/mod_briaskISS.css" type="text/css" />
<link href="/templates/Lex_Design/styles/gatekeeper.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />

<!--[if lte IE 6]>
<style type="text/css">
img, div { behavior: url(/templates/Lex_Design/scripts/iepngfix.htc); }
</style>
<link rel="stylesheet" type="text/css" href="/templates/Lex_Design/styles/ie6hacks.css" media="screen, projection" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/templates/Lex_Design/styles/ie7hacks.css" media="screen, projection" />
<![endif]-->

<link rel="shortcut icon" href="/templates/Lex_Design/images/favicon.ico" />

<!-- lightbox files -->
<link rel="stylesheet" href="/templates/Lex_Design/scripts/lightbox/css/lightbox.css" type="text/css" media="screen" />
<script src="/templates/Lex_Design/scripts/lightbox/js/prototype.js" type="text/javascript"></script>
<script src="/templates/Lex_Design/scripts/lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="/templates/Lex_Design/scripts/lightbox/js/lightbox++.js" type="text/javascript"></script>
<script type="text/javascript">
function GroupDelegate(id) {
var objLink = document.getElementById(id);
Lightbox.prototype.start(objLink);
}
</script>
<!-- end lightbox -->
</head>

<body>
<div id="masterWrapper">
<div id="mod1">
<div id="logocontainer">
<img src="/images/stories/nav_logo.jpg" />
</div>

<div id="navcontainer">
<div class="moduletable_menu">
<ul class="menu">
<li class="item41"><a href="http://dev.thelexappeal.com/"><span>Home</span></a></li>
<li class="parent item2"><a href="/lex-living.html"><span>Lex Living</span></a></li>
<li id="current" class="parent active item5"><a href="/floor-plans.html"><span>Floor Plans</span></a>
<ul>
<li class="item6"><a href="/floor-plans/3d-animations.html"><span>3D Animations</span></a></li>
<li class="item7"><a href="/floor-plans/create-your-space.html"><span>Create Your Space</span></a></li>
<li class="item25"><a href="/floor-plans/printable-versions.html"><span>Printable Versions</span></a></li>
</ul>
</li>
<li class="parent item8"><a href="/3d-animations.html"><span>3D Animations</span></a></li>
<li class="parent item11"><a href="/lease-now.html"><span>Lease Now</span></a></li>
<li class="parent item14"><a href="/contact-us.html"><span>Contact Us</span></a></li>
<li class="item30"><a href="/social-networking.html"><span>Social Networking</span></a></li>
<li class="item31"><a href="https://thelexappeal.residentportal.com/resident_portal/?module=authentication&amp;action=view_login"><span>Resident Portal</span></a></li>
<li class="item35"><a href="/brochures.html"><span>Brochures</span></a></li>
</ul>
</div>
</div>
</div> <!-- mod1 -->

<div id="mod2">
<div id="advert1"><img src="/images/stories/youShouldBeHere.png" /></div>
<div id="breadcrumbsContainer">
<div id="breadcrumbs">
<span class="breadcrumbs pathway">
<a href="http://dev.thelexappeal.com/" class="pathway">Home</a> :: Floor Plans</span>
</div>

<div id="printText"></div>
</div>

<div id="mainContent">
<table class="contentpaneopen_flash">
<tr>
<td valign="top">
<script type="text/javascript"><!--
var flashvars = {};
var params = {};
params.play = "true";
params.wmode = "transparent";
params.loop = "false";
params.quality = "best";
params.allowfullscreen = "true";
params.allowscriptaccess = "always";
var attributes = {};
swfobject.embedSWF("/images/flash/Arron_4_Floorplans.swf", "myAlternativeContent", "640", "360", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
// --></script>
<div id="myAlternativeContent">
<a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> </a>
</div>
<a id="floor1" href="/images/stories/Lex_1BR.jpg" rel="lightbox[floor]"></a>
<a id="floor2" href="/images/stories/Lex_2BR.jpg" rel="lightbox[floor]"></a>
<a id="floor3" href="/images/stories/Lex_3BR.jpg" rel="lightbox[floor]"></a>
<a id="floor4" href="/images/stories/Lex_4BR.jpg" rel="lightbox[floor]"></a>

</td>
</tr>
</table>
<span class="article_separator">&nbsp;</span>
</div>

<div id="advertContainer">
<div id="advert2">
<noscript> <!-- Why? *************************************************************** -->
<div>ImageSlideShow requires Javascript</div>
</noscript> <!-- Why? ************************************************************** -->

<ul id="briask-iss24" class="briask-iss" style="width:452px;height:147px">
<li><img src="/images/stories/advert2Rotate/banner2.jpg" alt="Lex Appeal" /></li>
<li><img src="/images/stories/advert2Rotate/banner1.jpg" alt="Lex Appeal" /></li>
</ul>

<script type="text/javascript">
var briaskPics24 = [0];
var briaskInstance24 = new briaskISS(24,0,12000,50, briaskPics24);
</script>
</div>

<div id="advert3">
<a href="/whats-happening.html"><img src="/images/stories/what.jpg" /></a>
</div>
</div> <!-- advertdontainer -->
</div> <!-- mod2 -->

<div class="clearBoth"></div>

<div id="footer">
<a href="http://www.buckingham-co.com" target="_blank" class="buckinghamLink"></a>
Buckingham Companies, copyright 2008. All rights reserved.
<a href="/privacy-policy.html"><span>Privacy Policy</span></a> |
<a href="/admin-login.html"><span>Admin</span></a>
<!-- why above span in the original? ******************************************************* -->
<div class="sbiBackLink">
<a href="http://www.sbimedia.com" target="_blank">Developed by SBi Media</a>
</div>
</div>
</div> <!-- masterwrap -->
</body>
</html>

esjjventura
Jan 16th, 2009, 08:52 PM
Nope, just copied your code and posted it here:
http://dev.thelexappeal.com/ztest.php

I still get the same error, and the lightbox isn't working.

esjjventura
Jan 16th, 2009, 09:13 PM
I figured out what the error was with the div being inside an <a> tag. My iepngfix didn't like that I was using a png as a background, so I changed it to a jpg.

Now, I'm still having a problem with the lightbox not working from the link within the flash movie.