Discussion:
Replacing jpg slice with swf. Display problems in Firefox
(too old to reply)
punklito
2009-02-01 23:22:29 UTC
Permalink
I have an html page that I created in Photoshop, sliced up and published. I
opened it in Contribute and replaced one of the slices with an swf of the same
dimentions. Now, in Firefox and IE the table doesn't align anymore. It shows
fine in Safari. Here's the link: http://www.timothyabraham.com/bio.html Any
ideas? I've also attatched the code of the page.

Thanks,

Punklito

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Timothy Abraham &bull; Producer - Composer - Musician</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; height: 100%;}
body {font: 14px/1.7 Verdana, Geneva, Arial, sans-serif;}
#wrap {
position: relative;
width: 100%x;
height: 100%;
margin: 0 auto;
background: #000000;
}
#content {
background: #000000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
height: 562px;
margin-top: -281px;
width: 900px;
margin-left: -450px;

}
</style>
<script 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/indexover_08.jpg')">
<div id="wrap">
<div id="content">
<!--!!! beginning of matt's table !!!-->
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0"
onLoad="MM_preloadImages('images/indexover_08.jpg','images/indexover_14.jpg','im
ages/indexover_16.jpg','images/indexover_13.jpg','images/indexover_05.jpg')">
<!-- Save for Web Slices (tim.index.psd) -->
<table id="Table_01" width="900" height="561" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td colspan="3">
<img src="images/bio_01.jpg" width="900" height="105" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/bio_02.jpg" width="295" height="456" alt=""></td>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=7,0,19,0" width="590" height="300" vspace="0">
<param name="movie" value="bio/index.swf">
<param name="quality" value="high">
<embed src="bio/index.swf" width="590" height="300" vspace="0"
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>
</object></td>
<td rowspan="2">
<img src="images/bio_04.jpg" width="15" height="456" alt=""></td>
</tr>
<tr>
<td>
<img src="images/bio_05.jpg" width="590" height="156" alt=""></td>
</tr>
</table>
<!--!!! end of matt's table !!!-->
</div>
</div>
</body>
</html>
ThinkInk
2009-02-02 08:34:36 UTC
Permalink
There are some things wrong in your source:

1. you have two body tags!
a - <body onLoad="MM_preloadImages('images/indexover_08.jpg')">
b - <body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0"
onLoad="MM_preloadImages('images/indexover_08.jpg','images/indexover_14.jpg','im
ages/indexover_16.jpg','images/indexover_13.jpg','images/indexover_05.jpg')">

You will have to create one, delete one and put the style in your css body
declaration:

---

2. there are errors in your css
a - body {font: 14px/1.7 Verdana, Geneva, Arial, sans-serif;} should be body
{font: 14px Verdana, Geneva, Arial, sans-serif;}
b - width: 100%x; should be width: 100%;

---

3. About the flash displaying wrong in firefox, that's a css problem, you can
add this to your css to solve it:

object {
line-height:0px;
margin:0px;
padding:0px;
font-size:0px;
}
embed {
line-height:0px;
margin:0px;
padding:0px;
font-size:0px;
}

---

4. furthermore you can embed flash using javascript (swfObject or
AC_RunActiveContent.js from Adobe) (so people will not have to activate the
object first like in opera, ie), the embed gap problem does not seem to be
there in firefox when you use javascript to embed the flash...

---

I attached the source without the errors. I removed the javascript preload
part, because you do not seem to preload anything in your page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Timothy Abraham &bull; Producer - Composer - Musician</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0; height: 100%;}
/* body css placed here and not in tag */
body {
font: 14px Verdana, Geneva, Arial, sans-serif;
background:#000000;
margin:0;
padding:0;
}
#wrap {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
background: #000000;
}
#content {
background: #000000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
height: 562px;
margin-top: -281px;
width: 900px;
margin-left: -450px;
}
/* code added because of pixel gap in firefox */
object {
line-height:0px;
margin:0px;
padding:0px;
font-size:0px;
}
embed {
line-height:0px;
margin:0px;
padding:0px;
font-size:0px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<!--!!! beginning of matt's table !!!-->
<!-- Save for Web Slices (tim.index.psd) -->
<table id="Table_01" width="900" height="561" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td colspan="3">
<img src="Loading Image..." width="900"
height="105" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="Loading Image..." width="295"
height="456" alt=""></td>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=7,0,19,0" width="590" height="300" vspace="0">
<param name="movie" value="index.swf">
<param name="quality" value="high">
<embed src="index.swf" width="590" height="300" vspace="0"
quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>
</object></td>
<td rowspan="2">
<img src="Loading Image..." width="15"
height="456" alt=""></td>
</tr>
<tr>
<td>
<img src="Loading Image..." width="590"
height="156" alt=""></td>
</tr>
</table>
<!--!!! end of matt's table !!!-->
</div>
</div>
</body>
</html>

Loading...