CSS - Css Error With Flash File

Please look at this page

http://www.tmhdesign3.com

and this one

http://www.tmhdesign3.com/real-estate-broker.asp

The first one used a flash file, the second does not.

On the first page I want the dropdown navigation to overlay on the flash but it does not. I played with z-index to no success...

So, I'm workin on a site that has a drop down menu in CSS. It worked fine when I had a banner (gif). Dropped down over the image perfectly. But now I changed the .gif to an animation and made it an .swf file. Now the drop down menu drops down behind the flash banner. How do I make the drop down appear over the swf?

Thanks.

http://www.pricedigital.com/ejs/advanced/0009/weight-loss-am-i-a-candidate-for-weight-loss-surgery.htm

Check it out in IE and then firefox. It shows up great in IE but in firefox its not hidden.

I've been looking around for hours now, and I can't find a way to get rid of a slight gap to the left of my flash nav bar (which is inserted in a nested div). Everything is centered and verticaly fluid.

code for flash div= #flash {
vertical-align: top;
margin: 0;
padding: 0;
height: 111px;
width: 875px;
}

code for centercol div= #centerCol {
margin: 0 auto;
padding: 0px;
width: 875px;
background-color: #ffffff;
height: 100%;
background:url(top_04.jpg) repeat;
}

html for embeding= <div id="centerCol">
<div id="flash"><OBJECT classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="100%" HEIGHT="100%" id="top_bar" ALIGN="center">
<PARAM NAME=movie VALUE="top_bar.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=scale VALUE=exactfit> <PARAM NAME=wmode VALUE=opaque> <PARAM NAME=bgcolor VALUE=#FFFFFF> <EMBED src="top_bar.swf" quality=high scale=exactfit wmode=opaque bgcolor=#FFFFFF WIDTH="100%" HEIGHT="100%" NAME="top_bar" ALIGN="center"
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT></div>
some content
</div>

Thanks.

I am using a basic css layout but i am having a problem when it comes to adding the flash. I need it to stay in the wrapper.here is the code im using
:-


Code:

body {
	background-image: url(bg2.jpg); font: 76% verdana,arial,tahoma,helvetica,"sans serif";
}

* {
padding: 0px;
margin: 0px;
}

HTML {
	MARGIN-BOTTOM: 1px; HEIGHT: 100%;
}

#wrapper {
	MARGIN-LEFT: auto; WIDTH: 700px; MARGIN-RIGHT: auto; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: left;
}

ul {
margin-top: 1.1em; margin-bottom: 1.1em; line-height: 130%;
}

ul li {
	padding-left: 13px; list-style-type: none; margin: 0px 0px 0.15em 1.5em; color: #327EBE;
}

a {
color: #4f9cef; text-decoration: none;
}

a:visited {
	COLOR: #FF9523; TEXT-DECORATION: none;
}

a:hover {
	COLOR: #FF9523; TEXT-DECORATION: none; border-bottom: 1px dotted #7CD300;
}

a:active {
	COLOR: #333333;
}

#img {
padding-bottom: 0px;
}

#nav {
background-image: url(gradientbg.gif); height: 34px;
padding: 0px 0px 0px 0px;
}

#navlist li {
	display: block; 
	list-style-type: none;
	padding: 0px 0px 0px 0px;
    font-weight: bolder;
    float: left;
}

#navlist a {
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 15px;
    padding: 10px 10px 10px 10px;
    font-weight: bolder;
}

#navlist li a:hover {
background-color:#FFFFFF; padding: 12px 10px 12px 10px;
font-weight: bolder;
}

#navlist a:hover {
	color: #AF9981;
    background-color: #FFFFFF;
    font-weight: bolder;
}

#col1 {
	float: left; WIDTH: 700px;
}



#col1content P {
	FONT-SIZE: 10pt; Font-family:tahoma, sans-serif; MARGIN-BOTTOM: 10px; MARGIN-LEFT: 10px; COLOR: #666666; LINE-HEIGHT: 140%; MARGIN-RIGHT: 10px; TEXT-ALIGN: justify;
}

#col1content {
	PADDING-RIGHT: 15px; PADDING-LEFT: 15px; FONT-SIZE: 12px; PADDING-BOTTOM: 15px; COLOR: #333333; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS", Tahoma;
}

#footer {
	CLEAR: both; background-color:#333333; WIDTH: 700px; HEIGHT: 65px; text-align: center; padding-top: 15px; padding-bottom: 0px; BORDER-TOP: #a4d0ed 2px solid;
}

H1 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; COLOR: #003333; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

H2 {
	PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-SIZE: 20px; PADDING-BOTTOM: 0px; COLOR: #b4aa9e; PADDING-TOP: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
}

H3 {
	FONT-SIZE: 20px; PADDING-BOTTOM: 25px; COLOR: #b4aa9e; PADDING-TOP: 25px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; padding-left: 13px;
}

#footer P {
	PADDING-LEFT: 15px; FONT-SIZE: 0.8em; PADDING-BOTTOM: 10px; COLOR: #71AB6B; PADDING-TOP: 10px; text-align: center;
}

#footer a {
	COLOR: #00cc00; text-align: center; padding-top: 10px; padding-bottom: 0px;
}

#copyright {
font-size: 0.9em; color: #FFFFFF; padding-top: 15px; padding-bottom: 7px;
}

#contentterms {
font-size: 0.8em; color: #FFFFFF;
}

It is when i add the css that it doesnt work the way it should.

How would I put the flash into column one without it messing up?

The size of the flash is the same width as the column and wrapper.

If anyone can point me in the right direction it would be very appreciated. Thanks in advance.