はじめまして
突然なのですが、質問したいことがあります。
現在サイトを作ろうと日々タグを打っているのですが、
IEで確認した時には普通だった表示が
NNでもOperaでもFirefoxでも
ページ上部に不可解な空白が挿入されてしまいました。
具体的な状態は画像をご覧くださいませ。
私の書いたhtmlファイルとcssファイルから
該当部分を抜粋して載せさせていただきます。
htmlファイルは
<?xml version="1.1" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta name="description" content=" " />
<meta name="keywords" content="あれ,これ,それ,どれ" />
<meta name="robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<link rel="start" href="http://google.co.jp" />
<link rev="made" href="mailto:rdo@1km.jp" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<title></title>
</head>
<body>
<div class="keyword">
<h1 class="keyword">
<img src="./img/blue.png" alt="XPのサンプルピクチャ" class="mainlogo" />
IE以外で表示される上の空白は一体？？</h1>
</div>
</body>
</html>
CSSファイルは
body{
background-color: #ffffff;
margin: 0;
padding: 0;
}
div.keyword{
background-color: #ccfefd;
width: auto;
height: auto;
border-bottom: solid 3px #0000ff;
color: #000066;
}
h1.keyword{
font-size: 28px;
font-weight: bold;
}
img.mainlogo{
vertical-align: middle;
}
どなたか原因と解決法をご教授いただけましたら幸いです。
