- ベストアンサー
<div>と<div>の間の１０px程の隙間が消えなくて困っています。Firefox＆safari
はじめまして。 現在movabletype3.35で初めてサイトを作成している者です。 宜しくお願いします。 下記にありますＨＴＭＬとＣＳＳでページを作っているのですが、 Firefoxやsafariで確認すると、 <div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている <div id="introduction">で囲んだボックスの間に１０px程の隙間が出来てしまいます。 ※ＩＥ７では隙間は出来ませんでした。 <div id="keyvisual"> ← ※<div id="pankuzu">のすぐ上のボックス <div id="pankuzu"> <div id="introduction"> これら３つのボックスには全てＣＳＳでmarginとpaddingを調整しているつもりなのですが、どうしてもＩＥ７と同じように表示されず隙間が出来てしまいます。。 ちなみに、試しに一度<div id="pankuzu">のボックスをまるまる削除して表示した所、<div id="introduction">のmargin-topに0pxと指定しているのにかかわらず、この場合も10px程の隙間が出来ました。。 ということは、<div id="introduction">の中のＨＴＭＬかＣＳＳの書き方か指定に何か問題があるのかと思っているのですが、どうしても解決できません。 是非ご指導、ご鞭撻宜しくお願い致します。 ---------------------------------------------------------------- 【ＣＳＳ】 * { 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; } --------------------------------------------------------------- 【ＨＴＭＬ】 <!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> ----------------------------------------------------------------
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
dl#site dd のmargin-top:15pxが 上に突き出ている感じですね。 周囲の要素のPaddingで代用してはいかがでしょうか。
その他の回答 (3)
- leap_day
- ベストアンサー率60% (338/561)
こんにちは 隙間をなくすだけなら#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を調整してください
お礼
leap_day様 下のほうが正解です。 左に題名を持ってきて、右に説明をという形です。 operaでは確認してなくて、どのような表示になるかまだわからないのですが、これからダウンロードしてみてみます。 ご丁寧に本当に有難うございました☆☆
- Questa
- ベストアンサー率48% (13/27)
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のサイトをご覧ください。
お礼
Questa様 ご丁寧な回答本当に有難うございました。 変更理由のサイトも拝見させて頂きました。 とっても参考になります！！ これからもっと勉強していきたいと思います。
- chie65536
- ベストアンサー率41% (2512/6032)
</div> <!-- パン屑リスト --> <div id="pankuzu"> を </div><!-- パン屑リスト --><div id="pankuzu"> に、 </div> <div id="introduction"> を </div><div id="introduction"> に、変更してみて下さい。 「本来、表示の際に無視されるべき、ソーステキストの中の改行や空白行」は、意図しない隙間になって表示されます。
お礼
chie65536様 ご回答ありがとうございます。 早速やってみましたが、やはり変わらず隙間が出来てしまいます。。涙 試しに何パターンか、改行や空白を取り除いて更新しましたが変わりませんでした。。 どうにか解決したいのですが・・ 話は変わりますが、ソースの中で<div>の存在がわかりやすいようにする為にずらしたりしてたのですがそれもどうやらダメなようですね。
お礼
NauticA様 有難うございます！ それを除くと無事出来ました！ <div id="introduction"></div> で囲んでいる中の要素なので、関係ないと思っていました。。 本当に有難うございました。