Browser Compatibility Issuse

LightBox JS 2.0 and IE7

Page 1 of 1

10 Replies - 4634 Views - Last Post: 20 October 2008 - 08:36 AM

#1 [email protected]  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • Posts: 94
  • Joined: 18-February 05

Browser Compatibility Issuse

Post icon  Posted 19 October 2008 - 10:44 AM

Hi everyone,

I am having trouble with some pictures on my site. It you view the following page in IE7, Firefox and Safari, you will get 3 very different behaviors:

perlmanrep.com/makers/linesheets/jan_2009_ls/jan_2009_ls-01.php

Safari is the only one working correctly.

You see the linesheet and when you click on a garment Lightbox JS 2.0 displays a more detailed picture. How ever on IE7 all you see is a red "x" and you have the ability to click to see the enlargments. Om Firefox all you see is the linesheet and no ability to click.

Here is the code:
<!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 name="verify-v1" content="1s1sM05LHGuuA9UjdTPyPB5GvJOCQkBhPsspQnoiEzw=" />
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><meta http-equiv="Content-Language" content="en-us" />
		
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	
	<meta name="description" content="Top womens fashion">
	<meta name="keywords" content="Fashion, Clothing, Women, Kersh, Motojeans, Necessitees, Pura Vida, Willow">
	<meta name="refresh" content="15">
	<meta name="robots"content="index,follow">
	<meta name="copyright" content="Copyright 2007. Perlmanrep.com. All Rights Reserved.">
	<meta name="author" content="Tim Smith">
	<meta name="generator" content="Tim Smith">
	<meta name="language" content="English">
	<meta name="revisit-after" content="1">
	
	<meta name="description" content="Description" />
	<meta name="keywords" content="Keywords" />
		
	<meta name="author" content="Smith Design" />
	
	<meta name="viewport" content="width = 760" />
	
	<link rel="alternate" type="application/rss+xml" title="ROR" href="../../../sitemap.xml" />
	
	<link rel="stylesheet" href="http://www.perlmanrep.com/css/screen.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="http://www.perlmanrep.com/css/lightbox.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="http://www.perlmanrep.com/css/lytebox.css" type="text/css" media="screen" />

	
	<script type="text/javascript" src="http://www.perlmanrep.com/js/prototype.js"></script>
	<script type="text/javascript" src="http://www.perlmanrep.com/js/scriptaculous.js?load=effects,builder"></script>
	<script type="text/javascript" src="http://www.perlmanrep.com/js/lightbox.js"></script>
	<script type="text/javascript" language="javascript" src="../../../js/lytebox.js"></script>
	
	<title>PerlmanRep</title>
		
		<script type="text/javascript"><!--//--><![CDATA[//><!--
			sfHover = function() {
				var sfEls = document.getElementById("nav").getElementsByTagName("LI");
				for (var i=0; i<sfEls.length; i++) {
					sfEls[i].onmouseover=function() {
						this.className+=" sfhover";
					}
					sfEls[i].onmouseout=function() {
						this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
					}
				}
			}
			if (window.attachEvent) window.attachEvent("onload", sfHover);
		//--><!]]></script>		
</head>

	<body class="kersh_spring_linesheets" style="-webkit-text-size-adjust:none" align="center">

	<div id="kersh_holiday_linesheets2" align="center">
		<?php include("http://www.perlmanrep.com/includes/menu.php");?>
		  <?php include("http://www.perlmanrep.com/includes/jan_2009_ls.php");?>
		  <div class="inner_header">makers  january 2009 linesheets</div>
		<a class="back" href="../index.html">linesheet index</a>
		<img src="../../art/linesheets/jan_2009_ls/scaled.Jan1.jpg" width="1200" height="712" border="0" usemap="#Map1" />	
   		  <map name="Map1" id="Map1">
			<a class="designer" href="../../art/styles/scaled.FRANKIE 113471R-TAA2MOS.JPG" rel="lightbox[KERSH]" title="frankie photo">
				<area shape="rect" coords="170,170,560,662" href="../../art/styles/scaled.FRANKIE 113471R-TAA2MOS.JPG" rel="lightbox[KERSH]" title="frankie photo" /></a>
   			  <a class="designer" href="../../art/styles/scaled.FERGGIE 115354R-TAA2MOS.JPG" rel="lightbox[KERSH]" title="ferggie photo">
   			  <area shape="rect" coords="691,157,1107,654" href="../../art/styles/scaled.FERGGIE 115354R-TAA2MOS.JPG" title="ferggie photo" /></a>
		  </map>
	  </div>
