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;}
---------------------------------------------------------
お礼
教えていただきありがとうございました。さっそくソースを張り付けてみたのですが駄目でした。 スタイルは記述確認しました。 あと一歩なのですが・・・ 問題点のパターンは２通りあり、"onclickを利用した伸縮メニューの作成方法を教えてください。"のソースともうひとつ別に引用したサンプルと同じページ内で動かしてみると ●１つ目は、作成の仕方を、"onclick"のソース内容をあらかじめ作成し動作確認したページに、id="f1"から"f5"のソース内容その中へ書き込んだ時には、ビルダーのページ編集画面では、ソース内容は全て表示するのですがプレビュー画面では、メインメニューのid="f5"に使用しているGIF画像ががバツ印になり１つだけ表示され"f5"のポップアップしたサブメニューが全て右寄りになりました。"onclick"のソース内容は思ったように動きました。 ●２つ目は、"１つ目"と逆で作成の仕方をメインメニューのid="f1"から"f5"までをあらかじめ作成し動作確認したページに、"onclick"のソース内容その中へ書き込んだ時には、編集画面は"１つ目"と同じで全て表示するのですが、プレビュー画面では"onclick"のソース内容は開いたままでそのメニューをクリックすると、開いていたサブメニューが一度閉じて再度開きました。 ２つ目についてはIEでは、"onclick"のメニューは開いたままなのですが、Firefoxでは下記(1):の希望通り動きました。 なぜなのでしょうか？IEでも動いてほしいのですが・・・ http://javascript123.seesaa.net/article/107467993.htmlさんのサンプルを引用すると上記の(2)つは思ったように動いてくれるのですが、自分の希望は、http://javascript123.seesaa.net/article/107467993.htmlさんのサンプルの動きに加えて (1)：一番上のメニュー"画像 img "をクリックするとサブメニューが表示されるのですが、2番目のメニュー”ブログ カスタマイズ”を押した時に一番上のメニューが閉じずにそのまま”ブログ カスタマイズ”のサブメニューが表示して欲しいのです。3番目のメニュー"スタイルシート "も同じです。つまり1回目のクリックで開き次クリックするまで閉じないで欲しいのです。 (2)：一番上のメニュー"画像 img "のサブメニューは常時開いたままで2つめ以降のメニューを(1)で書いたような動作はできないでしょうか？ です。 申し訳ありませが、どなたか私の希望通りにく動くソースを教えてください。 よろしくお願いいたします。