PDA

View Full Version : Float Property and Safari Browser

shanejeffery86
03-24-2008, 05:53 PM
While I know that a large base of web users use either Firefox or IE, I do have a couple of frequent users that do use Safari.

I am aware that their is an issue with Safari and it recognizing and using the float property correctly.

The page that has the issue is: www.diversionguild.com

What happens in Safari is that the floated element (that being the Flash file), does not actually float and instead decides to left align itself.

Safari Issue: http://img211.imageshack.us/img211/7528/safaridc9.gif

What it should look like (IE/FF version): http://img225.imageshack.us/img225/3813/ieffrq6.gif

Here is my index.html 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 http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Erus Proeliator - Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body class="lightbg" onload="MM_preloadImages('fp_images/hover_frontpage.gif','fp_images/hover_forums.gif','fp_images/hover_dkp.gif','fp_images/hover_recruitment.gif','fp_images/hover_user.gif','fp_images/hover_register.gif')">

<!-- ROLLOVER IMAGES -->
<script language="JavaScript" type="text/JavaScript">
<!--
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_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_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>
<!-- END ROLLOVER IMAGES -->

<table border="0" width="100%" style="height: 100%;" cellspacing="0" cellpadding="0">
<tr>
<td class="darkbg" style="height: 237px" valign="bottom"></td>
</tr>
<tr>
<td style="height: 270px;" align="left" valign="top">
<div style="position: absolute; width: 466px; z-index: 3; height: 227px">
<div id="navcontainer">
<a href="/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','/fp_images/hover_frontpage.gif',1)"><img src="/fp_images/nohover_frontpage.gif" alt="Frontpage" name="Image2" width="76" height="27" border="0" /></a><a href="/forumlist.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','/fp_images/hover_forums.gif',1)"><img src="/fp_images/nohover_forums.gif" alt="Forums" name="Image3" width="67" height="27" border="0" /></a><a href="/eqdkp/listmembers.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','/fp_images/hover_dkp.gif',1)"><img src="/fp_images/nohover_dkp.gif" alt="DKP Standings" name="Image4" width="99" height="27" border="0" /></a><a href="/forumdisplay.php?f=6" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','/fp_images/hover_recruitment.gif',1)"><img src="/fp_images/nohover_recruitment.gif" alt="Recruitment" name="Image5" width="89" height="27" border="0" /></a><a href="/usercp.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','/fp_images/hover_user.gif',1)"><img src="/fp_images/nohover_user.gif" alt="User CP" name="Image6" width="73" height="27" border="0" /></a><a href="/register.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','/fp_images/hover_register.gif',1)"><img src="/fp_images/nohover_register.gif" alt="Register" name="Image7" width="61" height="27" border="0" /></a></div>
<div><img src="/fp_images/guild_name.gif" width="465" height="227" alt="Erus Proeliator"/></div>
</div>

<div style="position: absolute; width:100%" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
width="500" height="254" id="News Reel"><param name="movie" value="news.swf" /><param name="quality" value="high" /><param name="bgcolor" value="ffffff" /><embed src="/news.swf" quality="high" bgcolor="#FFFFFF" width="500" height="254"
name="myMovieName" align="right" type="application/x-shockwave-flash"
pluginspace="http://www.macromedia.com/go/getflashplayer"></embed></object></div></td>
</tr>
<tr>
<td style="height: 80%;" align="center" valign="top">
<p align="center"></p></td>
</tr>
</table>

</body>

</html>

What is a solid workaround that will work for all browsers for this right-aligned flash element?

Thanks for your time.
rafiki
03-24-2008, 06:01 PM
http://validator.w3.org/check validate your code.
till then try
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Erus Proeliator - Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
table.c7 {height: 100%;}
td.c6 {height: 80%;}
p.c5 {text-align: center}
td.c4 {height: 270px;}
div.c3 {position: absolute; width:100%}
div.c2 {position: absolute; width: 466px; z-index: 3; height: 227px}
td.c1 {height: 237px}
/*]]>*/
</style>
</head>
<body class="lightbg" onload="MM_preloadImages('fp_images/hover_frontpage.gif','fp_images/hover_forums.gif','fp_images/hover_dkp.gif','fp_images/hover_recruitment.gif','fp_images/hover_user.gif','fp_images/hover_register.gif')">
<!-- ROLLOVER IMAGES -->
<script language="JavaScript" type="text/JavaScript">
//<![CDATA[
<!--
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_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_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><!-- END ROLLOVER IMAGES -->
<table border="0" width="100%" class="c7" cellspacing="0" cellpadding="0">
<tr>
<td class="darkbg c1" valign="bottom"></td>
</tr>
<tr>
<td class="c4" align="left" valign="top">
<div class="c2">
<div id="navcontainer"><a href="/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','/fp_images/hover_frontpage.gif',1)"><img src="/fp_images/nohover_frontpage.gif" alt="Frontpage" name="Image2" width="76" height="27" border="0" /></a><a href="/forumlist.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','/fp_images/hover_forums.gif',1)"><img src="/fp_images/nohover_forums.gif" alt="Forums" name="Image3" width="67" height="27" border="0" /></a><a href="/eqdkp/listmembers.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','/fp_images/hover_dkp.gif',1)"><img src="/fp_images/nohover_dkp.gif" alt="DKP Standings" name="Image4" width="99" height="27" border="0" /></a><a href="/forumdisplay.php?f=6" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','/fp_images/hover_recruitment.gif',1)"><img src="/fp_images/nohover_recruitment.gif" alt="Recruitment" name="Image5" width="89" height="27" border="0" /></a><a href="/usercp.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','/fp_images/hover_user.gif',1)"><img src="/fp_images/nohover_user.gif" alt="User CP" name="Image6" width="73" height="27" border="0" /></a><a href="/register.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','/fp_images/hover_register.gif',1)"><img src="/fp_images/nohover_register.gif" alt="Register" name="Image7" width="61" height="27" border="0" /></a></div>
<div><img src="/fp_images/guild_name.gif" width="465" height="227" alt="Erus Proeliator" /></div>
</div>
<div class="c3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="500" height="254" id="News Reel"><param name="movie" value="news.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="ffffff" />
<embed src="/news.swf" quality="high" bgcolor="#FFFFFF" width="500" height="254" name="myMovieName" align="right" type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/go/getflashplayer" /></object></div>
</td>
</tr>
<tr>
<td class="c6" align="center" valign="top">
<p class="c5"></p>
</td>
</tr>
</table>
</body>
</html>
VIPStephan
03-24-2008, 06:05 PM
I am aware that their is an issue with Safari and it recognizing and using the float property correctly.

