PDA

View Full Version : IE adding margin to Flash object... arrgh!


zahgrim
09-22-2009, 07:50 PM
Hello,

I am setting up a simple slide-show banner on a site I am building, using CSS layout.

The page works fine in FF and Safari, but when viewed in IE, it seems to be adding a left margin to the div container that the flash object resides in.

I have done extensive checking around the boards, and tried adding "text-align", "display:inline", and numerous other attribs to my CSS to resolve the issue... to no avail... I am ready to throw my PC out the window at this point!

Any suggestions would be MOST welcome! :)

The site can be found at: test.bossecopower.com (http://test.bossecopower.com)

The code is below (with the SSI snippets following):

HTML:
<!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" />
<link rel="stylesheet" href="css/master.css" type="text/css" />
<title>BOSS ecoPower</title>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body marginwidth=0 marginheight=0 topmargin=0 leftmargin=0>
<div id="header">
<hd1>BOSS ecoPower</hd1>
</div>
<div id="nav">
<ul id="MenuBar1" class="MenuBarHorizontal">
<!--#include file="menubaritems.html" -->
</ul>
</div>
<div id="body">

<div id="mainBillboard">
<!--#include file="mainBillboard.html" -->
</div>

<div id="newsBox">
<h1>Headlines</h1>
<img src="images/Headlines.png" width="350" height="75" />
<!--#include file="text/HeadlineNewsText.html" -->
</div>

<div id="mainContent">
<h1>Welcome</h1>
<img src="images/WelcomeMat.png" width="375" height="75" />
<p>Welcome to BOSS ecoPower, Ontario's premiere provider of alternative energy solutions for businesses and homes.</p>
<p>Our site is intended to provide our clients and prospective clients with information on our product lines, green initiatives, and other important news about our company.</p>
<p>Please take a tour of our site at your leisure, and should you have any questions, comments, or require any additional assistance, don't hesitate to contact us.</p>
</div>

<div id="mainContent">
<h1>Reference</h1>
<img src="images/Reference.png" width="375" height="75" />
<p>If you are interested in learning more about alternative energy technologies, we recommend you take a look at the following:</p>
<p><a href="#">Solar Water Heating Basics</a> | <span class="newsBoxDate">Web page</span></p>
<p><a href="#">Pressurized vs. Non-Pressurized</a> | <span class="newsBoxDate">White Paper</span></p>
<p><a href="#">Advantages of tube-based systems</a> | <span class="newsBoxDate">Web page</span></p>
<p><a href="#">Hybrid Systems</a> | <span class="newsBoxDate">Technical Specs</span></p>
</div>

</div>

<div id="footer" class="footerText">Copyright 2009 BOSS ecoPower, All Rights Reserved
</div>


<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
CSS
@charset "utf-8";
/* Master CSS Document */

/* Class Styles */
/* Establish base design elements and zero margins and paragraph spacing */
body{
margin: 0;
padding: 0;
background-color: #000;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#666666;
}
p {
margin-top:0 ;
margin-bottom:0;
}
h1, h2, h3, h4, h5, h6 {
margin:0 ;
}
a {
text-decoration: none;
}

a:link {color:#03F} /* unvisited link */
a:visited {color:#09F} /* visited link */
a:hover {color:#900} /* mouse over link */
a:active {color:#0000FF} /* selected link */

/* Setup base container common layout options */
#header, #body, #footer, #nav {
width: 800px;
margin-right: auto;
margin-left: auto;
}

/* Setup base container layout and design elements */
#header {
background-image:url(../images/header.png);
margin-top:20px;
height:75px;
}
#body {
background-image:url(../images/body.png);
background-repeat:repeat-y;
padding-top:10px;
padding-bottom:40px;
overflow:auto;
}
#footer {
background-image:url(../images/footer.png);
background-repeat:no-repeat;
height:30px;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:60%;
text-align:center;
}
#nav {
background-color:#5c743d;
height:27px;
}

/*HEADER Containers, layout, and styles */
#header hd1 {
display:none;
}

/*FOOTER Containers, layout, and styles */
.footerText {
padding-top:20px;
}

/*BODY Containers, layout, and styles */
#mainBillboard{
width:750px;
padding-left:25px;
padding-right:25px;
}

#mainContent {
margin-left:25px;
margin-right:400px;
margin-top:15px;
padding: 0px 0px 15px 0px;
outline:1px solid #5c743d;
}
#mainContent h1 {
background-image:url(../images/mainContentH1Bullet.png);
background-repeat:no-repeat;
background-position:0% 50%;
color: #5c743d;
letter-spacing:0.05em;
font-size: 16px;
font-weight: bold;
text-indent:30px
}
#mainContent p {
color:#666666;
margin-top:10px;
padding: 0px 5px 0px 5px;
text-align:justify;
font-size: 12px;
font-weight: normal;
}

