CSS windowsIE 最後の文字がダブる件について

質問

CSSレイアウトで壁にぶつかってしまいました。
http://www.vivibond.com/demo/test/test.html
上記URLをwindowsIEで見ると
「● 4月21日 ホームページがオープンいたしました。」とあるうちの「ました。」という文字がダブって表示されてしまいます。
いったい何故でしょうか。。。
CSSはこんな感じです。
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
#wapper {
margin: 0px;
padding: 0px;
width: 850px;
}
#wapper1 {
margin: 0px;
padding: 0px;
width: 850px;
background: url(images/bg.jpg) repeat-y;
}
#wapper2 {
margin: 0px;
padding: 0px;
width: 800px;
}
/*コンテンツ*/
#contents {
margin: 0px;
padding: 0px;
width: 800px;
clear: both;
height: 501px;
}
/*ナビ*/
#navi {
background: #F3EDEE url(images/b_bg.jpg) no-repeat;
padding: 44px 44px 150px 42px;
width: 160px;
float: left;
}
.navibox1{
height: 52px;
background: url(images/naviboxbg.gif) no-repeat bottom;
width: auto;
}
.navibox2{
height: 52px;
width: auto;
}

#main {
margin: 0px;
padding: 0px;
float: right;
width: 554px;
}
.image {
margin: 0px;
padding: 20px 30px 20px 24px;
}
.topics {
margin: 0px 30px 0px 24px;
padding: 0px;
}
.topics_text {
margin: 0px 30px 0px 24px;
padding: 10px 20px 10px 10px;
line-height: 20px;
background: url(images/title_topics2.gif) no-repeat bottom;
height: 96px;
}
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
よろしくお願いいたします。

回答No.5

key-child · ベストアンサー

コメントを全て削除すれば800pxでも解決するよう。
（<!--ここから--><!--ここまで-->とか）
理由はわかりません。検索すれば何か見つかるかも。

これくらいならインデントを使用したほうが見やすい。
（コメントがあると逆に見にくい）

div要素のみを使うのではなく、ナビをリストにするとか構造を工夫すればもっと見やすくなる。

お礼

ありがとうございます！
おっしゃる通りコメントを無くしたら問題の現象がおさまりました。
ちなみに、htmlファイルの51行と52行に書いたコメントだけ消すとOKでした。
検索してみてもこの現象のこれといった理由はみつけられず。。。
何故なのか気になります。

教えていただいたように見やすくする工夫してみます。

お助けいただき、ありがとうございました。
心より感謝いたします！

回答No.4

leap_day

こんにちは

あれっ？勘違いして打ってるみたい（＞＜）

contentsの幅を増やしてみてください

もう一度やってみたところ806pxでした（－－；）

だめならもうちょっと増やしてみてくださいｍ（－－）ｍ

補足

ありがとうございます！
806pxで表示されなくなりました。
にしても、なぜ800pxでダメなのか気になります。。。

回答No.3

MAN_MA_RUI

XP SP2 IE6の環境で再現しました。
よく分かりませんが、文字列を複製してるみたいですね。
ちょっといろいろと見てみます。

補足

お手数をおかけいたしますが、よろしくお願いいたします。

回答No.2

leap_day

こんにちは

#contents {
width:804px;
}

とすれば解消できると思います（＾＾）

でちょっと気になってるのですが
#wapperと#wapper1
#wapper2と#contents
って同じサイズのものですよね？
<div id="wapper">
<div id="wapper1">
の間と
<div id="wapper2">
<div id="contents">
の間には何か別のコンテンツが入るのですか？

同じものなのでひとまとめにしてもいいと思うのですが・・・

補足

#contents {
width:804px;
}
としてみたのですが、変化ありませんでした。。。

ご指摘もありがとうございます。
ひとまとめにすべきですね。

回答No.1

himajin100000

Windows XP Pro SP2 + IE7
再現しません。解決済みですか？それともIE 6でのみ発生しそうですか？(当方検証できない)

補足

みていただきありがとうございます。
未だ解決しておりません。
こちらの環境は、Windows HomeEdition + IE6　です。

よろしくお願いいたします。