※ ChatGPTを利用し、要約された質問です（原文：IEのバグに詳しい方、お願いします。）
IEのバグに詳しい方、お願いします。
このQ&Aのポイント
IEのバグに詳しい方、お願いします。ナビゲーション(画像をクリックすると別ページへリンク)の位置設定がIEだけ上手くいかない（Page1）。同じCSS(CSS1)を使っているのに、Page1のみヘッダーに20pxほどの余白ができる。Dreamweaver CS6を使って作成しています。W3C、書籍などでHTMLのバグについて調べたのですが解決できませんでした。
ナビゲーション(画像をクリックすると別ページへリンク)の位置設定がIEだけ上手くいかない（Page1）。同じCSS(CSS1)を使っているのに、Page1のみヘッダーに20pxほどの余白ができる。
IEのバグに詳しい方、お願いします。同じCSS(CSS1)を使っているのに、Page1のみヘッダーに20pxほどの余白ができる。
質問したい事は2点あります。
1：ナビゲーション(画像をクリックすると別ページへリンク)の位置設定が
IEだけ上手くいかない（Page1）
※firefox、Google Chromeでは正常の位置になる
2：同じCSS(CSS1)を使っているのに、
Page1のみヘッダーに20pxほどの余白ができる
※上記3つのどのブラウザにも余白ができる
Dreamweaver CS6を使って作成しています。
1の質問に関してですが、W3C、書籍などでHTMLのバグについて調べたのですが（理解力不足もあるかもしれません）解決できませんでした。以下に、直したい部分のXHTMLとCSSを載せますので、わかる方いらっしゃったらお願い致します。
2の質問についてですが、PAGE2は余白が出ないので比較として載せます。
※CSSはCSS1を使用しています。
よろしくお願いします。
--------------<page1 XHTML>-----------------------<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>整骨院</title>
<link href="base.css" rel="stylesheet" type="text/css" media="all" />
<link href="top.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="header">
<h1><img src="../k.page1/page1-2.png" alt="整骨院" /></a></h1>
</div>
<ul id="contens-nav">
<li id="dousagaku"><a href="dousagaku.html">動作学"</a></li>
</ul>
</body>
</html>
--------------<page1 css1>-----------------------
@charset "UTF-8";
* {
padding:0;
margin:0;
}
img {
border: 0 none;
}
body {
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
text-align: left;
line-height: 1.5;
}
#header{
text-align:center;
margin-left:auto;margin-right:auto;
background-color:#000;
}
#h1{
margin: 0px;
padding: 0px;
}
--------------<page1 css2>-----------------------
@charset "UTF-8";
#contens-nav{
position: absolute;
float: left;
height: 200px;
margin-top: 30px;
margin-right: 23px;
margin-left: 10px;
list-style: none;
top: 427px;
left: 743px;
display:inline;
}
#contens-nav li a{
display: block;
height: 0;
padding-top: 214px;
overflow: hidden;
background-image:url(../k.page1/dousagaku2.fw.png);
background-repeat:no-repeat;
}
#dousagaku{
left:0px;
}
#dousagaku,
#dousagaku a{
width: 214px;
}
#dousagaku a{
background-position: 0 0px;
}
#dousagaku.current a,
#dousagaku a:hover {
background-position: 0 -220px;
}
--------------<page2 XHTML>-----------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>動作学</title>
<link href="base.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="header">
<h1><img src="../page2.dousagaku.png" alt="動作学" /></h1>
</div>
</div>
</body>
</html>
お礼
utun01様 ご回答ありがとうございます。 Firebugですが、Firebug Liteを使ってみました。 ですが、開くことができましたが、使い方がいまいちよくわからず解決には至っておりません・・・ もう少し勉強してみたいと思います。 ありがとうございました。