こんばんは。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;
}
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
floatされている画像がある。
?画像の縦サイズに比較して文章量が少ない?
そのため、画像がブロックをはみ出しているのではないか?
floatを含むコンテナブロックに仮にボーダーを設定するとどうなりますか?
No.1
- 回答日時:
いやいやちょっと待った。
そこより下の部分がどうなってるか書いてくれないと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><!--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:"MS Pゴシック","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;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
画面の分割
-
widthやheightの数値に単位(px...
-
W3Cのソースコードの検証サービ...
-
css初心者 フレックスボックス...
-
CSS:animation開始位置の設定
-
横並びリスト ブラウザ縮小 カ...
-
div内に外部のurlを表示させたい
-
表示倍率を変えるとレイアウト...
-
【HTML】【CSS】【Swiper】 元...
-
li 黒丸含んで移動する方法
-
メイン画像とグローバルメニュ...
-
HTMLでCSSでボーダーが表示され...
-
CSSがなぜかfont-sizeだけ効か...
-
大きな画像の上にメニューを画...
-
どう変更してもIE6だけCS...
-
CSSでhover時に画像変更したい
-
インラインフレーム内の表示位...
-
CSSでborderの長さを指定、また...
-
safariだけ、cssが効きません!
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS:animation開始位置の設定
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
CSSで背景画像を一番下にもって...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報