different result in safari and firefox

j2603

Registered
i am working on this site www.snapshotoftheday.com
and when I position the flash content using the absolute positioning (see the .content style), I get different results in Firefox and Safari (note the brown bar underneath the flash player in Firefox). I hate to say it but Safari behaves incorrectly comparing to Firefox and IE on windows, - it positions the flash content lower when I want it to and therefore hiding the brown bar on the background picture. is there an easy way of fixing it? if not, i could always use PHP to detect a browser and rewrite the code specifically for Safari - is that the best way of doing it? thanks.
here is the code:
<html>
<style type="text/css">
<!--
body {
background-attachment: fixed;
background-color: #CCCC33;
background-image: url(images/back_snap_shot.jpg);
background-repeat: no-repeat;
background-position: left top;
}
.content {
position: absolute;
visibility: visible;
height: auto;
width: auto;
left: 187px;
top: 168px;
}
-->
</style>
<body>
<p class="content">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="650" height="400">
<param name="movie" value="site.swf">
<param name="quality" value="high">
<embed src="site.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="650" height="400"></embed>
</object>
</p>
</body>
</html>
 
Mmm, I don't know, but I'd try dropping the height attribute. Have you had a look at http://developer.apple.com/internet/safari/safari_css.html yet? It's contains some invaluable info on CSS in Safari.

Also, try to not use <p> for absolute positioning as it might add some of its inherent features to the visual rendering of the page. "Neutral" elements like div, span etc. might be more suitable.

Good luck.
 
Back
Top