HTML div over flash??? [Archive]

gibry21

November 23rd, 2009, 12:30 PM

I have been hunting around for a solution to this....and everywhere keeps pointing the wmode transparent solution....but its not happening!! Everything is fine in FF and opera....but no deal in IE 8. (or perhaps others).

What am I doing wrong...is it my css??

Please help.

<body class="oneColLiqCtr">

<div id="container">
<div id="mainContent">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="526" id="FlashID" title="Merry Christmas from Streetwise Systems">
<param name="movie" value="flash/streetwise.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="6.0.65.0" />

<param name="expressinstall" value="../Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="flash/streetwise.swf" width="800" height="526">

<param name="quality" value="high" />
<param name="wmode" value="opaque"/>
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="../Scripts/expressInstall.swf" />

<div>
<img src="images/streetwise_eCard.jpg" />
<h4>Get the full experience with Flash Player</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>

</object>

</object>
<div id="comp_button">
<a href="http://www.streetwisesystems.com">Click to enter</a>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>

@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000B93;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}
.oneColLiqCtr #container {
width: 800px; /* this will create a container 80% of the browser width */
height:526px;
background: #FFFFFF;
margin: 30px auto; /* the auto margins (in conjunction with a width) center the page */
text-align: centre; /* this overrides the text-align: center on the body element. */

}

.oneColLiqCtr #mainContent {
background-color:#FFF;
padding: 0 0; /* remember that padding is the space inside the div box and margin is the space outside the div box */
float:left;
border: 5px solid #FFF;
}

.oneColLiqCtr #mainContent h4{
display:block;
width:200px;
font-size: 0.6em;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
color:#333;
}

.oneColLiqCtr #mainContent img{
border:none;
}

#text {
margin: 20px auto;
width: 800px;
color: #060;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size:1.4em;
}

#text a:link {
text-decoration:none;
color: #060;
font-weight:bold;
}

#text a:hover {
text-decoration:none;
color: #999;
font-weight:bold;
}

#text a:visited {
text-decoration:none;
color:#060;
font-weight:bold;
}

.bold {
font-weight: bold;
}

/*The form*/

.form {
height:122px;
text-align:center;
margin:20px 0 0 0;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color:#060;

}

.answer {
padding-left:8px;
}

div.closing {
width:250px;
float:left;
text-align:left;
padding-left:40px;
position:absolute;
bottom:0;
padding-bottom:20px;
}

div.closing p {
font-size:12px;
}
div.closing p.date {
font-size:16px;
font-weight:bold;
padding:0;
margin:0;
}

p.email {

}

.answers {
font-size:100%;
text-align:center;
}

a {
color:#CCC;
}

span.date {
font-weight:bold;
font-size:100%;
}

#answer1 {
/*background-color:#2c0026;*/
color: #333;
border:#542085 solid 1px;
font-size:110%;
width:200px;
}

#answer2 {
/*background-color:#2c0026;*/
color:#333;
border:#542085 solid 1px;
font-size:110%;
width:200px;
}

#answer3 {
/*background-color:#2c0026;*/
color:#333;
border:#542085 solid 1px;
font-size:110%;
width:200px;
}

, .answers input{
vertical-align:middle;

}

p.email input {
color:#333;
border:#542085 solid 1px;
font-size:110%;
width:200px;
}

#choices ul {
list-style: none;
}

#choices li {
display:inline;
padding: 0 10px 0 10px;
color: #542085;
}

#choices_table {
color: #542085;
margin: 20px auto;
}

#comp_button {
position:absolute;
width:250px;
height:75px;
float:left;
z-index:99999;
color:#F00;
margin: -170px 0 0 380px;
text-indent:-10000px;
}

#comp_button a{
display:block;
width:250px;
height:75px;
text-indent:-10000px;
overflow:hidden;
}

Do i need the float?

simplistik

November 23rd, 2009, 01:13 PM

you need z-index:
http://www.kirupa.com/forum/showthread.php?t=336140&highlight=z-index
http://www.kirupa.com/forum/showthread.php?t=332432&highlight=z-index

idark

November 23rd, 2009, 04:12 PM

<param name="wmode" value="opaque"/>
change this ^ to

<param name="wmode" value="transparent"/>
after the IE conditional comment.

If not check out my site grazdesigns.com where I used ALOT of divs over flash.

gibry21

November 25th, 2009, 09:09 AM

Do I need to set the z index of the div containing the flash and the div containing the over laid div.

In my example I have set the z index of the button to 99999, surely this should put it on top without setting the z index of the flash div to 0 or -1?

simplistik

November 25th, 2009, 04:15 PM

position has to be defined, as mentioned in the links provided

gibry21

December 6th, 2009, 05:21 PM

Thanks for the advice guys,

after setting the z index and relative position of both divs it seems to work fine.

One problem tho...

When I preview from DW everything works fine both in FF and IE, I have uploaded the whole site...but the flash isnt showing on the live site...just nothing at all....

Any ideas?

cheers

padmanaban

December 11th, 2009, 09:08 AM

Its really a nice discussion to read. Both the questions and answers are fine.
I always use
<param name="wmode" value="transparent"> in the Object tag

and

wmode="transparent" in the embed tag