- ベストアンサー
footerのmarginが適用されません
http://chicken-tori.21mhz.net/web/index.html http://chicken-tori.21mhz.net/web/css/layout.css footerの上にmargin-top: 10px;を適用させたんですが、IEだとちゃんと適用され、FireFoxだと適用されず、くっついた状態です 。 どのようにすれば、marginを適用できるんでしょか？
- geothermal
- お礼率21% (8/38)
- HTML
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
関連するQ&A
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- HTML
- firefoxでもmargin設定がいかない
firefoxでmargin top: 10px;が表示されないんです。 IEでは出来るんですがなぜなんでしょうか？
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSレイアウトでフッターをうまく配置出来ません。
CSSで初めてレイアウトしていますが、テキストがふえた場合、フッターが文章部分と重なってしまいます。文章部分が増えた分だけ、フッターの位置を自動的にずらすようにしたいのですが・・・floatで作り変えを考えていますが、今のやり方で出来るのかどうか、どうしても確認したいのです。どうぞ宜しくお願い致します。 以下サンプルのソースです。 <body> <div id="layout"> <div id="header"> <h1><img src="img/co.gif"></h1> </div> <div id="mainarea"> <div id="navi"> <h2><img src="img/button.gif"></h2> <ul> <li class="naviatem">メニュー</li> </ul> </div> <div id="main"><img src="img/contact.jpg"></div> <div id="scontents"> <form> <table width="90%" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="contact">内容</td> <td class="contact1"><textarea cols="50" rows="10"></textarea></td> </tr> </table> </form> </div> </div> <div id="footer"> <p>フッター部分</p> </div> </div> </body> -------CSS------------- #layout{ width: 750px; height: 100%; margin-left: auto; margin-right: auto; } #header{ width: 750px; height: 63px; margin: 0px; } #mainarea{ margin-top: 16px; width: 750px; height: 100%; } #navi{ width: 183px; margin-left: 3px; } #main{ position:absolute; width: 561px; margin-left: 189px; top: 81px; } #footer { margin: 30em 0 0 0; width: 750px; border-top: 1px solid #666666; position : relative; z-index: 1; } #scontents{ position:absolute; margin-left: 192px; top: 250px; width: 553px; }
- ベストアンサー
- CSS
- フッターの上へのマージンがあけれない
この度フルＣＳＳでサイトを作ってFirefoxでブラウザチェックしたのですが、フッターの余白がfirefoxであいていませんでした。 ＩＥ上では上へ２０ｐｘあいているのですが。。。 ページの簡単な内容は下記の通りになります。 Firefoxで「c」のフッターの上部にマージンを調整するにはどうしたらいいのでしょうか？ どなたか教えて頂けたら助かります。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #a { float: left; width: 200px; background: #0066FF; } #b { float: left; width: 200px; margin-left: 20px; background: #FF0066; } #c { clear: both; width: 500px; margin-top: 20px; background: #CCCCCC; } --> </style> </head> <body> <div id="a">左コンテンツ </div> <div id="b">右コンテンツ</div> <div id="c">フッター</div> </body> </html>
- 締切済み
- CSS
- CSSでmarginを指定すると、表示の仕方がブラウザによって変わってしまいます。
はじめまして、CSS初心者です。 お聞きしたいことがあります。 ---CSS--- body{ margin:0px; padding:0px; } #formbox{ width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; } ---HTML--- <div id="formbox"> <div id="box">ほげほげ</div> </div> というHTMLをIE6.0とfirefox1.5で表示させたときに、 <div id="box">のmargin-leftがIE6.0だと60pxぐらいになってしまいます。firefoxでは、30pxとられているようなのですが…。 IE6.0とfirefox1.5で誤差が生じしてしまうのはなぜなのでしょうか。 どなたかご教授お願いできないでしょうか。 よろしくお願い申し上げます。
- ベストアンサー
- HTML
- カラム高さ揃え+固定フッター
いつもお世話になります。 ●確認ブラウザIE6、IE7、FF、 Mac Safari FF 左側幅可変のリキッドレイアウトの中で、 div#wrapの中にある「#boxB、#boxC」のカラム高さが揃った上で #footerはページ下部に固定されている、添付図の状態にしたい。 ●できてること： IE7、FFにおけるカラム高さの統一、固定フッタ ●ここができない： 1.IE6にてboxBとCの高さが揃わない（Cが足らない） 2.#wrapと#footerにすきまが空く（boxBとCの背景色がfooterの上まで来てほしいのです）（全部のブラウザにて） ★CSS /*リキッドレイアウト部分*/ * { margin:0; padding:0; } body { text-align:center; } #container { width:96%; margin-left:auto; margin-right:auto; text-align:left; } #boxA { background:#ffc; } #boxB { background:#fcc; width:100%; float:left; margin-right:-200px; } #boxB p { margin-right:200px; } #boxC { background:#ccf; width:200px; float:left; } #boxD { background:#cfc; width:100%; float:left; } /*100%固定フッタのためのCSS*/ *{ margin:0; padding:0; } html,body{ height:100%; background-color: #000000; color: #000000; } html{ overflow-y:scroll; } #container { width: 100%; position: relative; height: auto !important; height: 100%; min-height: 100%; } div#footer{ position:fixed; bottom:0; left:0; text-align:center; width:100%; } /* * * IE6 * * * */ * html, * html body{ overflow-y:hidden; } * html div#maincontents{ height:100%; overflow-y:scroll; } * html div#footer{ position:absolute; } /* カラム高さが違うものを揃える */ #wrap { overflow:hidden; } #boxB,#boxC { padding-bottom: 32768px; margin-bottom: -32768px; }
- ベストアンサー
- HTML
- firefoxにおけるmargin-topの表示について【CSS】
教えてください。とても困っています。 下記のようなCSSがあります。 #big { margin: 0px; padding: 0px; width: 150px; background: #000000; height: 150px; } #small { margin: 5px; padding: 0px; height: 140px; width: 140px; text-align: center; background: #FFFFFF; } これをｈｔｍｌで次のようにします。 <div id="big"> <div id="small"> </div> </div> これでしたら、IEのほうでは、bigの中にきちんと#smallが収まっていて、 #smallのマージンも上下左右きちんと5pxずつ取られていて、 結果的に見た目は#smallの周りに黒い5pxの枠（#big）があるような四角が出来上がります。（自分的に意図したのがこの形です） ですが、firefoxで見ると、なぜか#smallのtopのマージンだけうまく反映されてなくて #bigにmarginが反映されてしまうようになります。 結果的に、#smallの周りに出来るはずの5pxの枠は左右はきちんとできるのですが、 下に10pxの黒枠が出来て、上には枠は出来ず、#bigごと5px下に下がったような形になります。 どのようにしたら、firefoxでもちゃんとしたtop-marginの表示が出来るのでしょう？ (=IEのように表示できるのでしょうか？） ちなみに、#bigか#smallにfloatで右か左を設定したら、IEでもfirefoxでも キレイな形になります。 ただ、この方法が正しいのかわからなくて。 ご存知の方がいらっしゃいましたら、教えていただけますか？
- ベストアンサー
- HTML
- 【CSS】IE6で印刷時にレイアウトが崩れる
大変困っています。 印刷を前提に作ったページではないのですが、 クライアントから印刷時にレイアウトが崩れて印刷できないとご指摘を受けました。 そこで、IE6とFirefoxで確認したところ、 Firefoxではレイアウトが崩れずきちんと印刷されますが、 IE6では2カラムの右側（メイン部分）が消えてしまっています。 （IE7は自分のオフィスでは入れてはいけないことになっているので、IE7では確認していません。） 何か問題があれば、ご指摘お願い致します。 <div id="container" class="clearfix"> <div id="siteSub"> ああああああ </div> <div id="siteMain"> いいいいいい </div> </div> ■CSS-------------------------------- div#container{ width: 950px; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } div#siteSub{ margin: 0px; padding: 0px; width: 230px; display: block; float: left; } div#siteMain{ padding: 0px; float: left; width: 710px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 10px; } 右側のメイン部分が消えてしまっているので、 大雑把にレイアウト部分だけ書いてみました。 siteMainの中身のCSSのfoat要素等が関わってくることはあるのでしょうか。 linkの部分は media="all"としています。 <link rel="stylesheet" type="text/css" href="css/import.css" media="all"> また、Yahoo! UI Libraryを参考にした、reset.cssも入れています。
- 締切済み
- HTML
- firefoxでmargin-topが効かない
下記のソースとCSSでHPを制作しています、 ナビゲーション<ul id="menu">その下に <!-- content --> <div class="title">としてimgを入れてます、 ナビゲーションと<div class="title">の間に<div class="title">側で margin-top : 20px;を指定しました、IE6・7・8では希望通り表示されますがfirefoxではmargin-top : 20px;が無視されているのか ナビゲーションと<div class="title">の間がくっついて表示されます。 どなたか解決策、間違いがありましたらご指導ください、お願いします。 ソース記述 <!-- menu --> <ul id="menu"> <li id="mnu1"><a href="index.html" id="index.html" name="index.html" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'menu/menu1.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'menu/menu01.gif');"><img src="menu/menu1.gif" width="114" height="44" alt="HOME" name="_HPB_ROLLOVER1" /></a></li> 以下省略 </ul> <!-- /menu --> <!-- content --> <div class="title"><img src="img/titlebar.gif" width="772" height="37" alt="楽しいケーキ作り" /> <h2>まずは生地作りから</h2> <p>●********** <br /> <p> </div> CSS記述 ul#menu{ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; padding: 0px; } ul#menu li{ float : left; list-style-type : none; .title{ margin-left : 14px; margin-bottom : 5px; margin-top : 20px; width : 772px; } .title h2{ font-size : 15px; padding-top : 12px; padding-left : 23px; margin-bottom : 20px; font-weight : bold; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; margin-top : -40px; } .title p{ font-size : 14px; color : #ffffff; padding-left : 20px; line-height : 1.6; margin-bottom : 10px; margin-top : 0px; width : 772px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; letter-spacing : 1px; } 以上宜しくお願いします。
- 締切済み
- HTML
- CSSハックの使い方を教えてください
CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか？ 実際の記述方法を教えていただけないでしょうか？ 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか？ #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }
- ベストアンサー
- HTML
お礼
ありがとうございます。間を空けることができました。footerのmargin-topが適用されず、menuとmainでmargin-bottomが適用できた理由はなぜなんでしょうか？