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

締切済

質問者：vued
質問日時：2009/03/15 01:40
回答数：4件

はじめまして。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;
}

何が悪いのでしょうか。
アドバイスお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： noname#83877
回答日時：2009/03/17 11:42

すみません。

訂正です

.clearfix:after {
content:".";
display:block;
visibility:hidden;
height:0;
clear:both;
}
.clearfix {
height:1%;
overflow:hidden !important;
overflow:visible;
/*/*//*\*//*/ display:inline-table; /* */
}

- 0
- 件

通報する

No.3

回答者： noname#83877
回答日時：2009/03/17 11:41

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; /* */
}

- 0
- 件

通報する

No.2

回答者： rukuku
回答日時：2009/03/16 10:31

はじめまして

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

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2009/03/16 23:42

No.1