CSS UL LI とlist-style-position

IEだけならいいのですが、firefoxなども対象にすると結構てこずるのです。

■list-style-positionの特徴

IEだとLIタグをfloatすると、途端にデフォルトで表示される中黒がなくなります。
firefoxだと残ります。

■list-style-positionの注意

list-style-positionを使用するときは必ず outside　を指定。
insideだとIEとfirefoxの違いで苦しみます。

list-style-type　ですが、LIをfloatさせるとIE6.7ともに表示できなくなるようです。

text-indentは、ULや親タグに設定するとLI項目がすべてインデントされます。

結局、文法的には推奨されないようですが、ULの上にdivタグなどを打つとカスタマイズしやすくなるらしく、というかしないと結構できない。

ソース一例:フッター部分

#footer {
background-image: url(../image/footer.gif);
background-repeat: no-repeat;
background-color:red;
height: 90px;
padding-top:162px;
background-color: #CCCCCC;
clear: both;
padding-left:80px;
background-position: center top;
}
#footer-one{
display:inline;
}
#footer-one li {
float:left;
list-style-position: outside;
list-style-type: none;
background-image: url(../image/foot_img.gif);
background-repeat: no-repeat;
background-position: left;
text-indent:15px;
display:block;
font-size: 10px;
}
#footer-one li a{
text-decoration: none;
}
#footer-two{
clear:both;
display:inline;
}
#footer-two li {
float:left;
list-style-position: outside;
list-style-type: none;
display:block;
font-size: 10px;
letter-spacing:1px;
padding-top:10px;
padding-bottom:10px;
text-decoration: none;
}
#footer-two li a{
text-decoration: none;

}
#footer-three{
clear:both;
display:block;
text-decoration: none;

}