safariだけ、cssが効きません！

締切済

質問者：molybdenite
質問日時：2011/10/17 01:41
回答数：3件

こんばんは。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 {
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;
}

通報する

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

質問の本文を隠す

回答 (3件)

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

No.3

回答者： noname#158634
回答日時：2011/10/17 21:01

こんばんは#1です。

帰宅したので検証しました。
使用ブラウザはIE8、FF3.6、Opera11.51、Chreome14、Safari5.1です。

＜結論＞
marginしっかり取れています。
なのでですね、質問文と#1の補足以外の部分に原因があると考えられます。それがどこかまでは私からではさすがにわかりませんが。

- 0
- 件

通報する

この回答へのお礼

ご丁寧にありがとうございます。
なにか根本的に間違っているのかもしれません…。
もう一度、しっかり見直してみます。

ありがとうございました。

通報する

お礼日時：2011/10/17 21:40

No.2

回答者： ORUKA1951
回答日時：2011/10/17 11:47

floatされている画像がある。

？画像の縦サイズに比較して文章量が少ない?
そのため、画像がブロックをはみ出しているのではないか？
floatを含むコンテナブロックに仮にボーダーを設定するとどうなりますか？

- 0
- 件

通報する

No.1

回答者： noname#158634
回答日時：2011/10/17 01:58

いやいやちょっと待った。

そこより下の部分がどうなってるか書いてくれないと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-transitio …
<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>

<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>

</div>
<img src="img/footer.gif" width="750" height="23" alt=" " />
</div>
</div>
</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;
}