映画のエンドロール観る派？観ない派？

IEだとうまく表示できません。ソースのどこが悪いのでしょうか

解決済

  • 質問者：syouzyou
  • 質問日時：
  • 回答数：2件

画像は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-transitio …​
<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;}
---------------------------------------------------------

「IEだとうまく表示できません。ソースのど」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： kiyominmin
  • 回答日時：

cssで問題があるとすると、reset.css以外の様な気がするのですが。


reset.cssの役割は、タグによる、スタイルの初期値を揃えるだけだと思います。

.header等に対して、他のcssでwidth・padding・margin等を指定していると思いますが、ブラウザによって動作が違います。横幅がずれる時は、なるべくpaddingを使わないでレイアウトしてみてください。（ブラウザによる違いが分からない内は）
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。修正できました。

＞paddingを使わないでレイアウトしてみてください。（ブラウザによる違いが分からない内は）

パディングが悪さをすることが多いのですね。

通報する
お礼日時：2009/02/24 17:27

No.2

  • 回答者： KI401
  • 回答日時：

reset.cssとかの問題でないのでは？そりゃ単にHPBが悪さをしたんでしょう。


どのみち、index.css, main.cssの内容が分からないとこれ以上は何も分からないので……。

明らかにHPBが改悪したと思われる個所を一度全て削除してみてください。
例えば_HPB云々と書いてある下のa要素の部分など。

<a id="_HPB_ROLLOVER4" onmouseout="HpbImgSwap('_HPB_ROLLOVER4',

'image/down.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER4', 'image/down

click.gif');" href="#">


どうも
1. 画像(img要素)などをまず並べてレイアウト
2. その後HPBでロールオーバー機能をつけた(a要素が追加された)
3. imgがaの子要素になったことが原因で、元々のレイアウトが崩れた
のではないかと思いますが、如何でせう？
    • good
    • 0
    • 件
通報する
この回答へのお礼

#headerの部分を修正したところ、うまくいきました。imgの周辺で改行をすると、IEが余白を入れてしまうようでした。
また、#mainが落ちている件（＝Janが落ちている件）もwidthの修正で対応できました！

HPBのせいではなかったようです。しかし、勝手に説明もなく修正してしまったので、どうなっていたのか戻せない、という状態でした。

通報する
お礼日時：2009/02/24 17:25

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報