Firefoxでメニューナビの全体幅が調整できない

質問

ヘッダーのメニューナビがIEでは正常に表示されているのに、Firefoxではメニュー全体幅が左右にはみ出てしまいます。どうしたらどんなブラウザでも指定したWidth幅どうりに表示できるようになるのでしょうか？
色々自分なりに考えましたが、CSS初心のためいまいちわかりません。
良きアドバイスよろしくお願いします。

CSS

<style type="text/css">

<!--
menug{
position: relative;
padding: 0 0 0 58px;
margin: 0 0 auto 0;
background: url(/menug_bg.gif) repeat-x;
height: 46px;
list-style: none;
width: 870px;

}

.menug li{
float:left;

}

.menug li a{
float: left;
display: block;
color:#;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 15px;
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer;
}

.menug li a b{
float: left;
display: block;
padding: 0 20px 0 6px;
}

.menug li.current a, .menug li a:hover{
color: #fff;
background: url(/menug_hover_left.gif) no-repeat;
background-position: left;
}

.menug li.current a b, .menug li a:hover b{
color: #fff;
background: url(/menug_hover_right.gif) no-repeat right top;
}

-->

</style>

HTML

<ul class="menug">
<li class="current"><a href="#"><b>MEMU1</b></a></li>
<li><a href="#"><b>MENU2</b></a></li>
<li><a href="#"><b>MENU3</b></a></li>
<li><a href="#"><b>MENU4</b></a></li>
<li><a href="#"><b>MENU5</b></a></li>
<li><a href="#"><b>MENU6</b></a></li>
</ul>

回答No.4

kuzumiHK · ベストアンサー

No.2です。No3さんの方法と比べると邪道なやり方かもしれませんが、
ulの外側にdivで囲ってもよければ、下記の方法でいけるかもしれません。
#menuにwidthを追加して、.menugからwidthを削除しています。
htmlは<div id="menu">を追加しました。

#menu{
width: 870px;
}

.menug{
position: relative;
padding: 0 0 0 58px;
margin: 0 0 auto 0;
background: url(image/menug_bg.gif) repeat-x;
height: 46px;
list-style: none;
}

<div id="menu">
<ul class="menug">
<li class="current"><a href="#"><b>MEMU1</b></a></li>
<li><a href="#"><b>MENU2</b></a></li>
<li><a href="#"><b>MENU3</b></a></li>
<li><a href="#"><b>MENU4</b></a></li>
<li><a href="#"><b>MENU5</b></a></li>
<li><a href="#"><b>MENU6</b></a></li>
</ul>
</div>

楽天市場のソースはいまだにtable組やfontタグが中心ですので、
ユーザビリティやユニバーサルサービス的な文法遵守は難しい状況で、
まだcssを使うのは、ちょっと厳しい環境かもしれませんね。

お礼

kuzumiHKさんたびたび有難うございます。ご指摘どうりそのままタグを適用し、反映してみたら見事firefoxでも両サイドが広がらず収まりました。自分にっとは邪道でもなんでもなく、これが一番望んでいた事です。とにかくkuzumiHKさんをはじめ色々相談にのっていただいた方々に感謝いたします。本当に有難うございました。

回答No.3

leap_day

こんにちは

サイト拝見させてもらいました

全体幅『870px』にしてあるとありますが実際には『928px(width:870px + padding-left:58px)』です
なのでFirefoxの表示が正常の状態です

そちらで作られたものがＩＥで『870px』に収まっているのはDTD宣言(<!DOCTYPE ～>)を行っていないからです

・DTD宣言をした後、.menugを『width:812px;』としてみてください
※DTD宣言をすると他の部分も表示が崩れる可能性があります

・もし面倒で（したほうがいいと思いますが）DTD宣言しないのであれば
<style type="text/css"><!--
.menug { width:812px; }
--></style>

<!--[if IE]>
<style type="text/css"><!--
.menug { width:870px; }
--></style>
<![endif]-->
になります

補足

回答有難うございます。なるほどDTD宣言って言うんですか～よくほかのサイトのソースの頭に付いてますよね。それで、ためしにここで　http://e-eandg.ddo.jp/docs/doctype.html　紹介しているDTDをショップのヘッダーに貼り付けようとしたのですが、ほとんど外部リンクとみなされてしまって適応できませんでした。（楽天ショップは基本的に外部リンクが禁止されています。）でも、なんかやり方しだいでどうにかなりそうな気がするのですけど・・・CSSでなんか表現できないのでしょうか？だめならあきらめますけど・・とりあえず今はmenug { width:870px; }のままにしてあります。firefoxだと当然両サイドが広がってしまいますけど。今のところ楽天のシステムを利用してショップを構築してるので、なにかと規制があってやることがかぎられちゃうんですよ・・CSSは良いけどJAVASCRIPTはだめだとか・・やっぱ自社サイトを作ってまるごと楽天にアップするしかないのでしょうか？ それと、DTDを記載する場合、何を基準に宣言したらよいのでしょうか？何種類かあるみたいですけど、うちのサイトに適したDTDを宣言するにはどう見極めれば良いのでしょうか？初歩的で申し訳ありませんがどうかよろしくお願いします。

回答No.2

kuzumiHK

こんな感じでいかがでしょうか。
画像とbタグは、コピペで視認できるようにはずしてあるので、
背景色の設定部分にurlを戻せばいけると思います。

<style type="text/css">
<!--

*{
margin:0;
padding:0;
}

.menug{
list-style: none;
width:660px;
margin:0 auto;
}

.menug li{
display: inline;
}

.menug li a{
display: block;
float: left;
padding:5px;
width:100px;
background: #ccc;
text-align: center;
vertical-align:middle;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
}

.menug li a:hover{
color: #fff;
background: #999;
}

.menug li.current a{
color: #fff;
background: #039;
}

-->
</style>

<ul class="menug">
<li class="current"><a href="#">MEMU1</a></li>
<li><a href="#"><b>MENU2</b></a></li>
<li><a href="#"><b>MENU3</b></a></li>
<li><a href="#"><b>MENU4</b></a></li>
<li><a href="#"><b>MENU5</b></a></li>
<li><a href="#"><b>MENU6</b></a></li>
</ul>

内容としては、ulをセンター合わせにして幅660pxに固定、
liはインライン要素に変換、aをブロック要素にして、
サイズを100px+余白5pxづつで幅110px×6ボタン
もし、左右いっぱいまで背景を反映するなら、
ulをさらにdivで囲って、width:100%でいけると思います。

補足

早速のご回答ありがとうございます。一応自分のわかる範囲でkuzumiHKさんのご指摘いただいた内容に画像URLを指定し反映させてみました。がbackの画像が重なってしまったり、各MENU自体が縦に落ちてしまったりして思うどうりいきませんでした。多分自分の解釈が間違っているのだと思いますが、自分が記載したタグのどこの部分を直し、付け加えたらFirefoxでも横幅全体が870pxで崩れず表示されるようになるのでしょうか？参考までに今回のメニューナビの元データが置いてあるサイトのURLを乗せておきます。（ここのメニュータグを使わせてもらっています。）http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal_menu/　
無知で申し訳ありませんがよろしくお願いします。

回答No.1

auty

最初の

<!--
menug{
position: relative;

で、クラスのセレクタを指定するピリオドが抜けているようですが。

お礼

ご指摘有難うございます。思わずコピペぬきしてしまいました。