【CSS】float横並びメニューに余白ができてしまいます

リストをfoat:leftさせ横並びのメニューを作っています．下記画像の赤枠の幅に（包含されているdivのボーダーを赤線にしています）メニューをぴったり収めたいのですが，左右に余白ができてしまいます．
いろいろネット等で調べてみましたが原因がわかりません．ご教授よろしくおねがいします．
------CSSソース-----------------------------------------------------
/*グローバルナビゲーション */
.globalnavi{
width:770px;
　　height:30px;
　　margin:0;
　　padding:0;
border:1px solid #cc0000;
}

.gloabalnavi ul{
height:30px;
margin:0;
padding:0;
background:#ffffff;
list-style:none;
}

.globalnavi li{
float:left;
margin:0;
padding:0;
}

.globalnavi span{
display:none;
}

.globalnavi a{
height:30px;
display:block;
background-repeat:no-repeat;
}

li#m1{
width:154px;
background-image:url(../image2/menu1.gif);
background-position:0px -30px;
}

li#m1 a{
background-image:url(../image2/menu1.gif);
}

li#m1 a:hover{
background-image:none;
}

li#m2{
width:154px;
background-image:url(../image2/menu2.gif);
background-position:0px -30px;
}

li#m2 a{
background-image:url(../image2/menu2.gif);
}

li#m2 a:hover{
background-image:none;
}

li#m3{
width:154px;
background-image:url(../image2/menu3.gif);
background-position:0px -30px;
}

li#m3 a{
background-image:url(../image2/menu3.gif);
}

li#m3 a:hover{
background-image:none;
}

li#m4{
width:154px;
background-image:url(../image2/menu4.gif);
background-position:0px -30px;
}

li#m4 a{
background-image:url(../image2/menu4.gif);
}

li#m4 a:hover{
background-image:none;
}

li#m5{
width:100px;
background-image:url(../image2/menu5.gif);
background-position:0px -30px;
}

li#m5 a{
background-image:url(../image2/menu5.gif);
}

li#m5 a:hover{
background-image:none;
}
------------------------------------------------------------------
-----HTML ソース--------------------------------------------------
<div class="globalnavi">
<ul>
<li id="m1" title="研究室紹介へのリンク"><a href="#"><span>大学紹介</span></a></li>
<li id="m2" title="スタッフへのリンク"><a href="#"><span>スタッフ</span></a></li>
<li id="m3" title="研究設備へのリンク"><a href="#"><span>研究設備</span></a></li>
<li id="m4" title="アーカイブへのリンク"><a href="#"><span>アーカイブ</span></a></li>
<li id="m5" title="外部リンクへのリンク"><a href="#"><span>リンク</span></a></li>
</ul>
</div><!--div globalnavi finish-->
------------------------------------------------------------------

No.4 ベストアンサー 回答者： abril 回答日時： 2009/06/18 12:15

> 全体が左に寄りすぎてHPの背景からはみ出してしまいました．

補足のソースを拝見しましたが、幅830pxのmid-backの領域に対して、幅770pxのglobalnaviの領域が左右方向に均等の余白を持ってセンタリングされず、mid-backの左端に揃って描画されてしまう…という状態と解釈して宜しいですか？

その状況は、IE6/7以外のFirefox等のブラウザで起きていますよね？前者であれば親要素のmid-backの"text-align: center;"の指定が（間違って）効いてしまうので、現状のままでもglobalnaviはセンタリングされていると思いますので…

"text-align: center;"の本来の役目はテキストなどのインライン要素に対するセンタリングであり、ブロック要素（div等）の位置自体をセンタリングする性質は持っていません（IEでの結果は正しくない解釈に依るものです）。それは左右marginをautoにする事で調整できるので、下記の様に修正を加えてみて下さい。

.globalnavi{
（省略）
margin: 0 auto;
（省略）
}

こうする事で、globalnaviはwidthが770pxと決め打ちされているので、親要素のmid-backの830pxの幅から770pxを引いた残りの分（60px）が左右の余白として均等に割り振られる（左マージン30px/右マージン30pxとなります）ので、結果としてセンタリングされて表示されます。

No.3 回答者： abril 回答日時： 2009/06/17 17:46

> スペルミスとは，恥ずかしいかぎりです

いえ、結構ある事ですので、なんかいくらやってもおかしい…と思ったら、先ずは設定したCSSのセレクタとHTMLのマークアップがちゃんと対になっているかどうかを確かめてみる、という習慣を付けると良いですよ。

> 全体が左に寄りすぎてHPの背景からはみ出してしまいました．

それは本件とは別の問題ですね。globalnaviの親要素との兼ね合いに不具合があると思われますが、その部分の情報を提供して頂かないとわかりません。

この回答への補足

globalnaviの親要素はmid-backでプロパティーは以下の様になっています．
.mid-back{

border:1px solid #cc0000;

width:830px;

margin:0px auto 0px auto;

padding:0px 0px 0px 0px;

background: url(../image/back-mid.gif) repeat-y center ;

text-align:center;

}
なおHTMLは以下の様になっています．よろしくお願いします．
-------------HTML--------------------------------------------------
<div class="mid-back">

<div class="globalnavi">

<ul>

<li id="m1" title="研究室紹介へのリンク"><a href="#"><span>大学紹介</span></a></li>

<li id="m2" title="スタッフへのリンク"><a href="#"><span>スタッフ</span></a></li>

<li id="m3" title="研究設備へのリンク"><a href="#"><span>研究設備</span></a></li>

<li id="m4" title="アーカイブへのリンク"><a href="#"><span>アーカイブ</span></a></li>

<li id="m5" title="外部リンクへのリンク"><a href="#"><span>リンク</span></a></li>

</ul>

</div><!--div globalnavi finish-->

<image src="image/top1.jpg" border="none" >

<div class="mid">

あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

</div> <!--div mid finish-->

</div><!--div mid-back finish-->
-------------------------------------------------------------------

補足日時：2009/06/17 18:59

No.2 回答者： abril 回答日時： 2009/06/17 14:01

CSSにスペルミスがありますね。

.gloabalnavi ul{
（省略）
}

正しくは

.globalnavi ul{
（省略）
}

です。スペルミスの為、HTML側のマークアップに対応しておらず、ulのマージンが初期化されていなかっただけですね。
なので、li#m5のwidthも154pxで正解です。

この回答へのお礼

スペルミスとは，恥ずかしいかぎりです（汗
修正後，全ての要素がちゃんと表示されましたが，全体が左に寄りすぎてHPの背景からはみ出してしまいました．

お礼日時：2009/06/17 14:23

No.1 回答者： abril 回答日時： 2009/06/17 12:04

実際にサンプルを検証していませんが、提供された情報を見ると単純に計算を間違っていると思いますが。

globalnaviの幅が770pxなのに対し、子要素liの幅の合計が154px×4＋150px＝716pxなのでぴったりに並べるには54px足りません。
下記だけ100pxになっているのは何故ですか？

li#m5{
width:100px;
（省略）
}

この回答への補足

当初は5番目の要素もwidth154pxでしたが，それでは余白が現状と同じで5番目の要素が表示されなかったので5番目の要素を表示させようと幅を小さくした結果です．

補足日時：2009/06/17 12:25