Div over flash?

1

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" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="../Scripts/expressInstall.swf" />
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="flash/streetwise.swf" width="800" height="526">
      <!--<![endif]-->
      <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" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <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>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
  <div id="comp_button">
        <a href="http://www.streetwisesystems.com">Click to enter</a>
    </div>
  </div>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</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?