PDA

Click to See Complete Forum and Search --> : Center object both in FF and IE



Calenulma
04-17-2007, 07:04 PM
Hi!
I have my site (http://www.calenulmadesigns.com) as a flash object (760*420) centered in a .html file.
So, as for FireFox, Safari, Camino, you name it, it comes OK but in InternetExplorer the object expands and takes on the full browsser window size.

Does anyone know how to fiz it?


Thank you on advance,
Calenulma

1stbite
04-18-2007, 02:58 AM
try setting your OBJECT element height and width to

width="760" height="420"

currently it is 100% x 100%

Calenulma
04-18-2007, 06:38 AM
Well, it works (can't remember why I stuck with the 100% there, I guess I just tried everything I could...).
Thanks!

Now, the site just looks REALLY bad with a frame around the swf object (it goes away once you clink on in).
Anyway to remove it?

here's a screenshot (http://www.calenulmadesigns.com/dropbox/frame.PNG)

rdoyle720
04-18-2007, 11:49 AM
That's due to changes Microsoft made to IE from a lawsuit they lost. There's LOTS of posts about it here and all around the web. Basically you need to use Javascript to put the movie into the page. The most popular choice around here is SWFObject: http://blog.deconcept.com/swfobject/

Calenulma
05-15-2007, 09:59 AM
Well, many sites before, I got rid of the frame but now the vertical alignment does not take effect...

Any ideas?


here's the site (http://www.calenulmadesigns.com)

sticks464
05-15-2007, 10:59 AM
I just looked at it in FF ,IE6 and IE7 and it looks fine to me.
Sorry didn't see the vertical alignment issue.Give me a few and I'll have something.


<!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-Type" content="text/html; charset=UTF-8" />
<title>calenulmadesigns.com :: desenvolvimento e cria��o de imagem</title>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<style type="text/css">
* {
margin:0;
paddinf:0;
}

#middle {
width:760px;
height:420px;
position:absolute;
top:50%;
left:50%;
margin:-210px -360px;/*-Negative margins equal to half the size of the container width and height-*/
}
</style>
</head>

<body>
<div id="middle">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','...','width','760','height','420','src ','arquivoFlash','quality','high','vertical-align','center',
'pluginspage','...','movie','index' ); //end AC code
</script>
<noscript>
<object width="760" height="420" align="absmiddle" valign="middle" scale="noborder"...>
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<embed src="index.swf" width="760" height="420" align="middle" valign="middle" quality="high"...></embed>
</object>
</noscript>
</div>
</body>
</html>

This should align it horizontal and vertical center. And got rid of that awful tables.

Calenulma
05-15-2007, 03:53 PM
Man, it looks perfect under IE but... can't work under Safari nor Firefox... :S


-------------------- EDIT -------------------

Man, with your tips and some other from other sites, I've finally managed to make it work in Safari, Firefox and IE! FINALLY!

Here's the code:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="KEYWORDS" content="lino sousa, arte, pintura, logotipos, telas, venda, capas, arte">
<title>calenulmadesigns.com :: desenvolvimento e cria&ccedil;&atilde;o de imagem :: design grafico :: webdesign :: calenulma</title>
<style type="text/css">
<!--
.style1 {
font-size: 1px;
color: #FFFFFF;
}
.style5 {font-size: 1px}
body {
margin-top: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="center" bgcolor="#FFFFFF" class="style5"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','760','heigh t','420','src','index','quality','high','pluginspa ge','http://www.macromedia.com/go/getflashplayer','movie','index' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="760" height="420">
<param name="movie" value="index.swf">
<param name="quality" value="high">
<embed src="index.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="760" height="420"></embed>
</object></noscript></td>
</tr>
</table>
</body>
</html>

sticks464
05-15-2007, 05:00 PM
Reapply your DocType to it. Without it it won't validate (13 errors). The doctype should correct all these errors. The DocType also keeps IE out of Quirks mode and will keep it from rendering differently in browsers.

Calenulma
05-16-2007, 06:08 AM
RRRRRRR! I'm just going to have 2 separate html's:
One for IE and another for any other browser. A simple browser detector should do it, I think.