ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
質問者：zapan 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>
質問投稿日時：08/05/03 15:21
質問番号：3994684
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：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を使うのは、ちょっと厳しい環境かもしれませんね。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/05/05 12:24
回答番号：No.4
この回答へのお礼kuzumiHKさんたびたび有難うございます。ご指摘どうりそのままタグを適用し、反映してみたら見事firefoxでも両サイドが広がらず収まりました。自分にっとは邪道でもなんでもなく、これが一番望んでいた事です。とにかくkuzumiHKさんをはじめ色々相談にのっていただいた方々に感謝いたします。本当に有難うございました。

回答

良回答10pt
回答者：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]-->
になります
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/05/04 07:26
回答番号：No.3
この回答への補足回答有難うございます。なるほどDTD宣言って言うんですか〜よくほかのサイトのソースの頭に付いてますよね。それで、ためしにここで　​http://e-eandg.ddo.jp/docs/doctype.html​　紹介しているDTDをショップのヘッダーに貼り付けようとしたのですが、ほとんど外部リンクとみなされてしまって適応できませんでした。（楽天ショップは基本的に外部リンクが禁止されています。）でも、なんかやり方しだいでどうにかなりそうな気がするのですけど・・・CSSでなんか表現できないのでしょうか？だめならあきらめますけど・・とりあえず今はmenug { width:870px; }のままにしてあります。firefoxだと当然両サイドが広がってしまいますけど。今のところ楽天のシステムを利用してショップを構築してるので、なにかと規制があってやることがかぎられちゃうんですよ・・CSSは良いけどJAVASCRIPTはだめだとか・・やっぱ自社サイトを作ってまるごと楽天にアップするしかないのでしょうか？ それと、DTDを記載する場合、何を基準に宣言したらよいのでしょうか？何種類かあるみたいですけど、うちのサイトに適したDTDを宣言するにはどう見極めれば良いのでしょうか？初歩的で申し訳ありませんがどうかよろしくお願いします。
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：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%でいけると思います。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/05/03 16:07
回答番号：No.2
この回答への補足早速のご回答ありがとうございます。一応自分のわかる範囲でkuzumiHKさんのご指摘いただいた内容に画像URLを指定し反映させてみました。がbackの画像が重なってしまったり、各MENU自体が縦に落ちてしまったりして思うどうりいきませんでした。多分自分の解釈が間違っているのだと思いますが、自分が記載したタグのどこの部分を直し、付け加えたらFirefoxでも横幅全体が870pxで崩れず表示されるようになるのでしょうか？参考までに今回のメニューナビの元データが置いてあるサイトのURLを乗せておきます。（ここのメニュータグを使わせてもらっています。）​http://www.dynamicdrive.com/style/csslibrary/item/glossy_horizontal...​　
無知で申し訳ありませんがよろしくお願いします。
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：auty 最初の

<!--
menug{
position: relative;

で、クラスのセレクタを指定するピリオドが抜けているようですが。
種類：アドバイス
どんな人：経験者
自信：参考意見
回答日時：08/05/03 15:43
回答番号：No.1
この回答へのお礼ご指摘有難うございます。思わずコピペぬきしてしまいました。
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