</body>
</html>




Please Help

This post has been edited by [email protected]: 20 October 2008 - 07:53 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Browser Compatibility Issuse

#2 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3717
  • View blog
  • Posts: 13,492
  • Joined: 08-August 08

Re: Browser Compatibility Issuse

Posted 19 October 2008 - 11:51 AM

I see no PHP here.
Was This Post Helpful? 0
  • +
  • -

#3 engale  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 3
  • View blog
  • Posts: 594
  • Joined: 30-September 08

Re: Browser Compatibility Issuse

Posted 19 October 2008 - 12:33 PM

Try this in the javascript section.
Was This Post Helpful? 0
  • +
  • -

#4 Hary  Icon User is offline

  • D.I.C Regular

Reputation: 44
  • View blog
  • Posts: 427
  • Joined: 23-September 08

Re: Browser Compatibility Issuse

Posted 19 October 2008 - 01:10 PM

Or try the Lightbox support forums. This is clearly a problem with (your usage) of the library
Was This Post Helpful? 0
  • +
  • -

#5 [email protected]  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • Posts: 94
  • Joined: 18-February 05

Re: Browser Compatibility Issuse

Posted 19 October 2008 - 03:34 PM

Hi everyone,

I am having trouble with some pictures on my site. It you view the following page in IE7, Firefox and Safari, you will get 3 very different behaviors:

perlmanrep.com/makers/linesheets/jan_2009_ls/jan_2009_ls-01.php

Safari is the only one working correctly.

You see the linesheet and when you click on a garment Lightbox JS 2.0 displays a more detailed picture. How ever on IE7 all you see is a red "x" and you have the ability to click to see the enlargments. Om Firefox all you see is the linesheet and no ability to click.

Here is the code:
<!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 name="verify-v1" content="1s1sM05LHGuuA9UjdTPyPB5GvJOCQkBhPsspQnoiEzw=" />
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><meta http-equiv="Content-Language" content="en-us" />
		
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	
	<meta name="description" content="Top womens fashion">
	<meta name="keywords" content="Fashion, Clothing, Women, Kersh, Motojeans, Necessitees, Pura Vida, Willow">
	<meta name="refresh" content="15">
	<meta name="robots"content="index,follow">
	<meta name="copyright" content="Copyright 2007. Perlmanrep.com. All Rights Reserved.">
	<meta name="author" content="Tim Smith">
	<meta name="generator" content="Tim Smith">
	<meta name="language" content="English">
	<meta name="revisit-after" content="1">
	
	<meta name="description" content="Description" />
	<meta name="keywords" content="Keywords" />
		
	<meta name="author" content="Smith Design" />
	
	<meta name="viewport" content="width = 760" />
	
	<link rel="alternate" type="application/rss+xml" title="ROR" href="../../../sitemap.xml" />
	
	<link rel="stylesheet" href="http://www.perlmanrep.com/css/screen.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="http://www.perlmanrep.com/css/lightbox.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="http://www.perlmanrep.com/css/lytebox.css" type="text/css" media="screen" />

	
	<script type="text/javascript" src="http://www.perlmanrep.com/js/prototype.js"></script>
	<script type="text/javascript" src="http://www.perlmanrep.com/js/scriptaculous.js?load=effects,builder"></script>
	<script type="text/javascript" src="http://www.perlmanrep.com/js/lightbox.js"></script>
	<script type="text/javascript" language="javascript" src="../../../js/lytebox.js"></script>
	
	<title>PerlmanRep</title>
		
		<script type="text/javascript"><!--//--><![CDATA[//><!--
			sfHover = function() {
				var sfEls = document.getElementById("nav").getElementsByTagName("LI");
				for (var i=0; i<sfEls.length; i++) {
					sfEls[i].onmouseover=function() {
						this.className+=" sfhover";
					}
					sfEls[i].onmouseout=function() {
						this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
					}
				}
			}
			if (window.attachEvent) window.attachEvent("onload", sfHover);
		//--><!]]></script>		
