※ ChatGPTを利用し、要約された質問です（原文：CSSが悪いんでしょうか？）
CSSの問題がIE6で起きる問題
このQ&Aのポイント
IE6でナビ部分にカーソルを持っていくと、footerの背景が伸びたり縮んだりする現象が出ています。
この問題はCSSに原因があり、IE6だけで発生しています。
ソースコードを確認すると、#navのfloatプロパティや#footerのclearプロパティなどが問題となっています。
下記ソースをIE6で見ていただくとわかりますが、ナビ部分にカーソルをもっていくと、footerの背景が伸びたり縮んだりします。
IE6だけでこのような現象が出ています。
※手元のデータは外部リンクです。
-----ソース-----
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
body {background: #EFEFEF;}
#wrapper{background: #fff; padding: 0; width: 700px; line-height: 1.4em;}
#header{border: 3px solid #333;}
#nav{float: left; width: 150px;}
#nav ul{margin:0; padding:0; list-style-type:none;}
#nav li a{display:block; width:150px; margin:0 0 1px 0; background-color:#CCC;}
#nav li a:hover{background-color:#FF9900; color:#000000;}
#rightbox{padding:0 5px; width: 140px;}
#main{border:4px solid #FF0000; float: right; width: 542px;}
#footer{background-color:#CCC; clear: both;}
</style>
<title>test</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>header</h1>
</div>
<div id="nav">
<ul>
<li><a href="#">nav1</a></li>
<li><a href="#">nav2</a></li>
<li><a href="#">nav3</a></li>
</ul>
</div><!-- end nav -->
<div id="main">
<h2>main</h2>
<p>本文</p>
<p>本文</p>
<p>本文</p>
<p>本文</p>
<p>本文</p>
<p>本文</p>
<p>本文</p>
</div><!-- end main -->
<div id="footer">
footer
</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>
お礼
一発解決です！ありがとうございました。 私的には100ポイント差し上げたいです。