HTML5 Audio plays music but doesn't show controls in IE9

Question

Regarding the audio on this page: http://ebonytay.com/site/composer.php?clip=getOutOfTown#mediaplayer

The audio controls show up in Chrome and Safari (and in Firefox locally. I'm having problems with a specific live server working but that's irrelevant). In IE9 however, the audio control is invisible. The music is still playing and if you right click on where it's suppose to be, you can play/pause it, it just doesn't show up.

I've tried messing with the z-index. I've tried putting it outside all the divs. I've tried using src= instead of source. I've tried using controls instead of controls="controls". I've tried using the audio tag directly sourcing the file, without any PHP/Javascripting. I'm fairly new to programming so I'm sure some of the code could be written simpler, but it shouldn't be breaking anything. Any help would be appreciated.

Here is all the code for the audio player (not incl. css) on the page:

<?php 
  $song = "overtureRedRockRise"; // set to starting song
  $autoplay = ""; // disable autoplay on page load
  $totalSlides = 1; //default amount of slides
  $initialSlide = 1; //default starting slide

  // Change song to URL parameter defined by links in #clip_nav div
  if (isset($_GET["clip"])) // if URL parameter is ?clip=foo
  { 
    $song = $_GET["clip"]; // $song is foo
    $autoplay = "autoplay='autoplay'"; // enable autoplay when changing song
  } 

  // Check how many slideshow images exist for current song
  while (file_exists("../audio/filmClip_" . $song . "_" . $totalSlides . ".jpg"))
  {
    $totalSlides++;
  }
  $totalSlides--; // subtract 1 to get total number of slides for current song
  ?>

  <script>
  $(document).ready(function() {

        var currentSlide = 1; //default starting slide
        var totalSlides; //number of slides for current song
        var song; //current song
        var slideSpeed; //current slideshow speed

        // Get variables from PHP
        totalSlides = <?php echo $totalSlides ?>;
        song = "<?php echo $song ?>";

        // Setup slideshow speeds in milliseconds using JSON
        var songSpeed = 
        [
            ['overtureRedRockRise',12000],
            ['getOutOfTown',7000],
            ['canyonBaby', 5000],
            ['celestialGuides', 10000],
            ['springback', 11000],
            ['hallelujas', 10000],
            ['myOnly', 8000],
            ['selfDefense', 10000],
            ['orchestral', 10000]
        ]

        //go through each song in array
        for (i = 0; i < 9; i++)
        {
            //find the current song
            if (song == songSpeed[i][0])
            {
                //set current slideshow speed
                slideSpeed = songSpeed[i][1] + 1000; //add 1 second for loading time
            }
        }

        // Setup slideshow
        function changeSlide()
        {
            // change current slide number
            currentSlide++;

            // Loop slideshow
            if (currentSlide > totalSlides) { currentSlide = 1; }

            // Display current slide
            $('.song_image').attr('src', '../audio/filmClip_' + song + '_' + currentSlide + '.jpg');
        }   

        // If song has more than 1 image
        if (totalSlides > 1)
        {
            // Play slideshow
            setInterval(changeSlide, slideSpeed);       
        }

        // Indicate current song
        $('div.filmClip_list.'+song).addClass('currentSong');
    });
    </script>

<h2><a id="mediaplayer"> SCORE AUDIO LIBRARY</a></h2>
<div id="audio_clips">

    <!-- Song List -->
    <div id="clip_nav">
      <div class="filmClip_list overtureRedRockRise"><a href="composer.php?clip=overtureRedRockRise#mediaplayer">Overture - Red Rock Rise</a></div>
      <div class="filmClip_list getOutOfTown"><a href="composer.php?clip=getOutOfTown#mediaplayer">Get Out of Town Firehorse</a></div>
      <div class="filmClip_list canyonBaby"><a href="composer.php?clip=canyonBaby#mediaplayer">Lady Sedona Vortex</a></div>
      <div class="filmClip_list celestialGuides"><a href="composer.php?clip=celestialGuides#mediaplayer">Celestial Guides</a></div>
      <div class="filmClip_list springback"><a href="composer.php?clip=springback#mediaplayer">Springbank Park / Lawson Road</a></div>
      <div class="filmClip_list hallelujas"><a href="composer.php?clip=hallelujas#mediaplayer">Hallelujahs</a></div>
      <div class="filmClip_list myOnly"><a href="composer.php?clip=myOnly#mediaplayer">My Only</a></div>
      <div class="filmClip_list selfDefense"><a href="composer.php?clip=selfDefense#mediaplayer">Self Defense</a></div>
      <div class="filmClip_list orchestral"><a href="composer.php?clip=orchestral#mediaplayer">The Return of the Chevalier <i>(orchestral)</i></a></div>
    </div><!-- end #clip_nav-->

    <!-- Slideshow -->
    <div id="image_holder">
      <img class="song_image" src="../audio/filmClip_<?php echo $song ?>_<?php echo $initialSlide ?>.jpg" width="600" height="400" alt="Slideshow" />
    </div><!-- end #image_holder-->

    <!-- Audio -->
    <div id="audio_player">
      <audio controls="controls" preload="auto" <?php echo $autoplay ?>>
        <source src="../audio/filmClip_<?php echo $song ?>.ogg" type="audio/ogg" />
        <source src="../audio/filmClip_<?php echo $song ?>.mp3" type="audio/mpeg" />
        &nbsp;&nbsp;Your browser does not support audio. Please upgrade your internet browser to the latest version <a href="http://www.onguardonline.gov/upgrade.aspx">here</a>.
      </audio>
    </div><!-- end #audio_player -->
  </div><!-- end #audio_clips -->

Answer 1

It's this rule in style_2011.css:

body.composer audio {
    height: 32px;
    width: 100%;
}

Specifically, if you set height to 45px or more then the controls will appear.

Answer 2

Just remove the height of the audio tag.