Need help positioning Audio Player plugin in header

Hi, I’m hoping someone can take a look at my code and help me out.

I’ve added the WP Audio Player to my Header, below a ‘Featured Content Gallery’ plugin that I successfully replaced my header with.

It looks OK in Chrome and Firefox. However, in Explorer (8), white spaces show up above and below the media player.

This is probably because I have no idea what I’m doing, and just played around till it showed up in the right place, then positioned it with a workaround: The size of the Gallery Header should actually be 325px, but when it was left at 325px and I added the Audio Player, there were big white spaces above and below the player. So, as you’ll see in the code below, I’ve made the Gallery 298px, then dropped the Audio Player down 14px to cover the bottom white gap.

How can I code this properly? (By the way, I’m using a custom theme someone made, that I believe was based on the Kubrick theme).

The site is at http://alex-lambert.com

Thanks in advance for your help!

Here’s the code. I’m including everything from the Header down to the Navigation Menu, because there is also a “logo” that was hidden behind the Header to begin with – have no idea what it does or if it’s affecting things.

Stylesheet code:

/* begin Header */

div.art-Header
{
	margin: 0 auto;
	position: relative;
	z-index:0;
	width: 850px;
	height: 298px;
}

/* end Header */

/* begin Audioplayer */

div.art-Audioplayer
{
  position:relative;
  top:12px
}

/* end Audioplayer*/

/* begin Logo */
.art-Logo
{
	display : block;
	position: absolute;
	left: 11px;
	top: 45px;
	width: 829px;
}

h1.art-Logo-name
{
	display: none;
	text-align: center;
}

h1.art-Logo-name, h1.art-Logo-name a, h1.art-Logo-name a:link, h1.art-Logo-name a:visited, h1.art-Logo-name a:hover
{
font-family: Verdana, Geneva, Arial, Helvetica, Sans-Serif;
font-size: 26px;
font-style: normal;
font-weight: bold;
text-decoration: none;
	padding:0;
	margin:0;
	color: #1B517E !important;
}

.art-Logo-text
{
	display: none;
	text-align: center;
}

.art-Logo-text, .art-Logo-text a
{
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
	padding:0;
	margin:0;
	color: #3D3E3E !important;
}
/* end Logo */

/* begin Menu */

Header:

<div class="art-Header">
<?php include (ABSPATH . '/wp-content/plugins/featured-content-gallery/gallery.php'); ?></div>

<div class="art-Audioplayer">
<?php if (function_exists("insert_audio_player")) {
  insert_audio_player("[audio:http://alex-lambert.com/wp-content/uploads/2010/10/I-Didnt-Know.mp3,http://alex-lambert.com/wp-content/uploads/2010/10/Alex-Lambert-Imperfectly-Perfect-Demo.mp3,http://alex-lambert.com/wp-content/uploads/2010/10/Untouchable.mp3,http://alex-lambert.com/wp-content/uploads/2010/10/Dream-With-My-Eyes-Open.mp3|loop=yes]");
 } ?></div>

<div class="art-Logo">
    <h1 id="name-text" class="art-Logo-name">
        <a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <div id="slogan-text" class="art-Logo-text">
        <?php bloginfo('description'); ?></div>

</div>

<div class="art-nav">