締切済み

Firefoxでネガティブマージンが効かない

2009/03/15 01:40

はじめまして。CSS＋XHTMLでサイトを制作していて行き詰ってしまいました。 IE6,7,Safari3では有効となるネガティブマージンがFirefox3で有効になりません。テストであげました。 http://www.raki-suta.net/beauty/ フッターの部分にマイナスマージンを指定したのですが、Firefoxだけ効いていないようです。 [html] <div id="footer"> <div id="footer_inner"> <address> Copyright(C) <a href="/">キレカワナビ☆</a> All Rights Reserved. </address> </div> </div> [css] #footer_inner { background: url(../img/top_28.jpg) no-repeat; height: 51px; padding-top: 250px; } #footer { background: url(../img/top_30.jpg) repeat-x 0 178px; height: 301px; text-align: center; clear: both; margin-top: -200px; } 何が悪いのでしょうか。アドバイスお願いします。

vued
お礼率14% (1/7)

HTML
回答数4
ありがとう数1

みんなの回答 （4）
専門家の回答

みんなの回答

noname#83877

2009/03/17 11:42 回答No.4

すみません。訂正です .clearfix:after { content:"."; display:block; visibility:hidden; height:0; clear:both; } .clearfix { height:1%; overflow:hidden !important; overflow:visible; /*/*//*\*//*/ display:inline-table; /* */ }

ログインすると、全ての回答が全文表示されます。

noname#83877

2009/03/17 11:41 回答No.3

clearしているからだと思いますが・・・どうしてもマイナスマージンが必要なレイアウトなのですか？もしもそうならfloatしている要素の親要素にclearfixの指定を加えるぐらいしか手が無いと思いますが・・・ .clearfix:after { content:url(../image/clearfix.gif); display:block; height:0; clear:both; } .clearfix { height:1%; overflow:hidden !important; overflow:visible; /*/*//*\*//*/ display:inline-table; /* */ }

ログインすると、全ての回答が全文表示されます。

rukuku
ベストアンサー率42% (401/933)

2009/03/16 10:31 回答No.2

はじめまして vuedさんがどのように表示をしたいのかが正確につかめていませんが、以下のソースを試してみてください。境界が分かりやすいように枠をつけましたが、ポイントは、 position:relative; top: -1em; と、マイナス指定は「親要素の"margin"」に対してでなく、「子要素の"position"」に対して行っています。 margin :0 auto; はFireFoxで内側のDIVを中央に持って行くための設定です。 <HTML> <HEAD> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css">  </STYLE> <TITLE>Sample</TITLE> </HEAD> <BODY> <P style="height:300px;">本文</P> <div id="footer"> <div id="footer_inner"> <address> Copyright(C) <a href="/">キレカワナビ☆</a> All Rights Reserved. </address> </div> </div> </BODY> </HTML>

参考URL：: http://oshiete1.goo.ne.jp/qa4790446.html

質問者

お礼 2009/03/16 23:42

コメントありがとうございます。 http://www.raki-suta.net/beauty/ このページをIEで見たときが意図したもので、Firefoxではネガティブマージンが有効にならずメインコンテンツとフッターの間に大きな隙間があいています。 #footer_innerをrelativeで、、、というのはやってみましたが、上に持っていきたい数値が-200pxで、もともと#footer_innerがあった場所がそのまま残ってしまいフッターエリアの高さが大きくあいてしまいます。改めて確認してみると、FirefoxだけでなくOperaでもネガティブマージンがきいてませんでした。。。。

ログインすると、全ての回答が全文表示されます。