Forum Moderators: open

Message Too Old, No Replies

Why will this not display properly on safari?

         

tpkoszuta

3:03 pm on Mar 15, 2005 (gmt 0)

10+ Year Member



Hello all!

first post - long time reader.

I am having issues with mm_swapimage and its displaying in safari.

Let me precursor this with the fact that I did not code the site - but rather was just given it and told to "fix it"

The pages i am talking about specifically can be seen at the following link:

<SNIP!> No URLs please! See TOS [webmasterworld.com].

The bottom navigation is a php include of the following page:

<SNIP!> No URLs please! See TOS [webmasterworld.com].

On Safari ONLY the text graphic swap images do not appear at all.

Can anyone help me with this? I am at my wit's end.

Thanks so much!

_t

[edited by: BlobFisk at 3:59 pm (utc) on Mar. 15, 2005]
[edit reason] Removerd URLs [/edit]

tpkoszuta

3:39 pm on Mar 15, 2005 (gmt 0)

10+ Year Member



To help out i will post the code for both pages here:

STAND ALONE PAGE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DataDog :: Our Work</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="dd.css" rel="stylesheet" type="text/css">
<link href="3column.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.color {
color: #CCCCCC;
}
-->
</style>
<style type="text/css">
<!--
-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body background="images/bkg.gif" leftmargin="0" topmargin="0" onLoad="MM_preloadImages('images/work2a.jpg','images/work1b.jpg','images/work1a.jpg','images/work2b.jpg','images/work3b.jpg','images/work3a.jpg','images/work4a.jpg','images/work5b.jpg','images/work5a.jpg','images/work6b.jpg','images/work6a.jpg','images/work7b.jpg','images/work7a.jpg','images/work8b.jpg','images/work8a.jpg','images/work9b.jpg','images/work9a.jpg')">

<div id="containerwork"> <div id="top"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="3column.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="navcontainer">
<ul>
<li><a href="work.php">Work</a></li>

<li class="color">::</li>
<li><a href="contact.php">Contact</a></li>
<li class="color">::</li>
<li><a href="index.html">Home</a></li>
</ul></div>
</body>
</html>
</div>

<div id="content"><img src="images/work-head.gif" width="333" height="120" align="top"> <h1><span class="work2"><img src="images/workblank.gif" name="bigImage" width="300" height="225" id="bigImage"></span></h1>
<p>Your Message Is Unique<br>
An effective marketing plan is like a successful recipe; both require a dab of this and a handful of that. Sometimes the job requires e-mail or direct mail. Other times traditional advertising is the right solution. We&#8217;ll help you figure out what combination works best for you. </p>
<p>Our specialties include a mix of:<br>
Email marketing<br>
Internet marketing<br>

Print <br>
Direct mail<br>
Radio<br>
Customer surveys<br>
Lead generation</p>
</div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="3column.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="#CC9933" onLoad="MM_preloadImages('images/work2a.jpg','images/work2c.jpg','images/work3a.jpg','images/work3c.jpg','images/work4a.jpg','images/work4c.jpg','images/work5a.jpg','images/work5c.jpg','images/work6a.jpg','images/work6c.jpg','images/work7a.jpg','images/work1b.jpg','images/work7c.gif','images/work1a.jpg','images/address.gif','images/work2c.gif')">
<div id="worknav">

<div class="thumbnail"> <a href="work1.php" onMouseOver="MM_swapImage('w1','','images/work1a.jpg','title','','images/work1c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work1.jpg" alt="" name="w1" width="45" height="45" border="0" id="w1"></a></div>

<div class="thumbnail"> <a href="work2.php" onMouseOver="MM_swapImage('w2','','images/work2a.jpg','title','','images/work2c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work2.jpg" alt="" name="w2" width="45" height="45" border="0" id="w2"></a></div>


<div class="thumbnail"> <a href="work3.php" onMouseOver="MM_swapImage('w3','','images/work3a.jpg','title','','images/work3c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work3.jpg" alt="" name="w3" width="45" height="45" border="0" id="w3"></a></div>

<div class="thumbnail"> <a href="work4.php" onMouseOver="MM_swapImage('w4','','images/work4a.jpg','title','','images/work4c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work4.jpg" alt="" name="w4" width="45" height="45" border="0" id="w4"></a></div>

<div class="thumbnail"> <a href="work5.php" onMouseOver="MM_swapImage('w5','','images/work5a.jpg','title','','images/work5c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work5.jpg" alt="" name="w5" width="45" height="45" border="0" id="w5"></a></div>


<div class="thumbnail"> <a href="work6.php" onMouseOver="MM_swapImage('w6','','images/work6a.jpg','title','','images/work6c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work6.jpg" alt="" name="w6" width="45" height="45" border="0" id="w6"></a></div>

