safariだけCSSが崩れてしまいます
safariだけCSSが崩れてしまいます。
初心者ですが、教えて下さい。
コンテンツ部分の中に、画像(説明文付き)を横並びに３列並べて表示するためにfloatで指定してあります。
下記のように並べたいのですが、safari以外のブラウザでは全てうまく表示されるのに、safariだけ2と３が下に落ちて崩れてしまいます。
1 2 3
4 5 6
どのようにしたら横に並んでくれるのか、わかりません。。
どうかお詳しい方、ご教授下さい。
______________________________________
#secondary {
float:left;
width:705px;
padding:10px 0 0 15px;
margin:0;
}
.index .module {
float:left;
width:210px;
margin:0 17px 0 0;
padding:0 4px;
text-align:left;
}
.galleries {
background:#eee;
float:left;
width:100%;
margin:0 0 15px;
position:relative;
}
.gallery .galleries {
float:left;
position:relative;
width: 720px;
margin:0 0 15px;
padding:0;
list-style:none;
padding-top:10px;
line-height:1.4em;
}
.gallery .galleries .thumb {
float:left;
margin:0 10px 10px 0;
}
.index .galleries {
margin-bottom:5px;
}
.galleries ul {
float:left;
margin-left:0;
margin-bottom:0;
list-style:none;
text-align:left;
}
.galleries li {
background-image:none;
float:left;
position:relative;
width:220px;
height:6.4em;
overflow:hidden;
margin-bottom:0;
padding:75px 0 1.6em 15px;
}
.archive .galleries li {
height:10.5em;
}
.galleries h3 {
margin:0 10px 0 4px;
font-size:100%;
}
.galleries h3 a, .galleries a.img, .galleries h3 a:visited {
border-width:0;
}
.galleries .img {
position:absolute;
top:4px;
left:15px;
}
.galleries .img img {
display:block;
}
.galleries p {
margin:0 10px 0 4px;
}
.galleries div {
margin:0 4px;
}
.gal {
background:url("../images/bg_gal.gif") 11px 0px no-repeat;
margin:0;
}
html>body .gal {
background-image:url("../images/bg_gal.png");
}
お礼
回答ありがとうございます。 「div」のところを「.」に変え、 若干書き方を変更したら、 反映できました。