I'm better about getting things to look good in IE8, FF, and Safari, but IE7 still throws curve balls at me...

Please check out this page and scroll down below the nav bar: http://rattletree.com/instruments.php

It should become obvious when viewing in FF vs IE7. For some reason the formatting of the list is pushing the list items down on the page... any tips?

<ul class="instrument">

      <li class="imagebox"><img src="/images/stuff.jpg" width="247" height="228" alt="Matepe" /></li>
      <li class="textbox"><h3>Matepe</h3><p>This text should be to the right of the image but drops below the image in IE7</p></li>
 </ul> 

css:

ul.instrument {
   text-align:left; 
     display:inline-block;

}

ul.instrument li {
   list-style-type: none;
     display:inline-block;

}

li.imagebox {
 display:inline;    
 margin:20px 0; 
 padding:0px;
 vertical-align:top;

}

li.imagebox img{
 border: solid black 1px;
}

li.textbox {
 display:inline;     
}

li.textbox p{
margin:10px;
    width:340px;
    display:inline-block;   
}