CSSがタブ付きメニューを正しく整列できない

Question

IE7でメニューを修正する手助けをしてください。

コードは次のとおりです。

<ul id="layer1"> 
<li  id="current" > 
    <span><a href="/">Главная</a></span> 
</li> 



#menu { 
margin-left:150px; 
} 
#menu ul#layer1 { 
list-style-image:none; 
list-style-position:outside; 
list-style-type:none; 
margin:0 auto; 
padding:0; 
} 
#menu ul#layer1 li { 
background:transparent url(/site_media/images/left.png) no-repeat scroll left top; 
float:left; 
margin-left:6px; 
padding-bottom:6px; 
padding-left:6px; 
padding-top:4px; 
} 
#menu ul#layer1 li span { 
background:transparent url(/site_media/images/right.jpg) no-repeat scroll right top; 
margin-right:6px; 
padding-bottom:6px; 
padding-right:6px; 
padding-top:4px; 
} 
#menu li a { 
background-color:#BF1E2D; 
color:#FFFFFF; 
padding:4px 35px 6px; 
text-decoration:none; 
} 
#menu ul#layer1 li#current span { 
background:transparent url(/site_media/images/right-gray.png) no-repeat scroll right top; 
} 
#menu ul#layer1 li#current { 
background:transparent url(/site_media/images/left-gray.png) no-repeat scroll left top; 
} 
#menu ul#layer1 li#current a { 
background-color:#E3E3E3; 
color:#BF1E2D; 
} 

あなたもここのサイトを見ることができますhttp://j-in.org.ua:9000

Answer 1

リーから上下のパディングを削除し、左のスパンをフロート：

#menu ul#layer1 li{ 
    background: url(left.png) left top no-repeat; 
    margin-left:6px; 
    padding-left: 6px; 
    float: left; 
} 

#menu ul#layer1 li span{ 
    background: url(right.jpg) right top no-repeat; 
    padding-right:6px; 
    margin-right: 6px; 
    padding-top: 4px; 
    padding-bottom: 6px; 
    float:left; 
}