こんばんわ、いつもお世話になっております。少しまえにも同じような感じで質問させていただいたのですが、
あれからなんとかいろいろなブラウザで修正をして見れるようになったのですが、
どうしてもSafariだけがレイアウトがひどくくずれてしまいます。
どこを直したらいいのかわからない状態でして、もし何かヒントがありましたら教えていただけますでしょうか?
だいたいの感じですが、floatを使用してる部分が(普通はちゃんと左右にレイアウトされる部分が上下にずれている、、)おかしいのですが
何を修正すればいいのかわかりません、。
よろしくお願いいたします。
No.5
- 回答日時:
>Safariの古いバージョンでは…これはもう無視してもいいのでしょうか?
ただ単に「古い」というだけで、具体的なバージョンを示していただけないのでは、判断のしようがありません。
大まかな目安ですが、Safariのバージョンは1.3.x以降が多数派で、1.2.xまでのバージョンは最近では少数派になりました。質問者さんがSafari 1.2.xまでのバージョンで表示確認をされているのでしたら、ある程度表示が崩れてもやむを得ないかな(好ましくはないですが)、という気はします。
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.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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
- Windows 10 ネットからファイルをデスクトップにダウンロードする際、既存のファイルの並びが崩れてしまう 4 2022/04/19 08:20
- スピーカー・コンポ・ステレオ BOSE companion20の左右の音量バランスについて 6 2023/03/23 08:56
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
- 家具・インテリア 部屋のレイアウトに関する質問です。 3月からこのような間取りの部屋に引っ越す予定です。 この部屋の洋 1 2023/02/19 19:08
- 英語 【急募】歴20年の社内翻訳者です。無断で翻訳の変更をされました。英語はできるけれど翻訳は全くの未経験 4 2022/07/05 23:03
- 会社・職場 研修中の男女による対応の違い 4 2022/06/01 01:27
- HTML・CSS htmlです。 上のところには黒文字でピカチュウで、ピカチュウの文字には影をすべてにつけてください周 1 2023/01/02 12:48
- ビジネスマナー・ビジネス文書 私の所属する公的機関の文書はとても読みにくく、おそらく、以下が原因のように思われます。 フォントはゴ 1 2022/12/01 07:35
- アクセサリ・腕時計 グランドセイコー SBGN027 新品 42.9万円 オメガシースターアクアテラ 中古 2012年並 2 2023/08/11 17:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
GoogleChromeでレイアウトが左...
-
プルダウン(リストボックス)の...
-
DeepLでエクセルのA列の英文の...
-
CSSやJavaScriptのバージョン指定
-
スマホでページ内リンクができない
-
SVGの表示
-
記述した覚えのないソースコード
-
ブラウザやOSによる表示の違...
-
DreamweaverでIE用Java反映され...
-
WindowsとMacでのChromeのスタ...
-
doc As HTMLdocumentのコンパイ...
-
cssレイアウトでSafariだけがど...
-
VBA オブジェクトが必要です
-
XMLを作成してもタグしか表示さ...
-
キーフレーム
-
\\n \\r \\t について
-
ボタンコントロールのTEXT...
-
AfterEffectsでイージーイーズ...
-
accesskeyに使える文字を全部教...
-
DBからPDFを取得して別画面で表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
GoogleChromeでレイアウトが左...
-
WindowsとMacでのChromeのスタ...
-
プルダウン(リストボックス)の...
-
doc As HTMLdocumentのコンパイ...
-
HTMLのバージョンの確認方法は?
-
VBA オブジェクトが必要です
-
スマホでページ内リンクができない
-
Macで見るとページが崩れます。
-
起動済みのIEをハンドルから操...
-
tabキーによるfocusの当たり方...
-
DOCTYPE宣言はしなくていいの?
-
HTML文書を上書き保存してもブ...
-
CSSやJavaScriptのバージョン指定
-
VBAでgetElementByTagName
-
<IMG>のALIGN属性値「absmiddle...
-
エクセルのシートをブラウザに...
-
WEBページからのメッセージをVBAで
-
dreamweaverでCSSのレイアウト...
-
エクセルでURLからタイトルのみ...
-
ブラウザによって見え方が異なる。
おすすめ情報