DIVのデザインがうまくいきません。

質問

現在下記URLのページにて試験しながら更新中なのですが、DIV絡みで色々と問題が発生して困っております。

↓問題のページ
http://canada.ciao.jp/index2.html

↓問題HTMLソース。アドセンスが箱の中に正しく表示されません。下のCSSにて箱の縦幅を指定しても広告の見える部分は一部のみ。一体何が悪いのでしょうか？
<div class="ads">
<div class="title">Sponsor</div>
アドセンススクリプト
</div>

↓このスクリプトが記述されたHTMLが入ると途端にデザインが崩れます。これなしだとちゃんと表記されます。
<div class="box">
<div class="title">カナダドル為替換算表</div>
<script type="text/javascript" language="JavaScript" src="http://money.technetium.be/curcalc.js?cur[]=CAD&amp;cur[]=JPY"></script>
</div>
↑ここにスクリプト貼ると全てちゃんと表記されてませんが、実際のソースにはちゃんとスクリプト記載しているつもりです。一体どこがおかしくてデザインが崩れてしまっているのでしょうか？

↓上のHTMLなしの場合
http://canada.ciao.jp/index3.html

↓問題のCSS
#right .ads {
margin-bottom: 10px;
border: 1px solid #C00;
height: 650px;
}

#right .box {
margin-bottom: 10px;
padding-bottom: 10px;
border: 1px solid #C00;
}

#right .title {
margin: 0 0 10px 0;
font-size: x-small;
font-weight: bold;
line-height: 25px;
background: #FCF;
border-bottom: 1px solid #C00;
color: #C00;
text-align:center;
}

数時間、色々と試したのですが、結局原因が不明のままです。
是非アドバイスの程、宜しく御願いいたします。

回答No.2

himajin100000 · ベストアンサー

現象確認できました。

結論から言うとjavascriptの問題です。

#このファイル Content-Type:text/html で吐かれるため、
http://money.technetium.be/curcalc.js?cur[]=CAD&amp;cur[]=JPY
を開いた後、もういちどソース表示でやっと読めました。

document.write("</div>");　
/*
↑一番最後の行にあるコレが邪魔。
なおjavascript内にはdivの開始タグが書かれていないので
完全にスクリプト書いた人のミス。貴方が修正する権限を持たず、
かつ、開発者も修正の意思がないならば
<div class="box">
<div class="title">カナダドル為替換算表</div>
<div> <!-- 余計に一個挿入 -->
<script type="text/javascript" language="JavaScript" src="​http://money.technetium.be/(略)"></script>
</div>
くらいしか対処の方法ないかもしれない。
*/

お礼

Javascript側の記述にミスがあったのですか…。
Javaに関しては全く無知なのでそれはわかりませんでした。

本当にありがとうございます。とりあえずの対処法で解決できました。

回答No.3

lihong

追記ですが、右ブロックの閉じdivの直前にclear:bothを入れるとFirefoxの余計な罫線は消えるはずです。

回答No.1

lihong

cssの

#right iframe {
width: 150px;
height: 90px;
}

のせいですね。
抜いたら直ります。

お礼

ありがとうございます！
アドセンスの方解決できました！
そこに問題があったとは全く気がつきませんでした…。

スクリプトの方は一体…。

補足

すみません、スクリプト挿入後のデザインの崩れはFirefoxだと特に顕著に見られます。

IEだと地図下に見られる灰色の枠組みは本来ならばページ全体を囲む枠組みです。

Firefoxですと為替のボックスのすぐ下に灰色の枠組み来てしまい、さらにフッター部分が枠からはみ出た状態になります。

</div>がどこかに余計に入っているものかと調べたのですが、そうでもないようです。