<div class="thumbnail"> <a href="work7.php" onMouseOver="MM_swapImage('w7','','images/work7a.jpg','title','','images/work7c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work7.jpg" alt="" name="w7" width="45" height="45" border="0" id="w7"></a></div>


</div>

<div id="footer">
<h2><img src="images/work_blankc.gif" name="title" height="10" id="title"></h2>
</div>
</body>
</html>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="3column.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('images/newwork_b.gif')">
<div id="footer">
<div id="rightnav"><a href="ddiu.php" onMouseOver="MM_swapImage('ddiu','','images/newwork_b.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/newwork.gif" name="ddiu" border="0" id="ddiu"></a></div>
<p><br>
Address<br>
Address<br>
Address<br>
<br>

Telephone: 1234567890<br>
Fax: 1234567890</p>
</div>
</body>
</html>
</body></html>

WORK NAV PAGE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="3column.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="#CC9933" onLoad="MM_preloadImages('images/work2a.jpg','images/work2c.jpg','images/work3a.jpg','images/work3c.jpg','images/work4a.jpg','images/work4c.jpg','images/work5a.jpg','images/work5c.jpg','images/work6a.jpg','images/work6c.jpg','images/work7a.jpg','images/work1b.jpg','images/work7c.gif','images/work1a.jpg','images/address.gif','images/work2c.gif')">
<div id="worknav">

<div class="thumbnail"> <a href="work1.php" onMouseOver="MM_swapImage('w1','','images/work1a.jpg','title','','images/work1c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work1.jpg" alt="" name="w1" width="45" height="45" border="0" id="w1"></a></div>

<div class="thumbnail"> <a href="work2.php" onMouseOver="MM_swapImage('w2','','images/work2a.jpg','title','','images/work2c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work2.jpg" alt="" name="w2" width="45" height="45" border="0" id="w2"></a></div>


<div class="thumbnail"> <a href="work3.php" onMouseOver="MM_swapImage('w3','','images/work3a.jpg','title','','images/work3c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work3.jpg" alt="" name="w3" width="45" height="45" border="0" id="w3"></a></div>

<div class="thumbnail"> <a href="work4.php" onMouseOver="MM_swapImage('w4','','images/work4a.jpg','title','','images/work4c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work4.jpg" alt="" name="w4" width="45" height="45" border="0" id="w4"></a></div>

<div class="thumbnail"> <a href="work5.php" onMouseOver="MM_swapImage('w5','','images/work5a.jpg','title','','images/work5c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work5.jpg" alt="" name="w5" width="45" height="45" border="0" id="w5"></a></div>


<div class="thumbnail"> <a href="work6.php" onMouseOver="MM_swapImage('w6','','images/work6a.jpg','title','','images/work6c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work6.jpg" alt="" name="w6" width="45" height="45" border="0" id="w6"></a></div>

<div class="thumbnail"> <a href="work7.php" onMouseOver="MM_swapImage('w7','','images/work7a.jpg','title','','images/work7c.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/work7.jpg" alt="" name="w7" width="45" height="45" border="0" id="w7"></a></div>


</div>

<div id="footer">
<h2><img src="images/work_blankc.gif" name="title" height="10" id="title"></h2>
</div>
</body>
</html>

[edited by: BlobFisk at 4:02 pm (utc) on Mar. 15, 2005]
[edit reason] Removed Address and Telephone Number [/edit]

tpkoszuta

5:50 pm on Mar 15, 2005 (gmt 0)

10+ Year Member



no help?

encyclo

6:14 pm on Mar 15, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld, tpkoszuta.

There's really too much to work with to be able to give an answer. You need to start by cleaning up the markup to a point where it becomes manageable - there are so many huge errors in there that at the moment it is impossible to pinpoint the problem.

You first big problem is with your includes. You are including whole HTML files, doctypes and all. Includes should only have the relevant markup for that section: no doctype, no

<html></html>
, no
<head></head>
, etc.

After that, run the resulting page through the HTML validator [validator.w3.org], which will help iron out nesting errors, missing tags, invalid attributes and the rest of it.

Step three is to build a simple test case - one simplified, validated page with one roll-over graphic, and with all the associated Javascript and styling inline, and nothing more. Once you've got that, you may well find the solution yourself: if not, post back with the simplified test case and we'll be happy to help.

We can't do "fix my page" requests with links to a specific URL, because the entire thread becomes useless to anyone else once the problem has been diagnosed. A thread with a test case will stand the test of time, providing help to others long after your specific page has been fixed.

tpkoszuta

6:18 pm on Mar 15, 2005 (gmt 0)

10+ Year Member



Thanks so much!

Like I say - I was handed this page and told to fix it - so hopefully my attempts will be better than the "so many errors" as it currently is.

I will work on the include right now and hopefully post a test soon.

Thanks again,

_t