IEだとうまく表示できません。ソースのどこが悪いのでしょうか
画像はIEのものです。Firefoxだとうまく表示されるのですが、IEだと大きく崩れます。
いろいろとデバックしてみましたが、どうしてもわかりません。ソースのどこが悪いのでしょうか？本当に困っています。
問題点は以下の二つです。
(1)タイトルの右の画像が下に落ちる。
(2)画面中段の「Jan」という画像が下に落ちる。
特に困っているのが、reset.cssでブラウザデフォルトのスタイルを修正しているはずなのにうまくいかない、という点です。以前、ホームページ・ビルダーを使ったことがあり、自動的にソースが修正されてしまいました。その後、表示がおかしくなってしまったのです。
以下、ソースです。
html↓
---------------------------------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="製品化するサイトです" />
<meta name="keywords" content="製品化" />
<meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version
11.0.0.0 for Windows" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>タイトル</title>
<style type="text/css">
body { background-image:url(image/back.gif);background-repeat:repeat-x;
}
</style>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header"><a href="index.html"><img id="title" src="image/title.gif"
width="614" height="160" alt="タイトル" /></a>
<img id="title image" src="image/title image.gif" width="160" height="160" alt="
バナー" /></div>
<div id="contents">
<div id="sidebar">
<a id="_HPB_ROLLOVER4" onmouseout="HpbImgSwap('_HPB_ROLLOVER4',
'image/down.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER4', 'image/down
click.gif');" href="#"><img id="down" src="image/down.gif" width="140"
height="130" alt="欲しい人" name="_HPB_ROLLOVER4" /></a>
<a id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'image/sidebar
site.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'image/sidebar site
clilck.gif');" href="about this site.html"><img src="image/sidebar site.gif"
</div>
</div>
</div>
</body>
</html>
---------------------------------------------------------
reset.css↓
---------------------------------------------------------
@charset "UTF-8";
body,h1,h2,h3,h4,h5,h6,div,p,ul,ol,li,dl,dt,dd,form,input,textarea,pre{margin:0;padding:0;}
ul,li{list-style-type:none;}
table,img{border:0px;}
body,h1,h2,h3,h4,h5,h6,td,th,p,div,input,textarea,pre,ul,ol{
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo, Verdana,'ＭＳ Ｐゴシック',sans-serif;
font-weight:normal;
}
a:focus {outline:none}
em{font-style:normal;}
hr{display:none;}
address{font-style:normal;}
*{line-height:1.0;}
---------------------------------------------------------
お礼
edomin7777さん 回答ありがとうございます。(line01.gif、st_info.gif）に関しては、それぞれHTML文内のディレクトリ通りに格納したら表示されました。 ありがとうございます。 その他の画像も表示したいのですが・・・サンプルテンプレート内の画像名と一致している名前がHTML文内にあるのは上記2点のみでしてその他の画像はどうやって表示するのかが不明です。 テンプレートと同じ画像名があればディレクトリを作成して格納という段取りで行えば良いと思うのですが、載せたい画像名がHTML文にないとなると残りの画像は自分で文を追加することになるのでしょうか？？ 画像の名前がなくてもローカルでは表示されるのですが。 簡単に思えたのですがどうも仕組みが難しいように感じますね・・・