- 締切済み
safariだけ、cssが効きません！
こんばんは。css入門者です。 Firefoxなどは大丈夫なのですが、safariだけ、 .staffのmargin-bottom:20px;が効きません。 どこが間違ってるのかわからず、困っています。 どうぞよろしくお願いいたします。 <div class="staff"> <p class="staff_name"><img src="img/name_shige.gif" width="107" height="85" alt="ああ）" /></p><br /> <p class="staff_word">いいいいいい</p> <div class="clearfix"><hr /></div> </div><!-- staff end --> ------------------------ .staff { width:670px; margin-bottom:20px; background-color:#d1ece6; line-height:150%; } .staff_name { float:left; margin:0px; } .staff_word { background-color:#FFF; margin:0px 20px 20px 107px; padding:7px; }
- molybdenite
- お礼率33% (1/3)
- CSS
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
こんばんは#1です。 帰宅したので検証しました。 使用ブラウザはIE8、FF3.6、Opera11.51、Chreome14、Safari5.1です。 ＜結論＞ marginしっかり取れています。 なのでですね、質問文と#1の補足以外の部分に原因があると考えられます。それがどこかまでは私からではさすがにわかりませんが。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
floatされている画像がある。 ？画像の縦サイズに比較して文章量が少ない? そのため、画像がブロックをはみ出しているのではないか？ floatを含むコンテナブロックに仮にボーダーを設定するとどうなりますか？
いやいやちょっと待った。 そこより下の部分がどうなってるか書いてくれないとmargin-bottomが本当に効いてないのかどうかわからないですよ。 というか、間違った記述でもしてない限り「効かない」はありえない。 とりあえず、その外側に<div></div>を一枚だけかませたソースをこちらで用意したところ、IE8、Chrome、Opera、FF、Safariでmargin-bottom:20pxが聞いていることが確認されました。なのでその部分には問題ありません(HTML、CSS的にどうなんだというツッコミどころはあるが、それは詳しい人が後で現れるし今の本題ではないので割愛)。 ということで、その部分の下と、外側にボックスがあるならその部分を捕捉してください。
補足
すみません >< 補足します！ g_naviは長いので入りきりませんでした。 <!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=UTF-8" /> <title>ああ</title> </head> <body> <div id="wrapper"> <div id="contents"> <img src="img/header01.gif" alt="" width="750" height="21" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="589,4,719,21" href="contact.html" /> </map> <h1><a href="index.html"><img src="img/title.gif" width="292" height="53" alt="あ" /></a></h1> <div id="g_navi"> <ul> <li class="g_navi01"><a href="index.html" title="あ">home</a></li> <li class="g_navi02"><a href="about.html" title="い">about</a></li> <li class="g_navi03"><a href="event.html" title="う">event</a></li> <li class="g_navi04"><a href="action.html" title="え">action</a></li> <li class="g_navi05_on"><a href="staff.html" title="お">staff</a></li> <li class="g_navi06"><a href="donation.html" title="か">donation</a></li> </ul> </div><!--g_navi END--> <div class="clearfix"><hr /></div> <div id="main"> <h2><img src="img/h2_staff.gif" width="115" height="20" alt="あ" /></h2> <p id="staff_pics"><img src="img/staff_pics.jpg" width="428" height="206" alt=" " /></p> <div class="staff"> <p class="staff_name"><img src="img/name_shige.gif" width="107" height="85" alt="あ" /></p><br /> <p class="staff_word">ああああ</p> <div class="clearfix"><hr /></div> </div><!-- staff end --> </div><!-- main end --> <img src="img/footer.gif" width="750" height="23" alt=" " /> </div><!-- contents end --> </div><!-- wrapper end --> </body> </html> --------- @charset "UTF-8"; .clearfix {zoom:1;} .clearfix:after{ content: ""; display: block; clear: both;} *{ margin:0; padding:0; border:none; } body { font-family:"ＭＳ Ｐゴシック","Osaka",sans-serif; color:#493d21; font-size:14px; line-height:140%; } #wrapper { margin:10px auto; width:750px; } #contents { width:750px; background-image:url(../img/bg.gif) ; background-repeat: repeat-y; } #main { margin:40px; } h1 { margin:0 0 23px 1px; } h2 { margin:20px 0px 10px 0px; } #staff_pics { text-align:center; margin-bottom:20px; } .staff { width:670px; margin-bottom:20px; background-color:#d1ece6; line-height:150%; } .staff_name { float:left; margin:0px; } .staff_word { background-color:#FFF; margin:0px 20px 20px 107px; padding:7px; }
お礼
ご丁寧にありがとうございます。 なにか根本的に間違っているのかもしれません…。 もう一度、しっかり見直してみます。 ありがとうございました。