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

前へ 次へ
このQ&Aのポイント
  • 会社のHPをホームページビルダーで作成中ですが、firefoxでレイアウトが崩れてしまいます。
  • IE6,7,8では表示が正常ですが、firefoxだけ枠からはみ出て表示されます。
  • 解決策を教えてください。
回答を見る
  • ベストアンサー

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
  • ベストアンサー率50% (117/230)
回答No.1

最初の不具合は、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クラスに変更して全角スペースで位置調整しているのを止めれば、他の文章とレイアウトが揃うと思います。

gonta5401
質問者

お礼

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; } もし宜しければ再度ご指導頂けましたら幸いです。 本当に今回助かりました、ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • CSSで指定した背景が印刷されない

    CSS初心者です、 CSSで背景を指定しているのですが閲覧者側で印刷時に背景も印刷にチェックをいれないと背景が印刷されないのですが、閲覧者側で上記の作業をいなくても背景を印刷させる方法はありましたらどなたかご教授ください。 ソース記述 <div id="header"> <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> CSS記述 #header{ background-color : #ffffff; background-repeat : no-repeat; width : 800px; background-image : url(img/logotop.gif); height : 197px; display:list-item; list-style-image: url(img/logotop.gif); } ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 800px; height : 44px; padding: 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; } よろしくお願いします。

  • imgの下に点線が入るのを消したい

    ＨＰ（xhtml/CSS)で作成しています、素人ですが こちらのＵＲＬ　http://shinroku.net/graypartner/index.html で上部にメニュー（赤い部分・・ホーム・トピックス・場所・・） の箇所なんですがメニューの下に白い点線or破線が入ってしまいます。 特にＣＳＳでもimg側でも点線が出るようには指示してないのですが？ この線を消したいのですが、ご存知でしたら教えてください！ 以下ソース記述 <!-- 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 --> 以下ＣＳＳ記述 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{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width : 800px; height : 44px; padding: 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; } 以下#mnu1～#mnu7まで同じ どこが間違えているのか最近ＣＳＳを勉強しだした次第でして どなたかお知恵を拝借ください。 もう１点ありまして・・スイマセン http://shinroku.net/graypartner/industrial.html こちらのページ内のimg画像下のテキストなのですが 何故か右側が一行下がってしまうのですが左右のレベルを合わせるには どうしたら良いのでしょうか？ 以下ソースに記述 <div class="text01"> <p style="font-family : Arial;">電力会社 ⇒ Warren RECC<br /> ・ 敷地内に12.47ｋVの配電線、敷地周辺に161ｋVと69kVの<br /> 　送電線<br /> ・ 敷地内に新規変電施設</p> </div> <div class="text02"> <p style="font-family : Arial;">ガス会社 ⇒ Atmos Energy<br /> ・ 敷地北側に8インチの本管<br /> ・ US Highway 68号線沿いに4インチの配管、US Highway 31<br /> 　号線沿いに2インチと6インチの配管</p> </div> 以下ＣＳＳ記述 .text01{ width : 380px; float : left; font-size : 13px; font-family : "ＭＳ Ｐゴシック"; line-height : 1.6; color : #000000; padding-left : 16px; padding-right : 5px; } .text02{ margin-left : 0px; font-size : 13px; font-family : "ＭＳ Ｐゴシック"; line-height : 1.6; color : #000000; padding-left : 23px; } どなたか宜しくお願いします。

    • ベストアンサー
    • HTML
  • firefoxでfloaｔの調整の仕方CSS

    CSSで下記(div)のなかにBOXを3つ並べました、 ie6以上では思い通りに表示されるのですがFireFox（バージョン3.5.3）では一番右端にくるBOXが左端のBOXの下に入ってしまいます。 どなたか解決策を教えていただけますでしょうか？ ----ソース部分--- <div class="setbox1"> <div id="rent1"><a href="eee.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent2"><a href="aaa.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent3"><a href="ccc.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> </div> ----以下CSS---- .setbox1{ margin-left : 25px; width : 750px; } #rent1{ margin-top : 20px; margin-left : 0px; float : left; width : 234px; } #rent1 a{ background-image : url(img/rent1.gif); display : block; line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; } #rent1 a:hover{ background-position : left bottom; } #rent1 img{border-width : 0px 0px 0px 0px; } #rent2{ margin-left : 0px; float : left; margin-right : 22px; padding-left : 22px; width : 234px; margin-top : 20px; } #rent2 a{ background-image : url(img/rent2.gif); display : block; background-repeat : no-repeat; line-height : 0px; width : 234px; height : 69px; } #rent2 a:hover{ background-position : left bottom; } #rent2 img{border-width : 0px 0px 0px 0px; } #rent3{ margin-top : 20px; margin-left : 0px; padding-left : 0px; } #rent3 a{ background-image : url(img/rent3.gif); line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; display : block; } #rent3 a:hover{ background-position : left bottom; } #rent3 img{border-width : 0px 0px 0px 0px; }

  • レイアウト、フッターが崩れてしまいます。

    横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">&copy;＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main　p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }

  • FireFoxでvisitedの表示不具合について

    HTMLやCSSに知識がなく困っています。 質問をよろしくお願いいたします。 メニューバーには８つのボタンがあるのですが FireFoxでは、visitedが表示されず IEはページの行き来でメニューボタンが消失します。 何か解決法はありませんでしょうか？ よろしくお願いいたします。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン７つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul> 　<li><a href="../new/top.html" target="main" class="c"></a></li>　 <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>

  • FireFoxでのレイアウト表示崩れについて

    現在ホームページを作成しています。 CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。 IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。 よろしくお願いします。 以下ソース ◇HTML部分◇ <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <u class="hnavi"> <li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li> <li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li> <li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li> <li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li> <li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li> <li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li> </u> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS部分◇ body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } .hnavi { margin: 0; padding: 0; } .hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; } 以上です。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）

    こんにちは、質問させて下さい。 現在　li　タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • firefoxでのリストについて

    今までIEばかりでしたので、firefoxで表示した際のデザインの崩れについてなかなか理解できずにいます。 詳しい方にアドバイスを頂ければ幸いです。 divで１つ、大きな枠を作り、その中に2つのDIVを横に並べています。 左側のみwidthの指定をし、そのなかにリストで作ったメニューを入れています。問題はこのメニューで、メニューの下に画像や文字などを普通に続けて書きたいのですが、メニューの後に書いたものが、メニューの後ろ側に表示されてしまいます。 分かりにくいと思いますが、要するに、メニューと重なってしまう状態です。メニューの後に書いた文章が、メニューが存在しない場合の位置に表示され、その上にメニューが覆いかぶさるように重なって表示されています。 どうすればいいのでしょうか？ 下記がCSSとHTMLです。 CSSーーーーーーーーーーー #big{ margin:auto; padding: 0px; background-color:#ff0000; WIDTH: 800px; height: 100%; } #left{ FLOAT: left; WIDTH: 180px; height: 100%; margin-right: 50px; margin-left: 0px; text-align: center; background-color: #FFFFFF; } #center{ text-align: left; background-color: #ffffff; } ul.menu { margin-left: 0px; margin-right: 0px; margin-top: 5px; margin-bottom: 5px; padding: 0px; height: 40px; width: 150px; /* 幅 */ background-color: #ffffff; list-style-type: none; } ul.menu li { margin: 0; padding: 0; font-size: 15px; /* 文字サイズ */ font-weight: bold; } ul.menu li a { padding: 11px 20px; display: block; color: #000099; 　　　　 background-image: url(menubotan.gif); text-decoration: none; } ul.menu li a:hover { color: #d63300; background-image: url(menubotan2.gif); } htmlーーーーーーーーーーー <div id="big"> <div id="left"> <UL class="menu"> <li><a href="index.html">TOPページ</a></li> <li><A href="mainpage.html" target="_self">メインページ</A></li> <li><A href="matsuri.html" target="_self">祭りについて</A></li> <li><A href="sannka.html" target="_self">参加申し込み</A></li> <li><A href="kanbu.html" target="_self">幹部紹介</A></li> <li><A href="syozaiti.html" target="_self">所在地</A></li> <li><A href="pics.html" target="_self">動画・写真館</A></li> <li><A href="bbs.html" target="_self">掲示板</A></li> <li><A href="links.html" target="_self">リンク集</A></li> <li><A href="otoiawase.html" target="_self">お問い合わせ</A></li> </ul> <br> ここに書いた文字をメニューに続けて表示させたいのです。 </div> <div id="center"> メイン内容 </div> </div>

    • ベストアンサー
    • HTML
  • リストタグを用いた縦メニューで画像に隙間ができます（IE6）

    いつも皆さまには助けていただきありがとうございます。 さてまた今回も質問で申し訳ないのですが、リストタグを用いて縦のメニューを作成しています。 IE6でのみメニュー画像の上下に隙間が出来る現象が発生して困っております。（本当は隙間なくしたい） こちらの質問を参考にして左メニューの画像に「display:block;」や「vertical-align:bottom;」を付けてみましたが、変化なしです。 #left img{ border:none; display:block; vertical-align:bottom; } と入れたんですが、記入がおかしいでしょうか？ 色々調べてみましたが、これ以上どういじって良いのかよく分かりません。 一部省略していますがソースを載せますので間違いをご指摘いただければ大変助かります。 よろしくお願いします。 【HTML】 <html> <head> <link rel="stylesheet" href="css/ie6.css" type="text/css" /> <title>タイトル</title> </head> <body> <div id="container"> <!--ヘッダー部分--> <div id="header"> <div id="headerImg" title="タイトル"> </div><!--id:headerImgEnd--> <div id="headerMenu"> <ul> <li></li> <li></li> <li></a></li> </ul> </div><!--headerMenuEnd--> </div><!--id#headerEnd--> <div id="contents"> <!--左メニュー--> <div id="left"> <div id="left_menu"> <ul> <li><a href="a.html" id="a" title="a">a</a></li> </ul> <ul> <li id="b" title="b"></li> <li><a href="c.html" id="c" title="c"></a></li> <li><a href="d.html" id="d" title="d"></ul> </div><!--id:left_menuEnd--> </div><!--id:leftEnd--> <!--メイン--> <div id="main"> </div><!--mainEnd--> <!--フッター--> <div id="footer"> </div><!--id:containerEnd--> </div> </body> </html> 【CSS】 body{ margin:0; padding:0; text-align:center; font-size:14px; } #container{ margin:0 auto; width:800px; text-align:left; borer:solid 1px #999; } #header{ width:800px; } div#headerImg{ width:800px; height:138px; background-image:url(img/title.gif); background-color:#00FFcc; } div#headerMenu{ width:800px; } #contents{ width:800px; } /*左メニュー*/ #left{ float:left; width:180px; } #left_menu ul{ list-style:none; padding:0; margin:0; } #a{ background-image:url(../img/a.gif); width:180px; height:69px; display:block; margin-top:0px; margin-left:0px; } #b{ background-image:url(../img/b.gif); background-repeat:no-repeat; width:180px; height:30px; display:block; margin-top:0px; margin-left:0px; } #c{ background-image:url(../img/c.gif); background-repeat:no-repeat; width:180px; height:25px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#c:hover{ background-image:url(../img/c02.gif); background-repeat:no-repeat; } #d{ background-image:url(../img/d.gif); background-repeat:no-repeat; width:180px; height:24px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#d:hover{ background-image:url(../img/d02.gif); background-repeat:no-repeat; } /*メイン*/ #main{ float:right; width:620px; margin:-14px 0 0 0; } /*フッター*/ #footer{ clear:both; width:800px; height:47px; }

    • ベストアンサー
    • HTML
  • display:inlineで横並びにしたメニュー

    のa:とa:hoverをbackground-imgでロールオーバーさせたいんですが、画像を大きく調整できません。line-heightとheightをいじってみましたが画像そのものの高さは変わりません。サイドメニューを作った時はDL,DT,DDでdisplay:blockでうまく出来ました。下記に現状のHTMLとCSSを記述しますのでよろしくおねがいします。 html側 <div id="banner_menu"> <ul> <li><a href="#">あいうえお</a></li> <li><a href="#">かきくけこ</a></li> <li><a href="#">さしすせそ</a></li> <li><a href="#">たちつてと</a></li> <li><a href="#">なにぬねの</a></li> <li><a href="#">はひふへほ</a></li> </ul> </div> CSS側 #banner_menu { clear: both; margin: 0px; padding: 7px 0 5px 15px; border-top: solid 1px #999; border-bottom: solid 1px #999; width: auto; margin-left: auto; margin-right: auto; background-color: #ffffff; } #banner_menu ul { text-align: left; padding-bottom: 1px; margin: 0px; } #banner_menu li { color: #ffffff; display: inline; padding-left: 7px; padding-right: 5px; border-left: solid 1px #999; width: 120px; } #banner_menu a { color: #4d4d4d; font-weight: normal; background-color: none; text-decoration: none; font-size: 12px; background: url(var_gry120x48.gif) no-repeat center center; line-height:20px; height: 20px; } #banner_menu a:hover { color: indianred; font-weight: normal; background: url(var_gry120x48_2.gif) no-repeat centert bottom; }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する