まずは、
#image-navigation ul li a img{ border: none;}
は不要かな?
a を blockにすると、ありえないbottomが出てくるから、
#image-navigation ul li a img{ vertical-align: bottom;}
で良いと思うよ。
block の場合、a に heightも入れると確実かな。
つまり、
#image-navigation ul li a img{ border: none; vertical-align: bottom;}
ハックでもよいけどね。
----------------------------
imgじゃない場合は、
全liを一行設定にしたり、
IE7用ハックで、{ float:left;}か、zoom:1; かな
お礼
ありがとうございます! とても分かりやすく解決しました。