IE7 padding problem

[Yueee]

I don't why the padding doesn't work on IE7...I want some space between those flags on the right upper corner the the main board. 

 

Link: www.boolify.org/test (problem only shows in IE7)

 

Codes:

<div id="language">
        <ul>
            <li><span>Text</span></li>
            <li> </li>
            <li><a href="javascript:void(0);" id="americaFlag"><img src="images/flag-usa.png" alt="" /></a></li>
            <li><a href="javascript:void(0);" id="mexicoFlag"><img src="images/flag-mex.png" alt="" /></a></li>
            <li><a href="javascript:void(0);" id="swedenFlag"><img src="images/flag-swe.png" alt="" /></a></li>
        </ul>
    </div>

 

CSS:

#main {width:1004px; margin:0 auto;}
#main #language {height:32px;}
#main #language ul {float:right; list-style:none; padding:5px 10px 0 0;}
#main #language ul li {float:left; padding:0 5px 0 0; line-height:20px;}
#main #language ul li a {font-size:12px; font-weight:bold; color:#080909; text-decoration:underline; padding-bottom: 2px;}
#main #language ul li a:hover {text-decoration:none;}
#main #language ul li a img {border:none;}

 

No matter how I changed the padding bottom values of <ul> tag, nothing happened.  why? :'(

[Yueee]

Here is a pic showing the problelm

 

[attachment deleted by admin]