</head>

	<body class="kersh_spring_linesheets" style="-webkit-text-size-adjust:none" align="center">

	<div id="kersh_holiday_linesheets2" align="center">
		<?php include("http://www.perlmanrep.com/includes/menu.php");?>
		  <?php include("http://www.perlmanrep.com/includes/jan_2009_ls.php");?>
		  <div class="inner_header">makers  january 2009 linesheets</div>
		<a class="back" href="../index.html">linesheet index</a>
		<img src="../../art/linesheets/jan_2009_ls/scaled.Jan1.jpg" width="1200" height="712" border="0" usemap="#Map1" />	
   		  <map name="Map1" id="Map1">
			<a class="designer" href="../../art/styles/scaled.FRANKIE 113471R-TAA2MOS.JPG" rel="lightbox[KERSH]" title="frankie photo">
				<area shape="rect" coords="170,170,560,662" href="../../art/styles/scaled.FRANKIE 113471R-TAA2MOS.JPG" rel="lightbox[KERSH]" title="frankie photo" /></a>
   			  <a class="designer" href="../../art/styles/scaled.FERGGIE 115354R-TAA2MOS.JPG" rel="lightbox[KERSH]" title="ferggie photo">
   			  <area shape="rect" coords="691,157,1107,654" href="../../art/styles/scaled.FERGGIE 115354R-TAA2MOS.JPG" title="ferggie photo" /></a>
		  </map>
	  </div>
</body>
</html>




Please Help
Was This Post Helpful? 0
  • +
  • -

#6 [email protected]  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • Posts: 94
  • Joined: 18-February 05

Re: Browser Compatibility Issuse

Post icon  Posted 20 October 2008 - 07:52 AM

Hi everyone,

I am having trouble with some pictures on my site. It you view the following page in IE7, Firefox and Safari, you will get 3 very different behaviors:

perlmanrep.com/makers/linesheets/jan_2009_ls/jan_2009_ls-01.php

Safari is the only one working correctly.

You see the linesheet and when you click on a garment Lightbox JS 2.0 displays a more detailed picture. How ever on IE7 all you see is a red "x" and you have the ability to click to see the enlargments. Om Firefox all you see is the linesheet and no ability to click.

Here is the code:
<!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 name="verify-v1" content="1s1sM05LHGuuA9UjdTPyPB5GvJOCQkBhPsspQnoiEzw=" />
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><meta http-equiv="Content-Language" content="en-us" />
		
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	
	<meta name="description" content="Top womens fashion">
	<meta name="keywords" content="Fashion, Clothing, Women, Kersh, Motojeans, Necessitees, Pura Vida, Willow">
	<meta name="refresh" content="15">
	<meta name="robots"content="index,follow">
	<meta name="copyright" content="Copyright 2007. Perlmanrep.com. All Rights Reserved.">
	<meta name="author" content="Tim Smith">
	<meta name="generator" content="Tim Smith">
	<meta name="language" content="English">
	<meta name="revisit-after" content="1">
	
	<meta name="description" content="Description" />
	<meta name="keywords" content="Keywords" />
		
	<meta name="author" content="Smith Design" />
	
	<meta name="viewport" content="width = 760" />
	
	<link rel="alternate" type="application/rss+xml" title="ROR" href="../../../sitemap.xml" />
	
	<link rel="stylesheet" href="http://www.perlmanrep.com/css/screen.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="http://www.perlmanrep.com/css/lightbox.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="http://www.perlmanrep.com/css/lytebox.css" type="text/css" media="screen" />

	
	<script type="text/javascript" src="http://www.perlmanrep.com/js/prototype.js"></script>
	<script type="text/javascript" src="http://www.perlmanrep.com/js/scriptaculous.js?load=effects,builder"></script>
	<script type="text/javascript" src="http://www.perlmanrep.com/js/lightbox.js"></script>
	<script type="text/javascript" language="javascript" src="../../../js/lytebox.js"></script>
	
	<title>PerlmanRep</title>
		
		<script type="text/javascript"><!--//--><![CDATA[//><!--
			sfHover = function() {
				var sfEls = document.getElementById("nav").getElementsByTagName("LI");
				for (var i=0; i<sfEls.length; i++) {
					sfEls[i].onmouseover=function() {
						this.className+=" sfhover";
					}
					sfEls[i].onmouseout=function() {
						this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
					}
				}
			}
			if (window.attachEvent) window.attachEvent("onload", sfHover);
		//--><!]]></script>		
