※ ChatGPTを利用し、要約された質問です（原文：firefoxでレイアウトが崩れてしまう）
firefoxでレイアウトが崩れてしまう
このQ&Aのポイント
会社のHPをホームページビルダーで作成中ですが、firefoxでレイアウトが崩れてしまいます。
IE6,7,8では表示が正常ですが、firefoxだけ枠からはみ出て表示されます。
解決策を教えてください。
会社のHPをホームページビルダー（xhtml・CSS）で作成中です、
最近コストダウンにより社内で作成することになったのでまったくの素人です。
http://shinroku.net/graypartner/index.html
のページ（全ページ共通）の上部にありますメーニュー（ <ul><li>ですが（赤いボタンメニュー）IE6,7,8ではbody(width="800")からはみ出さないで表示されるのですが、firefoxでは何故かbody枠からはみ出して表示されてしまいます、どなたか解決策を教えてください、宜しくお願いします・・・これ完成させないとクビになりそう・・・・
ソースとＣＳＳには下記のように記述しました、
ＣＳＳへの記述
body{
margin-top : 5px;
background-color : #666666;
background-image : url(img/back.jpg);
background-repeat : repeat-x;
text-align : center;
margin-bottom : 5px;
}
#container{
width : 800px;
background-color : #000000;
text-align : left;
margin-left : auto;
margin-right : auto;
margin-bottom : 0px;
}
ul#menu{
width : 800px;
height : 44px;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 0px;
margin-left : 0px;
}
ul#menu li{
float : left;
list-style-type : none;
}
ul#menu li a{display: block;
text-decoration: none;
outline: none;
}
#mnu1 a{
background-image : url(menu/menu1.gif);
display : block;
text-decoration : none;
background-repeat : no-repeat;
outline: none;
}
#mnu1 a:hover{
background-position : left bottom;}
#mnu1{
margin-top : 0px;
}
#mnu1 img{border-width : 0px 0px 0px 0px;
}
※以下#mnu2～#mnu7迄同じ記述
ソースへの記述
<body>・・・省略・・
<!-- menu -->
<ul id="menu">
<li id="mnu1"><a href="index.html"><img src="menu/tm.gif" width="114" height="44" alt="HOME" title="HOME" /></a></li>
<li id="mnu2"><a href="topics.html"><img src="menu/tm.gif" width="114" height="44" alt="トピックス" title="Topics" /></a></li>
<li id="mnu3"><a href="location.html"><img src="menu/tm.gif" width="114" height="44" alt="場所" title="Location" /></a></li>
<li id="mnu4"><a href="business.html"><img src="menu/tm.gif" width="114" height="44" alt="経済" title="Business" /></a></li>
<li id="mnu5"><a href="population.html"><img src="menu/tm.gif" width="114" height="44" alt="人口・労働力" title="Population Labor" /></a></li>
<li id="mnu6"><a href="industrial.html"><img src="menu/tm.gif" width="114" height="44" alt="工業団地" title="Industral Park" /></a></li>
<li id="mnu7"><a href="contact.html"><img src="menu/tm.gif" width="114" height="44" alt="お問い合わせ" title="Contact" /></a></li>
</ul>
<!-- /menu -->
それともう１点なんですが、
http://shinroku.net/graypartner/industrial.html
のページIE6,7,8では上記問題点以外になぜか<div></div>の間に隙間が
出来てしまうのですが以下問題箇所 行67行目に入れてる
<div class="content">のBOXの上下に隙間が出来てしまうのですが
どうしたらIEの様に隙間なく表示させられるのでしょうか？
CSS記述は以下の通りです
.content{
background-color : #ffffff;
margin-left : 14px;
width : 772px;
margin-top : 0px;
margin-bottom : 0px;
}
.text01{
width : 380px;
float : left;
font-size : 13px;
font-family : "ＭＳ Ｐゴシック";
line-height : 1.6;
color : #000000;
padding-left : 16px;
padding-right : 10px;
}
.text02{
margin-left : 0px;
font-size : 13px;
font-family : "ＭＳ Ｐゴシック";
line-height : 1.6;
color : #000000;
}
.content p{
font-size : 13px;
font-family : "ＭＳ Ｐゴシック";
margin-left : 16px;
margin-bottom : 0px;
padding-top : 10px;
}
以上です素人なので質問が漠然といたいるかもしれませんが
何卒、宜しくお願いします。
お礼
cyanberry様 ul#menuにpadding: 0pxを足しましたら解決しました！ 本当に感謝、感激です（喜！！（・０・）/） これだけでもパソコンと２日ニラメッコ状態でした、 本当に助かりました。 「<div class="content">」の件もご指摘通り１つで囲んでみました！ これも隙間が出来る問題がスッキリしました。ありがたいご指導です！ text03クラスはテキスト文字を横に改行させず表示するのに作成しました、text01はwidth : 380px;で作成していたのでtext01ですと改行されて社長が嫌がって・・トホホ・・ 隙間は解決できたのですが左側「下水」（text01クラス）と右側「上水」(text02)の高さが１行程ずれたのですがこれは何故でしょうか？ cyanberry師匠と呼ばせていただきます。 師匠お礼の言葉ついでになって大変申し訳ないのですが、 Q1<ul id="menu"> のブラウザ表示されますとメニューボタンの下に以前から白い破線が出るのですがこれは意図してない事でした消せるのでしょうか？ Q2 <!-- footer --> <div class="adress"> <p><a href="mailto:info@bgchamber.com">Email:info@bgchamber.com</a><br /><a href="http://www.bgchamber.com/" target="_blank">Homepage: http://www.bgchamber.com/</a></p> </div><!-- /footer --> 内に表示している Email:info@bgchamber.com Homepage: http://www.bgchamber.com/ なんですが文字をフォントをArialで指定しているのですが反映されないのには下記CSSの記述は間違っているのでしょうか？ .adress{ background-image : url(img/adress.gif); background-repeat : no-repeat; width : 800px; height : 96px; margin-top : 0px; margin-left : auto; margin-right : auto; } .adress p{ font-size : 12px; font-family : Arial; color : #efefef; padding-left : 530px; line-height : 1.3; padding-top : 13px; } .adress p a{ color : #efefef; text-decoration : none; } .adress p a:hover{ color : #e2e2c7; text-decoration : underline; } もし宜しければ再度ご指導頂けましたら幸いです。 本当に今回助かりました、ありがとうございました。