プラウザによる表示エラー

エクスプローラー７　では、きちんとホームページが観れるのですが、６だと、真中に空白部分（ずれて表示されてしまう）が出来てしまいますがどうしてでしょう？

No.4 回答者： goold-man 回答日時： 2007/10/24 11:09

IE6ですが、正常に見えます。

（「小資金・低予算で事務所が開けます」以降は真中に空白部分はありません）

この回答への補足

小資金・低予算で事務所が開けます・・・までが空白ということでしょうか？意味がわかりませんでした。

補足日時：2007/10/26 13:48

No.3 回答者： elcude 回答日時： 2007/10/23 14:47

インターネットエクスプローラーの環境はこちらにも６、７共に整っているので検証もできています。

CSSやXHTMLも全て(6ページ)ソースを上から確認させていただきました。その上で申し上げたのですが・・・。

見た目上７は全く問題ないように見えます。しかし、実際には
<div id="left">
～略～
</div>
内の何かの要素（画像もしくは<hr />）が<div id="left">で指定している602pxの幅を超えています。７では超えていますが、<div id="right">より下にできたスペースに文字や要素などが入り込むことができるため（見た目上）問題なく表示されます。
しかし、６の場合は幅を超えたときに<div id="right">より下にできたスペースに周り込まない特性を持っています。そのためスペースが<div id="right">の高さ分だけ空き、その下から表示されていると思います。
それが原因なのです。

解決方法としては、left＋rightの幅が800px以内に収まっていないといけないです。left内の要素そして、right内の要素をプラスしたときに超えてしまっているのでそれを800px以内収めないといけないです。
mail/index.html、service/index.htmlはその指定された幅にちゃんと収まっています。

そのほかのスペースができるページはそれを原因に考えて問題解決をしてください。

■エクスプローラー７　では、きちんとホームページが観れるのですが、６だと、真中に空白部分（ずれて表示されてしまう）が出来てしまいますがどうしてでしょう？

という質問でしたので回答はここまでです。

この回答への補足

教えてください。私も立面図のせいかと思い、index.htmlは試しに立面図を削除しました。だめでした。もう一度確認してみます。有難う御座います。

補足日時：2007/10/23 17:19

この回答へのお礼

有難う御座いました。自分なりに修正しております。

お礼日時：2007/10/26 13:46

No.2 回答者： elcude 回答日時： 2007/10/21 18:01

確認させていただきました。

ありがとうございます。

とりあえず1時間(本当は2時間、3時間)ほど見てみましたがまだわかりません。(- -；）
#left {
float:left;
width:602px;
padding:10px 0px 0px 0px;
overflow:auto;
}
↑　ためしにオーバーフローを入れてみてください。左右のスクロールバーが表示されると思います。
親要素である#leftの幅を大きく超えています。何かの要素がはみ出しているのが原因だと思うのですが・・・。

私の力不足で本当、申し訳ないです。
修正方法を見つけ出すより#contents部分のXHTMLの設計を見直したほうが早いです。
<table>や<hr />などが複雑に入り組んでいてどこだというのを明確に見つけ出すのが難しいです。

期待してらっしゃったと思いますが、こんな回答で申し訳ないです。

この回答への補足

下記です。しかし、service.htmlや、mail.htmlは６でもきちんと表示されていますが、お願いします。



body {
margin:5px;
padding:0px;
font-family:"ＭＳ Ｐゴシック", Osaka;
}
#layout {
width:800px;
padding:0px 20px;
margin:0 auto;
text-align:left;
background:url(../img/basic/back.gif);
}

##topicpass {
width:800px;
height:16px;
}
#topicpass h5 {
width:800px;
height:16px;
background:url(../img/basic/topicpass2.gif) no-repeat;
text-indent:-9999px;
}

#contents {
width:800px;
margin:0px 30px 0px 0px;
}


#footer {
width:800px;
height:21px;
background:url(../img/basic/copyright.gif) no-repeat;
margin:0px 0px 5px 0px;
}
#footer p {
width:800px;
height:21px;
background:url(../img/basic/copyright.gif) no-repeat;
text-indent:-9999px;
}
#foot_menu {
width:800px;
height:50px;
}
#foot_menu p {
padding:0px 10px;
text-align:right;
font-size:12px;
color:#717171;
}


#right {
float:right;
width:188px;
background:url(../img/basic/back2.gif);
margin:0px 0px 10px 0px;

}


}

.table {
margin:0px 0px 10px 0px;
}
.table2 {
margin:0px 0px 10px 0px;
}
.table3 {
width:592px;
margin:0px 0px 10px 0px;
border:1px solid #717171;
}
.table4 {
width:592px;
margin:0px 0px 10px 0px;
font-size:10px;
line-height:12px;
color:#000000;
}
.table td {
padding:5px;
font-size:12px;
line-height:14px;
color:#000000;
}
.table3 td {
padding:2px;
font-size:10px;
line-height:12px;
color:#000000;
border:1px solid #717171;
border-collapse:collapse;
}
.table4 td {
padding:2px;
font-size:10px;
line-height:12px;
color:#000000;
border:1px solid #717171;
border-collapse:collapse;
}
#left {
float:left;
width:602px;
padding:10px 0px 0px 0px;
}
.index_01 {
margin:0px 0px 10px 0px;
}
.index_02 {
width:602px;
height:21px;
background:url(../img/index/index_02.gif) no-repeat;
text-indent:-9999px;
margin:0px 0px 10px 0px;
}
.index_03 {
margin:0px 0px 10px 0px;
}
.index_04 {
width:602px;
height:21px;
background:url(../img/index/index_09.gif) no-repeat;
text-indent:-9999px;
}
.index_05 {
width:602px;
height:458px;
background:url(../img/index/index_10.jpg) no-repeat;
text-indent:-9999px;
}

補足日時：2007/10/23 12:26

No.1 回答者： elcude 回答日時： 2007/10/20 22:16

ソースコードを見ないことには問題箇所が判断できないのでHTML(XHTML)、CSSのソースコードを貼っていただけ無いでしょうか。

内容は公開されるので、タグはそのままで中身を他人に見られても良い状態にしてお願いします。

この回答への補足

私の知人のHPです。相談されましたが分からずです。お願いします。
http://www.w-sk.net/
で、トップページを含む３ページです。その他はOKでした。
まずは、ページよりソースをご覧下さい。その後の返答お待ちしております。その他のプラウザはOKでした。６だけです。（それ以下は未確認）

補足日時：2007/10/20 22:41