cssレイアウトでSafariだけがどうしても崩れます

質問

こんばんわ、いつもお世話になっております。少しまえにも同じような感じで質問させていただいたのですが、
あれからなんとかいろいろなブラウザで修正をして見れるようになったのですが、
どうしてもSafariだけがレイアウトがひどくくずれてしまいます。
どこを直したらいいのかわからない状態でして、もし何かヒントがありましたら教えていただけますでしょうか？
だいたいの感じですが、floatを使用してる部分が（普通はちゃんと左右にレイアウトされる部分が上下にずれている、、）おかしいのですが
何を修正すればいいのかわかりません、。
よろしくお願いいたします。

回答No.4

345itati · ベストアンサー

CSSで指定しているidをどんな要素に当てたのか書いて下さらなかったので^^;
適当な画像と文章を当てはめて表示させましたけど、

>普通はちゃんと左右にレイアウトされる部分が上下にずれている

という感じではありませんでしたが？
#wrapper～imgで指定されているのが画像だとして、#wrapper～ulが説明文の段落のidだとするときちんと左右にレイアウトされて表示されます。

手持ちのFirefox1.5.0.4、Netscape7.2、Opera9.0、IE5.2.3、Safari2.0.4(最新版のSafariになります)で特にレイアウトに違いはありませんから、この記述に問題は無いようですが・・・・。

ちなみにOSに残ってるOpera7.53お試し版で表示させたら見事に上下にずっこけたのでそんな感じの事なんでしょうかね？

補足

早速回答していただきありがとうございます。
>#wrapper～imgで指定されているのが画像だとして、#wrapper～ulが説明文の段落のidだとするときちんと左右にレイアウトされて表示されます。

説明がへたくそで本当に申し訳なく思います。上記の通りなのですが、Safariの最新版ではレイアウトにくずれはないという事で、さっそく自分でも試してみたいと思います。
Safariの古いバージョンではOpera7.53のように上下にずっこけた状態（たぶん同じ感じだと思います。）になるのですが、
これはもう無視してもいいのでしょうか？また何が原因かってのがわかりましたら是非教えて下さい。よろしくお願いします

回答No.5

918BG

＞Safariの古いバージョンでは…これはもう無視してもいいのでしょうか？

ただ単に「古い」というだけで、具体的なバージョンを示していただけないのでは、判断のしようがありません。

大まかな目安ですが、Safariのバージョンは1.3.x以降が多数派で、1.2.xまでのバージョンは最近では少数派になりました。質問者さんがSafari 1.2.xまでのバージョンで表示確認をされているのでしたら、ある程度表示が崩れてもやむを得ないかな(好ましくはないですが)、という気はします。

回答No.3

KanjiTalk

最新版のSafari RSSを使って表示していますか？

補足

ありがとうございます。
普通にSafariを起動して、表示させてだけなのでRSSを使って表示とか、、
の意味がわからないのですが、、、、、申し訳ありません。
それが原因なのでしょうか？

回答No.2

chirashizushi

Macで作業してますか？Winでの作業ならあきらめてsafariは無視してください(^^;

補足

こんばんわ、winで作業しているのですが、safariは無視しちゃっても
大丈夫なのでしょうか？
クライアント様に何か言われたときにどういえばいいでしょうか？
何か納得してもらえる説明のしかたがありましたら教えていただけますでしょうか？

回答No.1

345itati

崩れるというCSSの記述を具体的に書き込んでみて下さい。

実際に見てみないと検証のしようがありません^^;

補足

ありがとうございます。では実際に記述させていただきます。
わかりにくい部分があるかと思いますができるだけの説明を
加えさせていただきます。
/*メイン部分（真ん中の段）開始///////////////////////////////////////*/
#wrapper #contents #main2 {
margin: 0px;
padding: 0px;
height: 260px;
width: 520px;
float: right;
}
/*新人紹介部分*/
#wrapper #contents #main2 #newface {
margin: 0px;
padding: 0px;
float: left;
height: 260px;
width: 300px;
background: url(images/newface.jpg) no-repeat;
}
#wrapper #contents #main2 #newface img {
margin: 7px 0px 0px 10px;
padding: 0px;
border-right: 2px solid #660000;
border-bottom: 2px solid #660000;
float: left;
}
#wrapper #contents #main2 #newface ul {
color: #000000;
line-height: 14px;
font-size: 11px;
font-style: normal;
letter-spacing: 0.1em;
float: right;
margin: 10px 0px 0px;
border-left: 3px dotted #E9C082;
padding: 0px 0px 0px 6px;
}
サイトの内容は
大きい四角を作ってその中に左側に写真を配置、右側にその説明を配置という感じです。説明はCSSのとおりリスト形式で配置しています。
写真はfloatで左を指定して、説明文を右に回りこませる感じなのですが、、、
これで解ることがありましたらよろしくお願いいたします。