
こんばんわ、いつもお世話になっております。少しまえにも同じような感じで質問させていただいたのですが、
あれからなんとかいろいろなブラウザで修正をして見れるようになったのですが、
どうしてもSafariだけがレイアウトがひどくくずれてしまいます。
どこを直したらいいのかわからない状態でして、もし何かヒントがありましたら教えていただけますでしょうか?
だいたいの感じですが、floatを使用してる部分が(普通はちゃんと左右にレイアウトされる部分が上下にずれている、、)おかしいのですが
何を修正すればいいのかわかりません、。
よろしくお願いいたします。
No.4ベストアンサー
- 回答日時:
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
- 回答日時:
>Safariの古いバージョンでは…これはもう無視してもいいのでしょうか?
ただ単に「古い」というだけで、具体的なバージョンを示していただけないのでは、判断のしようがありません。
大まかな目安ですが、Safariのバージョンは1.3.x以降が多数派で、1.2.xまでのバージョンは最近では少数派になりました。質問者さんがSafari 1.2.xまでのバージョンで表示確認をされているのでしたら、ある程度表示が崩れてもやむを得ないかな(好ましくはないですが)、という気はします。
No.3
- 回答日時:
最新版のSafari RSSを使って表示していますか?
この回答への補足
ありがとうございます。
普通にSafariを起動して、表示させてだけなのでRSSを使って表示とか、、
の意味がわからないのですが、、、、、申し訳ありません。
それが原因なのでしょうか?
No.1
- 回答日時:
崩れるという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で左を指定して、説明文を右に回りこませる感じなのですが、、、
これで解ることがありましたらよろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
GoogleChromeでレイアウトが左...
-
HTML文書を上書き保存してもブ...
-
CSSやJavaScriptのバージョン指定
-
XMLを作成してもタグしか表示さ...
-
mailto:メール本文内の改行方法
-
AfterEffectsでイージーイーズ...
-
mp3 のタグ編集で消えない領域...
-
下着などの洗濯タグ、どうやっ...
-
Dreamweaverの改行コードをLFに...
-
H1タグに改行の<br>を使う
-
長いURLを途中で改行(折り返す...
-
新しいタブで開かせない方法は...
-
\\n \\r \\t について
-
ニコニコ動画でアップロードす...
-
空白行について(できればCSS)
-
HTML
-
高校1年生情報の問題について。
-
改行したときの幅を狭くする方法
-
ZARAの商品のタグの外しかた
-
WEB制作。文字の改行について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
GoogleChromeでレイアウトが左...
-
プルダウン(リストボックス)の...
-
HTML文書を上書き保存してもブ...
-
WindowsとMacでのChromeのスタ...
-
主要ポータルサイトの多くがス...
-
doc As HTMLdocumentのコンパイ...
-
HTML4.01のままの弊害
-
ブラウザによって見え方が異な...
-
WEBページからのメッセージをVBAで
-
tabキーによるfocusの当たり方...
-
エクセルのシートをブラウザに...
-
ボタンをクリックした時に指定...
-
VBA オブジェクトが必要です
-
VBAでgetElementByTagName
-
スマホでページ内リンクができない
-
cssレイアウトでSafariだけがど...
-
HTMLのバージョンの確認方法は?
-
webページの有効期限が切れてい...
-
作った自分のホームページを他...
-
<IMG>のALIGN属性値「absmiddle...
おすすめ情報