こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

firefoxでレイアウトが崩れてしまう

会社のHPをホームページビルダー(xhtml・CSS)で作成中です、
最近コストダウンにより社内で作成することになったのでまったくの素人です。
http://shinroku.net/graypartner/index.html
のページ(全ページ共通)の上部にありますメーニュー( <ul><li>ですが(赤いボタンメニュー)IE6,7,8ではbody(width="800")からはみ出さないで表示されるのですが、firefoxでは何故かbody枠からはみ出して表示されてしまいます、どなたか解決策を教えてください、宜しくお願いします・・・これ完成させないとクビになりそう・・・・

ソースとCSSには下記のように記述しました、
CSSへの記述
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 -->

それともう1点なんですが、
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 : "MS Pゴシック";
line-height : 1.6;
color : #000000;
padding-left : 16px;
padding-right : 10px;
}
.text02{
margin-left : 0px;
font-size : 13px;
font-family : "MS Pゴシック";
line-height : 1.6;
color : #000000;
}
.content p{
font-size : 13px;
font-family : "MS Pゴシック";
margin-left : 16px;
margin-bottom : 0px;
padding-top : 10px;
}
以上です素人なので質問が漠然といたいるかもしれませんが
何卒、宜しくお願いします。

投稿日時 - 2008-12-24 10:26:55

QNo.4579480

すぐに回答ほしいです

質問者が選んだベストアンサー

最初の不具合は、cssの「ul#menu」に「padding: 0px」を追加してください。
FireFoxではulのpadding-leftがデフォルト40pxらしいです。

ul#menu{
width : 800px;
height : 44px;
margin-top : 0px;
margin-right : 0px;
margin-bottom : 0px;
margin-left : 0px;
padding: 0px
}

2つ目のものは単純に「<div class="content">」が何度も出現しているのを1つにして、「<div class="text0X">」をすべて囲んでしまえばよいのではないでしょうか。タグ的にもそちらの方が美しい気がします。
text03クラスは何の目的で存在しているのか不明ですが、text01クラスに変更して全角スペースで位置調整しているのを止めれば、他の文章とレイアウトが揃うと思います。

投稿日時 - 2008-12-24 13:37:13

お礼

cyanberry様
ul#menuにpadding: 0pxを足しましたら解決しました!
本当に感謝、感激です(喜!!(・0・)/)
これだけでもパソコンと2日ニラメッコ状態でした、
本当に助かりました。

「<div class="content">」の件もご指摘通り1つで囲んでみました!
これも隙間が出来る問題がスッキリしました。ありがたいご指導です!
text03クラスはテキスト文字を横に改行させず表示するのに作成しました、text01はwidth : 380px;で作成していたのでtext01ですと改行されて社長が嫌がって・・トホホ・・
隙間は解決できたのですが左側「下水」(text01クラス)と右側「上水」(text02)の高さが1行程ずれたのですがこれは何故でしょうか?

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;
}
もし宜しければ再度ご指導頂けましたら幸いです。

本当に今回助かりました、ありがとうございました。

投稿日時 - 2008-12-24 14:44:41

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問