CSSテクニックコミュのfirefoxでマージンが効かない

はじめまして。最近CSSを勉強し始めた初心者です。

早速質問なんですが、一部のDIVだけがfirefoxでマージンが効かないのです。色々試し、ネットで調べたのですが一向に分かりません。他のブラウザ(IE/OPERA)では正常に表示されます。

こうゆう事はあり得ますか？それと何か解決法をご存知の方教えてください、お願いします。

コメント(19)

最初
全て
最新の40件

[1] mixiユーザー 03月22日 23:42

せめてソースを提示いただかないと、コメントのしようがないかと。
仮に知られざるFireFoxのバグだとしても、検証のしようがありません。

[2] mixiユーザー 03月23日 00:06

はじめまして☆
ginnezさんの言うとおりソースを見ないとちょっと
わかりませんが、覚えはじめの時に記述の仕方か
なんかの間違いかでmarginが効かなかった覚えがあります。
最近自分の技術の向上伴いそんなことがないので忘れましたが…
ですのでソースとかそれをみれるページのURLがあれば
わかるかもしれないんで宜しくです♪

[3] mixiユーザー 03月23日 01:12

clearプロパティを指定したボックスの上マージンは、Firefoxとそのほかのブラウザとで解釈が異なっているのですが、それとは違いますか？

[5] mixiユーザー 03月23日 01:26

隣り合うボックス同士にマージンを設定したため値の少ない方が無効化されてるということはないでしょうか？

[7] mixiユーザー 03月23日 17:23

これかな？
http://mb.blog7.fc2.com/blog-entry-62.html

[9] mixiユーザー 03月24日 00:19

説明不足、失礼致しましたm(_ _)m

色々なご意見ありがとうございます。ただ、私がまだ勉強不足ゆう事もあり理解に苦しんでます。

この部分だけでは不足かもしれませんが、、問題箇所のソースです↓

#SIDE {　　/* サイド枠 */
float: right;
width: 200px;
margin: 5px 10px 5px 0px;
display: inline;/* IEのmarginバグ回避 */
background-color: #990000;

何か思い当たる箇所があれば是非教えて下さい、お願いします。

[10] mixiユーザー 03月24日 01:07

＞IE.FFで共通レイアウトにすには後続の要素にpadding指定するしかないのでしょうか?

フロートの後続のボックスに上パディングか、あるいはフロート自体に下マージンが良いと思います。

[11] mixiユーザー 03月24日 01:25

IEbeta2でもclearのために必要な（自動）上マージンと、指定した上マージンとは別に扱われているみたいですね。Opera8でもIEと同じ挙動のようです。

[12] mixiユーザー 03月24日 01:35

|* ﾟーﾟ)ｵｼﾞｬﾏﾃﾞｽ

多分
#SIDE {　　/* サイド枠 */
float: right;
width: 200px;
margin: 5px 10px 5px 0px;
display: inline;/* IEのmarginバグ回避 */
background-color: #990000;

の/* サイド枠 */が問題です。
スペースを削除するとうまくいくと思います。
間違ってたらごめんなさい(´・ω・`)

[13] mixiユーザー 03月24日 01:40

＞かなさん

/* サイド枠 */ というコメントの前にある全角スペースは、実際にも入っていますか？入っているのだとしたら、FFではそのために最初のfloat: right; が無視されているのだと思います。

float: right; が無視されると・・

IE用に入れたdisplayプロパティの値のinlineがblockに置き換わらなくなるため#SIDEはインラインボックスのままになってしまいます。それから、widthプロパティと、上下のマージンも無視されてしまいます。

全角スペースは実際には入っていないのでしたら上のは的外れですなのですが。。。

[14] mixiユーザー 03月24日 10:59

> かわち丸さん、こばさん

/* サイド枠 */ というコメントの前にある全角スペースは実際入っていて、消してみたら何とマージンが効きました!!

こんな事でずっと悩んでいたのか(泣)
とりあえずすごい嬉しいです、本当ありがとうございます!!

[16] mixiユーザー 03月25日 09:10

Firefox の場合、[ツール] - [JavaScriptコンソール] を表示すると、エラーはある程度推察できると思います。

mixi.css でもエラーがいくつかあります。

[17] mixiユーザー 03月25日 23:40

こんな機能があったんですね、これから活用していけそうです☆
教えて頂きありがとうございます。

[18] mixiユーザー 03月28日 18:00

はじめまして。CSSのコメントは入れ子にならないようにしたほうがいいですよ。基本的にCSS内の入れ子コメントはW3Cの文法違反にもなってますので・・・。
コメントはメモや注意書きとして利用するのが一般ですが、
あれは表示指定の一部を無効化する役割を持っているので

見させていただいたソースからいくと・・・。
#SIDE {　　/* サイド枠 */←コレと
float: right;
width: 200px;
margin: 5px 10px 5px 0px;
display: inline;/* ←コレが反応して一部無効化になったかもしれません。

僕も同じ経験をしたことがあり、先輩に聞いて知りました。
やっぱりスタイルシートを分かりやすくしようと思うとどうしてもコメントを入れてしまいますよね。でも基本的にはコメントを入れ子にするのはさけたほうがいいですよ。

[19] mixiユーザー 03月29日 14:36

> 18: hironさん

"コメントは入れ子にならないようにしたほうがいい"はその通りですが、今回の件は入れ子になっていませんよ。

コメントの入れ子とは以下のような形を指しますよね。

/* コメント /* コメント */ */

> 基本的にCSS内の入れ子コメントはW3Cの文法違反にもなってますので・・・。

基本的にというか明確な違反ですね。

http://www.w3.org/TR/1999/REC-CSS1-19990111.html#comments
> Comments cannot be nested. For a CSS1 parser, a comment is equivalent to whitespace.

http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#comments
> Comments begin with the characters "/*" and end with the characters "*/". They may occur anywhere between tokens, and their contents have no influence on the rendering. Comments may not be nested.

ログインすると、残り4件のコメントが見れるよ