</head>

	<body class="kersh_spring_linesheets" style="-webkit-text-size-adjust:none" align="center">

	<div id="kersh_holiday_linesheets2" align="center">
		<?php include("http://www.perlmanrep.com/includes/menu.php");?>
		  <?php include("http://www.perlmanrep.com/includes/jan_2009_ls.php");?>
		  <div class="inner_header">makers  january 2009 linesheets</div>
		<a class="back" href="../index.html">linesheet index</a>
		<img src="../../art/linesheets/jan_2009_ls/scaled.Jan1.jpg" width="1200" height="712" border="0" usemap="#Map1" />	
   		  <map name="Map1" id="Map1">
			<a class="designer" href="../../art/styles/scaled.FRANKIE 113471R-TAA2MOS.JPG" rel="lightbox[KERSH]" title="frankie photo">
				<area shape="rect" coords="170,170,560,662" href="../../art/styles/scaled.FRANKIE 113471R-TAA2MOS.JPG" rel="lightbox[KERSH]" title="frankie photo" /></a>
   			  <a class="designer" href="../../art/styles/scaled.FERGGIE 115354R-TAA2MOS.JPG" rel="lightbox[KERSH]" title="ferggie photo">
   			  <area shape="rect" coords="691,157,1107,654" href="../../art/styles/scaled.FERGGIE 115354R-TAA2MOS.JPG" title="ferggie photo" /></a>
		  </map>
	  </div>
</body>
</html>




Please Help
Was This Post Helpful? 0
  • +
  • -

#7 [email protected]  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • Posts: 94
  • Joined: 18-February 05

Re: Browser Compatibility Issuse

Posted 20 October 2008 - 07:55 AM

View Postengale, on 19 Oct, 2008 - 12:33 PM, said:

Try this in the javascript section.


I moved this to the HTML and CSS section and the Javascript Section

Still no luck. This really surprises me. :angry:
Was This Post Helpful? 0
  • +
  • -

#8 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1659
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Browser Compatibility Issuse

Posted 20 October 2008 - 08:21 AM

Topics merged :)
Was This Post Helpful? 0
  • +
  • -

#9 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1659
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Browser Compatibility Issuse

Posted 20 October 2008 - 08:27 AM

For starters you have the lightbox.js file included two times, try removing the second one and see if that changes anything
Was This Post Helpful? 0
  • +
  • -

#10 gothik12  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 6
  • View blog
  • Posts: 207
  • Joined: 10-November 07

Re: Browser Compatibility Issuse

Posted 20 October 2008 - 08:28 AM

I think this one is the guilty: src="../../../js/lytebox.js" and all src you have at script , a href and so on...

Place like this: src="js/lytebox.js" , because I bet this one is the index page (the code) and you have a folder js which contains lytebox.js...and so on...

Delete all kinds of .../.../... . You will have to use src="js/lytebox.js" or src=""http://www.perlmanrep.com/js/lytebox.js". You must place the exact path in the src attribute. Never place ../.. . These are placed by Dreamweaver for example when you use the design window and use Insert > Image and you insert an image from another folder than the one for the site.

This post has been edited by gothik12: 20 October 2008 - 08:30 AM

Was This Post Helpful? 0
  • +
  • -

#11 PsychoCoder  Icon User is offline

  • Google.Sucks.Init(true);
  • member icon

Reputation: 1659
  • View blog
  • Posts: 19,853
  • Joined: 26-July 07

Re: Browser Compatibility Issuse

Posted 20 October 2008 - 08:36 AM

Please, this is your third thread regarding this, please no more duplicate topics. Merged
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1