- ベストアンサー
レイヤー・・・ブラウザが古いとぐちゃぐちゃになります
テーブルでどうしてもうまく表現できない箇所だけをレイヤーにしてサイトデザインを完成させました。 うっかりIE6でしか確認していなかったので、しまったと思い、すぐに以下のブラウザを使用して見栄えを確認してみました。 その結果も合わせて以下に記します。 windows/IE6 問題なし windows/Netscape7.1 問題なし windows/Netscape4.7 レイヤー使用箇所だけずれる windows/Opera7.1 問題なし Mac/IE5 レイヤーの部分だけが表示されて、その下部にページ全体が表示されます。このIE5のずれが一番ひどかったかもしれません。 レイヤーを使い方がまずいのでしょうか。それともブラウザの使用上、これは仕方がないことなのでしょうか。 ちなみにDreamweverMXによる作成です。 レイヤーは凄く便利ですが、それだけ扱いが難しいのだなと痛感いたしました。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
Netscape Navigator4.7のスタイルシートは、バグが多いため、私の場合は、無視しています。というか、Netscape6～があるため、ver4.7のブラウザは無視しています。ってことを踏まえて、回答します。 私の場合、ウェブデザインは全てスタイルシートを活用し、デザインもレイヤー（この場合のレイヤーとは、<div style="position:～">の事）をふんだんに使用しています。 今のところ、WindowsでもMacintoshでも問題なく同じように表示されています。強いていうなら、WindowsIE6から導入されたセンタリングのスタイル<div style="width:500px; margin-right:auto; margin-left:auto;">は、WindowsIE5以前では、反映されません。よって、レイヤーを使ったデザインで、ブラウザの表示で全体をセンタリングする設定は、可能です（JavaScriptを使用しなくても）が、ちょっと、コツが必要です。 >Mac/IE5 レイヤーの部分だけが表示されて、その下部にページ全体が表示されます。 WindowsIE6では問題ないのに、Macintoshでは、問題があるのは、スタイルシートの指定に何か不適切な指定があるものと思います。是非一度、WindowsIE5で見てみてください。Macintoshの表示と同じような現象が起きているかもしれません。（←経験者^^;） 問題としては、positionは、absoluteになっていますか？そのレイヤーのwidth指定は正しいですか？left, top, width, heightなど、ピクセル数値で指定されてますか？数値は、100pxといったピクセル数か%値でしか指定できません。Dreamwaverを使用しているので大丈夫だと思うのですが、また、レイヤーが入れ子になっている場合は、親もまた、レイヤーになっていることが必須です。この場合のレイヤーとは、スタイルでposition指定が、absoluteもしくは、relativeの指定になっていなければなりません。いくら、親が<div>になっていても、レイヤー指定（absoluteかrelative）がなっていなければ、そのさらに上の親になります。もし、その上が<body>なら、親は<body>になります。確かに<body>はレイヤー指定されていないですが、全てのレイヤー（absoluteの場合）は<body>に準じるので、入れ子になっていても、親がレイヤーでなければ、<body>に対してのレイヤー位置になります。 あと、DreamwaverMXは、バージョンアップしましましたか。確か今は6.1だったと思います。6の時のレイヤー指定にバグがあったみたいですよ。(もっとも、ブラウザでのプレビューは問題ないですけど....)
その他の回答 (1)
- jakarta
- ベストアンサー率38% (607/1597)
Netscape Navigator4.7のスタイルシートは、バグちゅうよりも実装の不備ですね。ウインドウ内の全ての要素がレイヤーにより絶対的に配置されていないと表示位置がずれます。特殊な事情がないかぎりは切り捨ててかまわないと思います。 >なぜかレイヤーが飛び出して上部に表示されて、そのあとに、テーブルがきます。 私の場合Mac版IE5/ネスケ4.7で確認しながら作りますんで逆にMac版IE5で表示がおかしいというのがピンときません。ためしにレイヤー指定のサンプルを用いてMac版IE5.1.6で確認しまたがそのような異常はありませんでした。 htmlソースの全体像がわかれば具体的な問題点はわかるかもしれません。
お礼
ありがとうございます。 4.7がバグというよりも、そのもの自体の問題だということはよくわかりました。 ただ、ここにすべてのソースを載せるのは少し無理がありますので、何とか試行錯誤トライしてみます。 ありがとうございました。
お礼
回答ありがとうございます。 再び色々と試行錯誤を繰り返してみました。 まず、 windows2000/IE5 問題なし Mac/Netscape7.1 問題なし となりました。 ご指摘のwindowsにおけるIE5で問題なく表示されてしまったので、 非常に範囲の限定された障害であるようです。 つまりまとめますと問題があるのは、 window/Netscape4.7 Mac/IE5 となります。 おそらく、Mac/Netscape4.7でも間違いなく問題があると考えられます。 absoluteですが、指定しておりました。 私のレイヤーの使用はきわめて勝手な使い方で、 --------------- | | | | | | | | | | --------------- と大きなテーブル740*660(実際はセルが多数含まれます)があったとしてそれの中にいきなり、 --------------- | | | | | ----- | | | | | | ----- | --------------- というようにポンとレイヤーを配置しました。というのも、どうしてもうまくテーブルでは思うような場所に表示できなかったからになります。 MacのIE5では、以下のようになります。 ----- | | ----- --------------- | | | | | | | | | | --------------- なぜかレイヤーが飛び出して上部に表示されて、そのあとに、テーブルがきます。 実際はレイヤーをこんな感じで５，６個配置しているのですが、 そのタグを一つ挙げますと以下の通りです。 <div id="Layer8" style="position:absolute; left:450px; top:562px; width:179px; height:46px; z-index:8"> 特に指定はabsoluteですし問題はないかと思われます。 どこか怪しい箇所がありましたら容赦なくご指摘ください。お願い致します。