<li>の先頭に出るスペースの埋め方を教えてください！

締切済

質問者：cyon905
質問日時：2007/12/10 09:20
回答数：2件

DWを使いリストでロールオーバリンクするメニューを作っているのですが、どういうわけか最初の<li>の前に大きなスペースが出てしまします。また、FireFoxで確認をすると、メニューが入っているdiv(#navigation)の上に空白が出来てしまいます。この問題を解決するにはどうすればいいのでしょうか？

ちなみにHTMLは↓
<body>
<div id="all">
<div id="header"></div>
<div id="navigation">
<ul class="sample">
<li><a href="#" class="sample">top</a></li>
<li><a href="#" class="sample">top</a></li>
<li><a href="#" class="sample">top</a></li>
<li><a href="#" class="sample">top</a></li>
<li><a href="#" class="sample">top</a></li>
<li><a href="#" class="sample">top</a></li>
</ul>
</div>
<div id="main"></div>
<div id="main2"></div>
<div id="footer"></div>
</div>
</body>
----------------------------
そしてスタイルシートは↓
#all {
background-color: #00FF00;
width: 750px;
position: relative;
height: auto;
margin-right: auto;
margin-left: auto;
}
#navigation {
background-color: #FF0000;
height: 50px;
width: 750px;
position: relative;
clear: right;
}
#main {
height: 270px;
width: 750px;
position: relative;
background-color: #FFFF99;
}
#footer {
background-color: #999999;
height: 50px;
width: 750px;
position: relative;
clear: right;
}
#ul.sample {
width: 100%;
}

#header {
background-color: #999933;
height: 200px;
width: 750px;
position: relative;
clear: left;
}
a.sample {
text-align: center;
font-family: "ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
font-size: 16px;
text-decoration: none;
color: #FFFFFF;
background-image: url(img/blue-spy.JPG);
height: 35px;
width: 125px;
padding-top: 15px;
float: left;
}
a:hover.sample {
background-image: url(img/sky.jpg);
}

ul.sample li {
list-style-type: none;
float: left;
}
#navigation li {
float: left;
height: 50px;
width: 125px;
}
です。
本当に困っています。分かる方いましたらぜひ教えて頂けませんでしょか？