• ベストアンサー

<div>と<div>の間の10px程の隙間が消えなくて困っています。Firefox&safari

はじめまして。 現在movabletype3.35で初めてサイトを作成している者です。 宜しくお願いします。 下記にありますHTMLとCSSでページを作っているのですが、 Firefoxやsafariで確認すると、 <div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている <div id="introduction">で囲んだボックスの間に10px程の隙間が出来てしまいます。 ※IE7では隙間は出来ませんでした。 <div id="keyvisual"> ← ※<div id="pankuzu">のすぐ上のボックス <div id="pankuzu"> <div id="introduction"> これら3つのボックスには全てCSSでmarginとpaddingを調整しているつもりなのですが、どうしてもIE7と同じように表示されず隙間が出来てしまいます。。 ちなみに、試しに一度<div id="pankuzu">のボックスをまるまる削除して表示した所、<div id="introduction">のmargin-topに0pxと指定しているのにかかわらず、この場合も10px程の隙間が出来ました。。 ということは、<div id="introduction">の中のHTMLかCSSの書き方か指定に何か問題があるのかと思っているのですが、どうしても解決できません。 是非ご指導、ご鞭撻宜しくお願い致します。 ---------------------------------------------------------------- 【CSS】 * { margin: 0; padding: 0; border: 0; background-color:transparent; color: #333; font-size: 100%; font-weight: normal; font-style: normal; text-decoration: none; } div#keyvisual { width: 780px; height: 100px; margin: 10px 10px 0 10px; padding: 0; background: url("※※※.gif") no-repeat 0 0; } div#title { width: 500px; height: 50px; line-height: 350%; margin: 0 0 0 10px; padding: 0; } div#pankuzu { width: 780px; height: 20px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } div#pankuzu p { font-size: 50%; } div#introduction { width: 780px; height: 50px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } dl#site { margin: 0; padding: 0; } dl#site dt { display: block; float: left; clear: left; width: 160px; margin: 15px 5px 10px 5px; padding: 0; font-size: 90%; text-align: left; background-color: #fff; } dl#site dd { width: 600px; margin: 15px 5px 10px 5px; padding: 0; font-size: 80%; text-align: left; } --------------------------------------------------------------- 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> ※ヘッダー部分は省略しています。 <!-- サイトボディー部分ここから --> <body> <div id="container"> <div id="keyvisual"> <div id="title"> <h1><a href="<$MTBlogURL encode_html="1"$>" title"<$MTBlogName$>"><$MTBlogName$></a></h1> </div> </div> <!-- パン屑リスト --> <div id="pankuzu"> <p class="navi-link"><a href="<$MTBlogURL$>">TOPページ</a>><MTParentCategories glue=">" exclude_current="1"><MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a><MTElse><$MTCategoryDescription$></MTElse></MTIfNonZero></MTParentCategories><MTHasParentCategory>></MTHasParentCategory><$MTCategoryDescription$> </p> </div> <div id="introduction"> <dl id="site"><dt>題名</dt><dd>説明</dd></dl> </div> ----------------------------------------------------------------

  • HTML
  • 回答数4
  • ありがとう数7

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

  • ベストアンサー
  • NauticA
  • ベストアンサー率69% (16/23)
回答No.2

dl#site dd のmargin-top:15pxが 上に突き出ている感じですね。 周囲の要素のPaddingで代用してはいかがでしょうか。

kenjinara
質問者

お礼

NauticA様 有難うございます! それを除くと無事出来ました! <div id="introduction"></div> で囲んでいる中の要素なので、関係ないと思っていました。。 本当に有難うございました。

その他の回答 (3)

  • leap_day
  • ベストアンサー率60% (338/561)
回答No.4

こんにちは 隙間をなくすだけなら#ddのCSSを margin:0px 5px 10px 15px; padding-top:15px; とすればなくなります・・・がIE6だから表示が違うのかFirefoxとOperaと比べると表示が違うようです 【IE】 [題名 ] [説明 ] 【Firefox】【Opera】 [題名 ][説明 ] どちらが正解でしょうか? introductionのheightが50pxで introductionのwidth = dtのwidth + ddのwidth = 800px なので下のほうが正解かな?とは思うのですが・・・ dl#site dt { display: block; float: left; width: 160px; margin: 15px 5px 10px 5px; padding: 0; font-size: 90%; text-align: left; background-color: #fff; } dl#site dd { width: 600px; margin: 15px 5px 10px 5px; padding-top: 0px; font-size: 80%; text-align: left; left:180px; position:absolute; } 上のほうが正解なら #ddの方にclear:left;といれてintroductionのheightを調整してください

kenjinara
質問者

お礼

leap_day様 下のほうが正解です。 左に題名を持ってきて、右に説明をという形です。 operaでは確認してなくて、どのような表示になるかまだわからないのですが、これからダウンロードしてみてみます。 ご丁寧に本当に有難うございました☆☆

  • Questa
  • ベストアンサー率48% (13/27)
回答No.3

2 の方と同じ内容ですが dl#site { ... /* padding: 0; */ padding: 1px 0; } dl#site dt { ... /* margin: 15px 5px 10px 5px; */ margin: 14px 5px 9px 5px; ... } dl#site dd { ... /* margin: 15px 5px 10px 5px; */ margin: 14px 5px 9px 5px; ... } のように変更してみて下さい。 変更の理由については、参考URLのサイトをご覧ください。

参考URL:
http://bakera.jp/ebi/topic/473
kenjinara
質問者

お礼

Questa様 ご丁寧な回答本当に有難うございました。 変更理由のサイトも拝見させて頂きました。 とっても参考になります!! これからもっと勉強していきたいと思います。

  • chie65536
  • ベストアンサー率41% (2512/6032)
回答No.1

</div> <!-- パン屑リスト --> <div id="pankuzu"> を </div><!-- パン屑リスト --><div id="pankuzu"> に、 </div> <div id="introduction"> を </div><div id="introduction"> に、変更してみて下さい。 「本来、表示の際に無視されるべき、ソーステキストの中の改行や空白行」は、意図しない隙間になって表示されます。

kenjinara
質問者

お礼

chie65536様 ご回答ありがとうございます。 早速やってみましたが、やはり変わらず隙間が出来てしまいます。。涙 試しに何パターンか、改行や空白を取り除いて更新しましたが変わりませんでした。。 どうにか解決したいのですが・・ 話は変わりますが、ソースの中で<div>の存在がわかりやすいようにする為にずらしたりしてたのですがそれもどうやらダメなようですね。

関連するQ&A

  • FireFoxで見るとdiv間に隙間が・・・

    divを3つ使い、CSSで指定した背景画像によって一つのボックスを作っています。 IE6で見たときは異常ないのですが、FireFoxで見ると、 それぞれ隙間が開いてしまい、背景画像が途切れて見えます。 同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか? 直す方法があればご指導よろしくお願い致します>< <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、 直らなかったため質問させていただきます。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • divの間にすき間ができる

    入れ子にされたdivとdivの間で隙間ができて困っております。 構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、 入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi"> を表示させるつもりですが、<div id="header2">と<div id="navi">の間に ブラウザで見たときに隙間ができてしまいます。 どうすれば隙間無く表示させることができるでしょうか? <div style="clear:both"></div>を入れてみては?と言われましたので 入れてみましたが効果はなく困っております。 【html部】 <div id="header2"> <h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1> <div class="headnavi"> <ul> <li id="access"><a href="access/index.html">地図・連絡先</a></li> <li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> <div style="clear:both"></div> </div> <div id="navi"> <ul> <li id="aboutus"><a href="about_us/index.html">会社案内</a></li> <li id="works"><a href="works/index.html">業務紹介</a></li> <li id="enviro"><a href="enviroment/index.html">環境方針</a></li> <li id="carrier"><a href="carriers/index.html">採用情報</a></li> </ul> </div> 【スタイルシート】 #header2 { height: 80px; margin-bottom: 0px; padding-bottom: 0px; } #header2 h1 { padding-top: 0px; margin: 0px; float: left; padding-bottom: 0px; padding-left: 14px; } #header2 .headnavi { height: 24px; margin-right: 14px; } #header2 .headnavi ul { padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; float: right; height: 24px; } #header2 .headnavi li { text-indent: -9999px; display: inline; list-style-type: none; } #header2 .headnavi li a { text-decoration: none; display: block; height: 24px; overflow:hidden; float: left; } /*------off----- */ #header2 .headnavi li#access a { width:124px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; } #header2 .headnavi li#inquiry a { width:125px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px 0px; } #header2 .headnavi li#sitemap a { width:121px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px 0px; } /*------hover------- */ #header2 .headnavi li#access a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: 0px -24px; } #header2 .headnavi li#inquiry a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px -24px; } #header2 .headnavi li#sitemap a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px -24px; } <div style="clear:both"></div>

  • divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

    divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・?

    • ベストアンサー
    • CSS
  • DIVの入り子のwidthの指定方法

    DIVの入り子のwidthの指定方法がうまくいきません。 <css> #main { width: 770px; margin: auto; padding: 0px; text-align: left; background-color: #cc0000; } .box_main{    width: 750px;    background-color: #FFFFFF; margin: 0px 10px 10px 10px; padding: 0px; border: 0px; } .box_1{ margin: 5px 2px 5px 5px; padding: 0px; border: 0px; height: 299px; width: 236px; background: url(img/test2.jpg); float: left; } .box_2{ margin: 5px 5px 5px 0px; border: 0px; height: 295px; width: 491px; background-color: #33ff00; float: left; } .cl { clear: both; } この際、.box_mainの中にbox_1、box_2を横ならびにおきたいのですが うまくいきません。box_2のWIDTHの幅の指定がおかししのでしょうか? HTMLは<html> <body> <div id="main"> <div class="box_main"> <div class="box_corner">あああああ</div> <div class="box_1"></div> <div class=box_2></div> <div class="cl"> </div> </div> </body> </html> です。

  • 隙間ができてしまいます。

    高さ7pxのボックスを作ったのに7px以上の大きさで表示され隙間ができてしまいます。 margin: 0px; padding: 0pxを追加しても解決しませんでした。 http://teatsite.ninja-x.jp/ ↑のborderで囲んである部分です。 この隙間の部分を埋めるにはどうすればよいのかご指摘お願いいたします。 以下ソース 【html】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div class="all"> <div class="header"> </div> <div class="menu"> <div class="font-menu"> <div class="menu-top"></div> <div class="menu-center">テスト</div> <div class="menu-bottom"></div> </div> </div> <div class="main"> <div class="font-main"> <div class="main-top"> テスト </div> <div class="main-center"> 本文テスト </div> <div class="main-bottom"></div> </div> </div> <div class="footer"> <div class="font-footer"> テスト </div> </div> </div> </body> </html> 【css】 body{ margin: 0px; padding: 0px; } img{ border: 0; vertical-align: top; } .all{ margin: 0px auto 0px auto; width: 720px; } .font-menu{ color: #ffffff; font-size: 12px; line-height: 150%; } .font-menu a:link{ color: #ffffff; text-decoration: none; } .font-menu a:visited{ color: #ffffff; text-decoration: none; } .font-menu a:hover{ color: #ffffff; text-decoration: underline; } .font-main{ font-size: 12px; line-height: 150%; } .font-footer{ font-size: 12px; } .header{ padding: 44px 0px 0px 0px; height: 56px; } .menu{ margin: 0px 20px 0px 0px; width: 160px; float: left; } .menu-top{/* 問題の部分 */ margin: 0px; padding: 0px; width: 158px; height: 0px; border: solid 1px #000000; background-image: url(pic_menu_top.png); background-repeat: no-repeat; } .menu-center{ width: 124px; height: 22px; padding: 4px 0px 0px 36px; background-image: url(pic_menu_center.png); background-repeat: no-repeat; } .menu-bottom{/* 問題の部分 */ margin: 0px; padding: 0px; width: 158px; padding: 0px; height: 5px; border: solid 1px #000000; background-image: url(pic_menu_bottom.png); background-repeat: no-repeat; } .main{ margin: 0px 0px 0px 20px; width: 520px; float: left; background-image: url(pic_main_wp.png); } .main-top{ margin: 0px; padding: 11px 0px 0px 40px; width: 480px; height: 29px; color: #ffffff; font-size: 16px; background-image: url(pic_main_top.png); background-repeat: no-repeat; } .main-center{ padding: 40px 40px 40px 40px; width: 440px; float: left; } .main-bottom{/* 問題の部分 */ margin: 0px; padding: 0px; width: 518px; height: 5px; border: solid 1px #000000; background-image: url(pic_main_bottom.png); background-repeat: no-repeat; } .footer{ padding: 14px 0px 0px 200px; width: 520px; height: 26px; text-align: center; clear: left; }

  • div配置のことで質問です。

    div配置のことで質問です。 こんにちは。タイトル通りなのですが、divタグがうまく使えません。 いろいろなサイトを参照しましたが、解決できないのでこちらで質問させてください。 お聞きしたい事は3点あります。 (下の方に画像をつけているので参照しながらお願いします。) 1.画像上の黄色のdivくくりを水色の隣に持っていきたいということ 2.赤からオレンジまでの固まりをセンターに持っていきたいということ(横です) 3.紫のdivくくりをpadding:40;に指定すると上下左右に40pxずつ幅が広がってしまうのですが、サイズはwidth900×height500のまま内側に40px余白を作りたいということ もしおわかりになる方がいらっしゃいましたら、教えていただけると幸いです。 どうぞよろしくお願いいたします。 ■スタイルシート /*------------------------------------------------------------------ */ * { margin: 0; padding: 0; } body { text-align: center; background-color: #ffffff; } body div { margin: 0 auto; border : 0 ; } /*------------------------------------------------------------------ブロック要素 */ div.all { width: 900px; margin:0; padding: 0px; } div.aka { text-align: left; width: 900px; margin:0; padding: 0px; background-color: #ff0000; } div.murasaki { font-size:10pt ; text-align: left; width: 900px; height:300px; margin:0; padding:40px; background-color: #aaaaff; } div.mizu { font-size:10pt ; text-align: left; width: 500px; margin:0; padding:0px; background-color: #00ffff; } div.kiiro { font-size:10pt ; text-align: left; width: 400px; margin:0; padding:0px; background-color: #ffff00; } div.orange { font-size:10pt ; text-align: right; width: 900px; margin:0; padding: 0px; background-color: #ff6600; } ■ボディ内 <div class="all"> <!--ーーーーーーーー赤色--> <div class="aka"> テスト </div> <!--ーーーーーーーー紫色--> <div class="murasaki"> テスト </div> <!--ーーーーーーーー水色--> <div class="mizu"> news<br /> <table cellspacing="0" cellpadding="0" width="500"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーー黄色--> <div class="kiiro"> topics<br /> <table cellspacing="0" cellpadding="0" width="400"><tr><td> テスト </td></tr></table> </div> <!--ーーーーーーーーフッター--> <div class="orange">テスト</div> </div> 長々とすみません。よろしくお願い致します。

    • ベストアンサー
    • HTML
  • <div>でレイアウトすると上下に空白が出る

    現在cssを独学で勉強中です。 どなたか解るか方、教えてください。 <div>の中にまた<div>でBOXをつくりcssでは"float"を使ってレイアウト しようとしています。 下記の内容でHTMLとcssを記述していますが、入れ子にした<div>要素の 上下に20pxくらいの空欄ができます。 これを出ないようにする方法はありますでしょうか? というか、記述としては合っているのでしょうか? 一応いろんなサイトを参考にして記述してはいます。 また、IEとfirefoxでは空欄の出方が違います。 たぶんIEのバグなんでしょうが、対処の方法も含めて教えていただけると ありがたいのですが... 空欄は"margin-top"を「-20px」とかにするとなくなるのですが 今度はSafariでその分要素自体が小さくなってしまいます。 宜しくお願いします。 ---HTML(一応DTDの部分から載せておきます)--------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" type="text/css" href="test3.css" /> <title></title> </head> <body> <div id="container">  <div id="boxA">  A(ヘッダ)  </div>  <div id="wrapper">   <div id="boxB">   B(メインカラム)   </div>   <div id="boxC">   C(サイドバー1)   </div>  </div>  <div id="boxD">  D(サイドバー2)  </div>  <div id="boxE">  E(フッタ)  </div> </div> </body> </html> --- css ----------------------- body { text-align:center; margin-top: 0px; } #container { width:800px; height: 800px; margin-top: 0px; margin-left:auto; margin-right:auto; text-align:left; background-color: #33FF66; } #boxA { width:100%; height: 150px; background-color: #9999CC; } #wrapper { width:620px; height: 200px; float:right; background-color: #33CC00; } #boxB { width:440px; height: 200px; float:left; background-color: #999933; } #boxC { width:180px; height: 200px; float:left; background-color: #FF9966; } #boxD { width:180px; height: 200px; float:right; background-color: #996699; } #boxE { width:100%; height: 150px; clear:right; background-color: #33CCCC; }

    • ベストアンサー
    • HTML
  • ieとfirefoxでdiv枠に2pxのズレ

    宜しくお願い致します。 現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせると ieではdiv枠が2px程左右にズレが生じてしまいます。ieに合わせると逆の現象が生じます。 何が原因なのか判りません。宜しくご教示下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <style type="text/css"> .clear {clear:both; } .clear hr {display:none;height:0px;font-size:0pt; } #wrap {width:810px; text-align:center; margin:0px auto;} #header{font-size:70%;color:green;margin-top:5px;text-align:center;} #menu {width:200px;height:auto; float:left;margin:0;position: relative;} #goods {width:600px;height:auto; float:right;margin:0;position: relative;} #top-title { width:200px;height:70px; float:left; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} #top-menu { width:600px;height:70px; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} /* position: relative削除したり widthの値を%にしたり色々試してみましたが??? */ .col_01_l{width:295px;height:310px;position: relative; float:left; margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_01_r{width:295px;height:310px;position: relative; float:right;margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_05 {width:200px;height:auto; float:left; margin-bottom: 8px;background-color:#ffffee; border:solid 1px #336600;} .col_06a {width:600px;height:auto; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #000000;position: relative;} </style> </head> <body> <div id="wrap"> <div id="header"> </div><!-- /header --> <div id="goods"> <div id="top-menu"> </div><!-- /top-menu --> <br style="clear:both;"> <div class="col_06a"> <br><br> </div> <br style="clear:both;"> <div class="col_01_l"> <p>ブラウザieではずれませんが、 chrome、firefoxで、この枠が 右に2pxにずれる。 どのように直せば良いか具体的にご教示下さい。</p> </div> <div class="col_01_r"> <br> </div> <br style="clear:both;"> </div><!-- /goods --> <!-- ################################################################################## --> <div id="menu"> <div id="top-title"> <br> </div> <br style="clear:both;"> <div class="col_05"> <br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> </div><!-- /col_05 --> <br style="clear:both;"> </div><!-- /menu --> <br style="clear:both;"> <!-- ################################################################################## --> </div><!-- /wrap --> </body> </html>

    • ベストアンサー
    • CSS
  • カラムで段組と段組の間に隙間が埋ができる

    カラムで段組と段組の間に隙間ができてしまい無くせません。 menuとtop,accsentなどの間に隙間ができてしまいます。 助けてください。 style.css /*html ボディー*/ html{height:100%; overflow:hidden;} body{ margin:0px;height:100%; width: 100%; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive;} .cur{font-family:cursive;} .ser{font-family:serif;} /*フレーム スタイル*/ div#menu{float:left; width:100px; height:100%; background-color:#666633;} div#top{height:10%; width:; background-color:#ff9933;} div#accent{height:3%; width:; background-color:#999933;} div#navi{height:6%; wsidth:; background-color:#ff9933;} div#main{margin-left:100px; height:; width:; background-color:#ffff99;} div#base{position:relative; width:100%; height:91%; background-color:#ffff99;} div#bottom{clera:both; height:9%; width:100%; background-color:#999933; } HTMLのほうは <HTML> <HEAD> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <TITLE></TITLE> </HEAD> <BODY> <div id="base"> <div id="menu"> menu </div> <div id="top"> top </div> <div id="accent"> accent </div> <div id="navi"> navi </div> <div id="main"> main </div> </div> <div id="bottom"> bottom </div> </BODY> </HTML> このような感じになります お願いします。

    • ベストアンサー
    • HTML
  • Firefoxでheight:100%がきかない?

    ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ:100%がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:"MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1000px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FF0000; } body > #wrapper { height:auto; } /*ヘッダの設定*/ #header { width: 1000px; height: 123px; clear: both; } /*メインコンテンツの設定*/ #container { width: 1000px; clear: both; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#00FF00; } /*左カラム外側(2カラム内包)*/ #container_left01 { width: 732px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム(左側)*/ #container_left02 { width: 268px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム(右側)*/ #container_left03 { width: 463px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height: 100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FFFF00; } /*右カラム*/ #container_right01 { width: 267px; float:left; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>

専門家に質問してみよう