FirefoxとIEで表示が変わってしまう
-
0 名前： もり ： 2005/12/16 11:21
- Dream Weaverでhtmlファイル内にCSSを記述して
ホームページを作成しているのですが、
ブラウザでプレビューした際にFireFoxでは正常な表示になるのに
IEでは一部がずれて、下の段に表示されてしまいます。
うまく説明できませんので、実際にご覧いただければ幸いです。
http://testsite.run.buttobi.net/index.html
よーく見てもらえるとわかるんですけど、
下の段の2つのボックスの部分のバーのところで
top,left,right共にmarginを1pxに指定しているのですが、
Firefoxでは正常に表示、しかし、IEではleftとraightが
どう考えても2pxほどのmarginになってしまっています。
ホームページ作成初心者なので、うまくお伝えできませんが
どなたかご教授頂ければ幸いです。
宜しくお願い致します。
-
1 名前： ぽんた ： 2005/12/16 11:21
- もりさん、こんばんは。
決して上級者ではありませんが、自分なりに回答させていただきます。
ホームページを拝見させていただいたところ、
CSSのwidthによる設定ミスではないかと思います。
結論から言うと、IEの表示の方が正しいと思います。まず、widthに関連する
DOCTYPEスイッチですが、もりさんの作成されたHTMLはURL表記ありの
TransitionalDTDで宣言されています。
この場合、CSSで設定するボックスのwidthはpaddingとborderのサイズを含みません。
従って実際に表示されるボックスのサイズは「width＋padding＋border」の合計になります。
もりさんのページでは、base_boxを親として、子にそれぞれbox1とbox2のボックスを
入れ子にしており、拝見するとbase_boxのwidthを800pxに設定されています。
ここで、子ボックスですが、box1ではwidthが200px、borderが上下左右に1pxですから、
実際のボックスの横の長さは202pxになります。
同様にbox2では、実際の長さの合計は596pxです。
この時点で左右のボックスの横の長さの合計は798pxです。
また、各子ボックスともにさらにマージンを指定しており、左右のマージンをこれに加えると、
798px＋5pxで合計で803pxになっています。
しかし、親ボックスであるbase_boxのwidthは800pxで指定していますから、
各ボックスの合計が800pxを超えてしまっています。
おそらくこれが原因で、本来の右側に表示されるはずの子ボックスが、
親ボックスに入りきらず、下に改行されて表示されてしまうのだと思います。
従って、これを回避するには子ボックスのwidthとマージンの合計が800pxに
収まるように修正してみてください。
おそらく直ると思いますよ。
長々と失礼しました。ホームページ作成がんばってください。
-
2 名前： もり ： 2005/12/16 11:21
- ＞ぽんたさん
見る気の失せてしまうような(笑)、ソースを見て頂き、
なおかつ、非常に丁寧な解決方法までご教授頂きまして
本当にありがとうございました。とても助かりました。
-
3 名前： もり ： 2005/12/16 11:21
- ＞ぽんたさん、その他閲覧されている皆様
先程はアドバイスありがとうございました。
ご指示頂いたとおりにwidthの調整を行ったところ、
IEで正常に表示ができました。
ところが、Firefoxでは調整する前までは正常に
表示されていましたが、widthの調整後に、
横幅が短く表示されてしまうという状態になってしまいました(汗。
IE、Firefoxの両方で正常に表示させる方法はありますでしょうか。
何が方法がございましたら、どんな事でも構いませんので
ご教示頂ければ幸いです。
宜しくお願い致します。
-
4 名前： もり ： 2005/12/16 11:21
- 色々方法を試してみた結果、
レイアウトを2パターン用意し、
javascriptでブラウザを判別させることによって
指定したURLに飛ばすという方法で解決できたようです。
ぽんたさん、その他皆様、本当にありがとうございました！
