4 replies [Last post]
JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 8 years 11 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

I have a 3 column layout (3 divs side by side left to right) with a Flash movie in the center div. The movie has a blank area in the top half where I want to position a text div over it. I can't get them to line up and the text div won't z on top. Can someone give me some pointers?

Thanks

Jack A

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 27 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Read the

Life's a b*tch and then you die!

JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 8 years 11 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

Validated, showing the problem in IE6

OK, I have validated and here is the link:
http://streampowerteam.com
and
http://streampowerteam.com/css
The problem remaining seems to be the center text div that is now hidden behind the "intro" div. Needs to be on top.
Thanks.

Jack A

sticks464
Offline
Enthusiast
Topeka, KS.
Last seen: 11 years 9 weeks ago
Topeka, KS.
Timezone: GMT-6
Joined: 2006-10-18
Posts: 116
Points: 71

I reworked your markup and

I reworked your markup and put things in the right order, narrowed down the css and it works in IE6 and 7, Opera and FF. I also am including the js to make it work in IE. To get the over_intro to look like you want, change the background color to the background color of the flash and remove the border on the bottom.

HTML

Steam

Welcome to the team training and support site of the greatest residual income opportunity ever -- Ignite and Stream Energy

AC_FL_RunContent( 'type','application/x-shockwave-flash','data','relasticFlame_300_450.swf?path=relasticFlame_300_450.swf','width','300','height','450','movie','relasticFlame_500_350?path=relasticFlame_500_350.swf' ); //end AC code





css
/* CSS Document */

* {
margin:0;
padding:0;
}

html, body{
margin:0;
padding:0;
text-align:center;
background:#333333;
font-size: 1.1em;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#left_nav, #right_nav, p, a {
color:#FFFFAA;
margin-bottom:10px;
}

#container {
width:684px;
border: 10px solid #FFFFAA;
background-color: #C18749;
text-align:left;
margin-top: 25px;
margin-left:auto;
margin-right:auto;
}

#main {
width:300px;
margin:0 auto;
float:left;
border-left: 2px solid #FFFFAA;
border-right: 2px solid #FFFFAA;
}

#over_intro {
width: 240px;
margin:0 auto 0 auto;
padding:20px 0;
}

#left_nav {
padding: 20px;
float: left;
width: 150px;
}

#intro {
width: 300px;
border-top:2px solid #FFFFAA;
}

#right_nav {
padding: 20px;
float: right;
width: 150px;
}

#footer{
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
color: #FFFFAA;
height: 25px;
width: 684px;
text-align: center;
vertical-align: middle;
background-color:#0F0C0C;
clear:both;
}

js (AC_RunActiveContent.js)
//v1.7
// Flash Player Version Detection
// Detect Client Browser type
// Copyright 2005-2007 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 += '';
for (var i in params)
{
str += ' ';
}
str += '';
}
else
{
str += ' ';
}

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;
}

JackyBoy
Offline
Enthusiast
Dallas Texas USA
Last seen: 8 years 11 weeks ago
Dallas Texas USA
Timezone: GMT-6
Joined: 2007-01-20
Posts: 79
Points: 2

Thanks very much but---

I have to ask, is there a pure css solution for something like this? I know nothing about js, but I could have done this in a table in less than an hour. I was hoping for a pure css solution that I could replicate and learn more about css. Can you tell me why the bg color and the border of the over_intro makes it work? I really appreciate your help.
Jack

Jack A