Why is this unordered list formatting differently in IE7?

Question

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;   
}

Answer 1

basically this line ul.instrument li { is overiding li.imagebox etc.

so what you can do is this:

CSS:

ul.instrument {
    text-align:left; 
    display:inline-block;
}
ul.instrument li {
    list-style-type: none;
    display:inline-block;
}
ul.instrument li.imagebox {
    display:inline;    
    margin:20px 0; 
    padding:0px;
    vertical-align:top;
}
ul.instrument li.imagebox img{
    border: solid black 1px;
}
ul.instrument li.textbox {
    display:inline;     
}
ul.instrument li.textbox p{
    margin:10px;
    width:340px;
    display:inline-block;   
}

Basically what I did, instead of declaring li.imagebox I used ul.instrument li.imagebox so that it won't be overide by this declaration ul.instrument li

Hope this helps :)

Edit, here's another take but this approach is different it uses float

CSS:

ul, li, h3, p { margin: 0; padding: 0 }
ul, li { list-style: none }
ul.instrument { overflow: hidden}
ul.instrument li, ul.instrument li img { float: left; }
ul.instrument li.imagebox { margin:20px 0;  }
ul.instrument li.imagebox img { border: 1px solid black }
ul.instrument li.textbox p { margin: 10px; width: 340px }

but this one works in all browsers, I promise :D. Basically the first 2 lines resets the elements you used so that it will look the same in all browser.