#newsBox{
font-size: 12px;
padding: 0px 0px 15px 0px;
margin-right:25px;
margin-left:20px;
margin-top:15px;
float: right;
display:inline;
width: 350px;
position: relative;
background-color: #e8f2d8;
outline:1px solid #5c743d;
clear: both;
}
#newsBox h1 {
background-image:url(../images/mainContentH1Bullet.png);
background-repeat:no-repeat;
background-position:0% 50%;
color: #5c743d;
letter-spacing:0.05em;
font-size: 16px;
font-weight: bold;
text-indent:30px
}
#newsBox h2 {
padding: 8px 5px 0px 5px;
color: #007CC3;
font-size: 12px;
letter-spacing: .1em;
text-align: left;
}
#newsBox h3 {
color: #993300;
font-size: 10px;
text-align: left;
letter-spacing:.2em;
padding-left: 8px;

}
#newsBox p {
color: #333;
font-size: 11px;
text-align: justify;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
}



/* Misc */


.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}Included HTML (Version checking and embedding Flash)
<!-- saved from url=(0013)about:internet -->
<script language="JavaScript" type="text/javascript">
<!--
//v1.7
// Flash Player Version Detection
// Detect Client Browser type
// Copyright 2005-2008 Adobe Systems Incorporated. All rights reserved.
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false;
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false;
function ControlVersion()
{
var version;
var axo;
var e;
// NOTE : new ActiveXObject(strFoo) throws an exception if strFoo isn't in the registry
try {
// version will be set for 7.X or greater players
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");
version = axo.GetVariable("$version");
} catch (e) {
}
if (!version)
{
try {
// version will be set for 6.X players only
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");

// installed player is some revision of 6.0
// GetVariable("$version") crashes for versions 6.0.22 through 6.0.29,
// so we have to be careful.

// default to the first public version
version = "WIN 6,0,21,0";
// throws if AllowScripAccess does not exist (introduced in 6.0r47)
axo.AllowScriptAccess = "always";
// safe to call for 6.0r47 or greater
version = axo.GetVariable("$version");
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 4.X or 5.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = axo.GetVariable("$version");
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 3.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash.3");
version = "WIN 3,0,18,0";
} catch (e) {
}
}
if (!version)
{
try {
// version will be set for 2.X player
axo = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
version = "WIN 2,0,0,11";
} catch (e) {
version = -1;
}
}

return version;
}
// JavaScript helper required to detect Flash Player PlugIn version information
function GetSwfVer(){
// NS/Opera version >= 3 check for Flash plugin in plugin array
var flashVer = -1;

if (navigator.plugins != null && navigator.plugins.length > 0) {
if (navigator.plugins["Shockwave Flash 2.0"] || navigator.plugins["Shockwave Flash"]) {
var swVer2 = navigator.plugins["Shockwave Flash 2.0"] ? " 2.0" : "";
var flashDescription = navigator.plugins["Shockwave Flash" + swVer2].description;
var descArray = flashDescription.split(" ");
var tempArrayMajor = descArray[2].split(".");
var versionMajor = tempArrayMajor[0];
var versionMinor = tempArrayMajor[1];
var versionRevision = descArray[3];
if (versionRevision == "") {
versionRevision = descArray[4];
}
if (versionRevision[0] == "d") {
versionRevision = versionRevision.substring(1);
} else if (versionRevision[0] == "r") {
versionRevision = versionRevision.substring(1);
if (versionRevision.indexOf("d") > 0) {
versionRevision = versionRevision.substring(0, versionRevision.indexOf("d"));
}
}
var flashVer = versionMajor + "." + versionMinor + "." + versionRevision;
}
}
// MSN/WebTV 2.6 supports Flash 4
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.6") != -1) flashVer = 4;
// WebTV 2.5 supports Flash 3
else if (navigator.userAgent.toLowerCase().indexOf("webtv/2.5") != -1) flashVer = 3;
// older WebTV supports Flash 2
else if (navigator.userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 2;
else if ( isIE && isWin && !isOpera ) {
flashVer = ControlVersion();
}
return flashVer;
}
// When called with reqMajorVer, reqMinorVer, reqRevision returns true if that version or greater is available
function DetectFlashVer(reqMajorVer, reqMinorVer, reqRevision)
{
versionStr = GetSwfVer();
if (versionStr == -1 ) {
return false;
} else if (versionStr != 0) {
if(isIE && isWin && !isOpera) {
// Given "WIN 2,0,0,11"
tempArray = versionStr.split(" "); // ["WIN", "2,0,0,11"]
tempString = tempArray[1]; // "2,0,0,11"
versionArray = tempString.split(","); // ['2', '0', '0', '11']
} else {
versionArray = versionStr.split(".");
}
var versionMajor = versionArray[0];
var versionMinor = versionArray[1];
var versionRevision = versionArray[2];
// is the major.revision >= requested major.revision AND the minor version >= requested minor
if (versionMajor > parseFloat(reqMajorVer)) {
return true;
} else if (versionMajor == parseFloat(reqMajorVer)) {
if (versionMinor > parseFloat(reqMinorVer))
return true;
else if (versionMinor == parseFloat(reqMinorVer)) {
if (versionRevision >= parseFloat(reqRevision))
return true;
}
}
return false;
}
}
function AC_AddExtension(src, ext)
{
if (src.indexOf('?') != -1)
return src.replace(/\?/, ext+'?');
else
return src + ext;
}
function AC_Generateobj(objAttrs, params, embedAttrs)
{
var str = '';
if (isIE && isWin && !isOpera)
{
str += '<object ';
for (var i in objAttrs)
{
str += i + '="' + objAttrs[i] + '" ';
}
str += '>';
for (var i in params)
{
str += '<param name="' + i + '" value="' + params[i] + '" /> ';
}
str += '</object>';
}
else
{
str += '<embed ';
for (var i in embedAttrs)
{
str += i + '="' + embedAttrs[i] + '" ';
}
str += '> </embed>';
}
document.write(str);
}
function AC_FL_RunContent(){
var ret =
AC_GetArgs
( arguments, ".swf", "movie", "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
, "application/x-shockwave-flash"
);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_SW_RunContent(){
var ret =
AC_GetArgs
( arguments, ".dcr", "src", "clsid:166B1BCA-3F9C-11CF-8075-444553540000"
, null
);
AC_Generateobj(ret.objAttrs, ret.params, ret.embedAttrs);
}
function AC_GetArgs(args, ext, srcParamName, classid, mimeType){
var ret = new Object();
ret.embedAttrs = new Object();
ret.params = new Object();
ret.objAttrs = new Object();
for (var i=0; i < args.length; i=i+2){
var currArg = args[i].toLowerCase();
switch (currArg){
case "classid":
break;
case "pluginspage":
ret.embedAttrs[args[i]] = args[i+1];
break;
case "src":
case "movie":
args[i+1] = AC_AddExtension(args[i+1], ext);
ret.embedAttrs["src"] = args[i+1];
ret.params[srcParamName] = args[i+1];
break;
case "onafterupdate":
case "onbeforeupdate":
case "onblur":
case "oncellchange":
case "onclick":
case "ondblclick":
case "ondrag":
case "ondragend":
case "ondragenter":
case "ondragleave":
case "ondragover":
case "ondrop":
case "onfinish":
case "onfocus":
case "onhelp":
case "onmousedown":
case "onmouseup":
case "onmouseover":
case "onmousemove":
case "onmouseout":
case "onkeypress":
case "onkeydown":
case "onkeyup":
case "onload":
case "onlosecapture":
case "onpropertychange":
case "onreadystatechange":
case "onrowsdelete":
case "onrowenter":
case "onrowexit":
case "onrowsinserted":
case "onstart":
case "onscroll":
case "onbeforeeditfocus":
case "onactivate":
case "onbeforedeactivate":
case "ondeactivate":
case "type":
case "codebase":
case "id":
ret.objAttrs[args[i]] = args[i+1];
break;
case "width":
case "height":
case "align":
case "vspace":
case "hspace":
case "class":
case "title":
case "accesskey":
case "name":
case "tabindex":
ret.embedAttrs[args[i]] = ret.objAttrs[args[i]] = args[i+1];
break;
default:
ret.embedAttrs[args[i]] = ret.params[args[i]] = args[i+1];
}
}
ret.objAttrs["classid"] = classid;
if (mimeType) ret.embedAttrs["type"] = mimeType;
return ret;
}
// -->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Revision of Flash required
var requiredRevision = 124;
// -----------------------------------------------------------------------------
// -->
</script>
<!--url's used in the movie-->
<!--text used in the movie-->
<script language="JavaScript" type="text/javascript">
<!--
var hasRightVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if(hasRightVersion) { // if we've detected an acceptable version
// embed the flash movie
AC_FL_RunContent(
'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0',
'width', '750',
'height', '300',
'src', 'mainBillboard',
'quality', 'high',
'pluginspage', 'http://www.adobe.com/go/getflashplayer',
'align', 'middle',
'play', 'true',
'loop', 'true',
'scale', 'noscale',
'wmode', 'opaque',
'devicefont', 'false',
'id', 'mainBillboard',
'bgcolor', '#ffffff',
'name', 'mainBillboard',
'menu', 'false',
'allowFullScreen', 'false',
'allowScriptAccess','sameDomain',
'movie', 'mainBillboard',
'salign', 'center'
); //end AC code
} else { // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here.'
+ 'This content requires the Adobe Flash Player.'
+ '<a href="http://www.adobe.com/go/getflashplayer/">Get Flash</a>';
document.write(alternateContent); // insert non-flash content
}
// -->
</script>
<noscript>
This content requires the Adobe Flash Player.
<a href="http://www.adobe.com/go/getflashplayer/">Get Flash</a>
</noscript>

m1a2x3x7
09-22-2009, 08:55 PM
try removing both padding-left and padding-right on #mainBillBoard and adding margin:auto;

zahgrim
09-23-2009, 01:49 AM
You are my new best friend!!!! IT WORKED!

I tried every combination of margin: and padding: and so forth you can imagine.. EXCEPT that one...

I was so stymied by this; and so simple! Thanks SOOOO much.

Any idea why the margin-left/right and padding attribs didn't work? All that matters is that it works now, but I must admit I am curious...

Thanks again m1a2x3x7!!!!