Can't get menu in front of swf

[Limozine]

I replaced a background image in a header with an embedded swf file. Previously, there was a horizontal menu that appeared at the bottom of the header div. Now that the swf file is in place, the menu is gone. Here's my header code:

<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1100" height="206">
<param name="movie" value="http://www.spotlessga.com/wp-content/themes/chasmogamous/images/header.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent">
<embed src="http://www.spotlessga.com/wp-content/themes/chasmogamous/images/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="1100" height="206" wmode="transparent"></embed>
</object>
<div id="menu">
<ul>
<li class="first page_item<?php if (is_home()) echo ' current_page_item'; ?>"><a href="<?php echo get_option('home'); ?>/">Home</a></li>
<?php wp_list_pages('title_li=' ); ?>
</ul>
<div id="search">
<form method="get" action="<?php bloginfo('url'); ?>/">
<fieldset>
<input id="s" type="text" name="s" value="<?php the_search_query(); ?>" />
<input id="x" type="submit" value="GO" />
</fieldset>
</form>
</div>
</div>
</div>


Here's the original CSS:


#header {
width: 1100px;
height: 206px;
margin: 0 auto;
/* background: url(images/img02.gif) no-repeat top left; */
}

/* Menu */

#menu {
width: 960px;
margin: 0 auto;
padding-bottom: 30px;
}

#menu ul {
margin: 0;
padding: 23px 0 0 28px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
padding: 0 2px 0 2px;
}

#menu li.first a{
float: left;
background: #08A24A;
padding: 9px 20px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
color: #FFFFFF;
}

#menu a {
float: left;
background: #213C9C;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 11px;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: none;
background: #08A24A;
padding: 9px 20px;
}

/* Search */

#search {
/* float: right; */
float: left;
width: 200px;
/* added */
margin-top: 20px;
}

#search form {
margin: 0 0 0 2px;
padding: 0;
/* margin-top: -10px; */
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search input {
}

#search #s {
width: 150px;
}

#search #x {
margin: 0;
padding: 0;
width: 30px;
background: #406800;
color: #FFFFFF;
}

[Eye for Video]

I'm not sure if you are meaning that the .swf has covered up the menu or that the menu just no longer appears. From what I see there is no z-indexing so I take it that the menu is to appear after (underneath) the .swf. The #menu appears to be in the #header div, correct?
#header {
width: 1100px;
height: 206px;height for header is set at 206 and the height of .swf is also 206. So where is the room for the menu? Increase the header height and that should take care of it (don't forget besides menu height, menu also has 30px padding).
Best wishes,
EfV

[Limozine]

Thanks for your help. The site is www.spotlessga.com. The menu isn't appearing at all; I would like for it to overlap the bottom of the swf, like it overlapped the identical background image before I inserted the swf.

[Eye for Video]

If I understand this correctly, when you used the background image in <header>, the only content in that div was <menu> and inside <menu> was <search>. Is that correct? the background image showed through because it was not content but background. So <menu> did not have to contend with other content in <header>. But now you have an <object> also in <header>. <object> takes up 1100 X 206 px, or the entire space of <header> (according to your CSS). There is no room to display <menu>.
To test this theory, replace the .swf with an image 1100 X 206 px and place it in <header> as content, not background. I'm pretty sure you'll see you have the same problem. Another way to test this is to increase the height of <header> by 100px or so. Give <menu> plenty of room underneath the <object>. If it shows, then there's just not enough room with 206 px height.
For 2 elements, like an <object> and a <menu> to occupy the same space at the same time, you will have to stack them using positioning and z-indexing.
http://www.w3schools.com/Css/pr_pos_z-index.asp
And Google z-indexing for more info.
With positioning and z-indexing your menu will fit inside <header> and over the top of part of the <object>. So I'd say your problem is not the .swf it's a CSS thing.
Best wishes,
EfV

[Limozine]

Your assessment of the problem is 100%...I am trying to stack the menu on top of the swf. I tried z-indexing and it didn't work, so I must have done something wrong. I guess I will take another look.