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");
}

No.2 回答者： k0021 回答日時： 2011/06/22 06:28

No.1さんゆうとうり 原因を推測なんてませんが。

３行の段組を記述します。必要の内容を記述しておかしくなった内容を検討してください。

<div style="width:705px;clear:both;">
<div style="width:210;float:left;margin-right:1.2em;">内容1</div>
<div style="width:220;float:left;">内容2</div>
<div style="width:210;float:left;">内容3</div></div>
<div style="width:720px;clear:both;">
<div style="width:220;float:left;margin-right:1.2em;">内容4</div>
<div style="width:220;float:left;">内容5</div>
<div style="width:220;float:left;">内容6</div></div>

float:left;
width:705px;
は、
width:705px;clear:both;
でないですか。
clear:bothを指定しないSsfari参照したプラウザ表示状態を添付します

この回答へのお礼

ご回答ありがとうございます。
かなり時間が経ち過ぎてしまい申し訳ございません。

いろいろと試してみましたが解決ならず、諦める事に致しました。

お礼日時：2011/10/27 10:57

No.1 回答者： ORUKA1951 回答日時： 2011/06/21 19:17

驚くほど煩雑なCSSを読み取ってHTMLを想像して原因を推測なんて勘弁してください。

それで推測される原因も正解でない場合が多いでしょう。
　下記の点だけ教えてください。
・文書構造
　本文中のどの部分に画像リストがあるのか
・貼り付ける画像のサイズ
・その画像は<a href=""></a>で囲まれているのか？
・画像リスト周りのマークアップの凡例

　

この回答へのお礼

ご回答ありがとうございます。
かなり時間が経ち過ぎてしまい申し訳ございません。

いろいろと試してみましたが解決ならず、諦める事に致しました。

お礼日時：2011/10/27 10:57