There is no such issue. Safari is more standards compliant than Internet Explorer and kind of at the same level as Firefox regarding CSS support.


What is a solid workaround that will work for all browsers for this right-aligned flash element?

A “solid workaround” is writing clean, semantic (http://brainstormsandraves.com/articles/semantics/structure/), and valid (http://validator.w3.org/) HTML code (this includes not using tables for layout (http://hotdesign.com/seybold/)) then there won’t be any problem with Safari.
shanejeffery86
03-24-2008, 06:24 PM
http://validator.w3.org/check validate your code.
till then try
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Erus Proeliator - Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
table.c7 {height: 100%;}
td.c6 {height: 80%;}
p.c5 {text-align: center}
td.c4 {height: 270px;}
div.c3 {position: absolute; width:100%}
div.c2 {position: absolute; width: 466px; z-index: 3; height: 227px}
td.c1 {height: 237px}
/*]]>*/
</style>
</head>
<body class="lightbg" onload="MM_preloadImages('fp_images/hover_frontpage.gif','fp_images/hover_forums.gif','fp_images/hover_dkp.gif','fp_images/hover_recruitment.gif','fp_images/hover_user.gif','fp_images/hover_register.gif')">
<!-- ROLLOVER IMAGES -->
<script language="JavaScript" type="text/JavaScript">
//<![CDATA[
<!--
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_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_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><!-- END ROLLOVER IMAGES -->
<table border="0" width="100%" class="c7" cellspacing="0" cellpadding="0">
<tr>
<td class="darkbg c1" valign="bottom"></td>
</tr>
<tr>
<td class="c4" align="left" valign="top">
<div class="c2">
<div id="navcontainer"><a href="/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','/fp_images/hover_frontpage.gif',1)"><img src="/fp_images/nohover_frontpage.gif" alt="Frontpage" name="Image2" width="76" height="27" border="0" /></a><a href="/forumlist.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','/fp_images/hover_forums.gif',1)"><img src="/fp_images/nohover_forums.gif" alt="Forums" name="Image3" width="67" height="27" border="0" /></a><a href="/eqdkp/listmembers.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','/fp_images/hover_dkp.gif',1)"><img src="/fp_images/nohover_dkp.gif" alt="DKP Standings" name="Image4" width="99" height="27" border="0" /></a><a href="/forumdisplay.php?f=6" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','/fp_images/hover_recruitment.gif',1)"><img src="/fp_images/nohover_recruitment.gif" alt="Recruitment" name="Image5" width="89" height="27" border="0" /></a><a href="/usercp.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','/fp_images/hover_user.gif',1)"><img src="/fp_images/nohover_user.gif" alt="User CP" name="Image6" width="73" height="27" border="0" /></a><a href="/register.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','/fp_images/hover_register.gif',1)"><img src="/fp_images/nohover_register.gif" alt="Register" name="Image7" width="61" height="27" border="0" /></a></div>
<div><img src="/fp_images/guild_name.gif" width="465" height="227" alt="Erus Proeliator" /></div>
</div>
<div class="c3"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="500" height="254" id="News Reel"><param name="movie" value="news.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="ffffff" />
<embed src="/news.swf" quality="high" bgcolor="#FFFFFF" width="500" height="254" name="myMovieName" align="right" type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/go/getflashplayer" /></object></div>
</td>
</tr>
<tr>
<td class="c6" align="center" valign="top">
<p class="c5"></p>
</td>
</tr>
</table>
</body>
</html>


Same issue. Thanks for the help though.
shanejeffery86
03-24-2008, 06:44 PM
I have redone the coding and it now passes validation. The original issue was that the flash embed function is not "valid".

The issue with Safari is now fixed :D

Thanks for the help guys!