こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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,'MS Pゴシック',sans-serif;
font-weight:normal;
}
a:focus {outline:none}
em{font-style:normal;}
hr{display:none;}
address{font-style:normal;}
*{line-height:1.0;}
---------------------------------------------------------

大変申し訳ございませんが、この投稿に添付された画像や動画などは、「BIGLOBEなんでも相談室」ではご覧いただくことができません。 OKWAVEよりご覧ください。

マルチメディア機能とは?

投稿日時 - 2009-02-22 00:51:43

QNo.4738210

困ってます

質問者が選んだベストアンサー

cssで問題があるとすると、reset.css以外の様な気がするのですが。
reset.cssの役割は、タグによる、スタイルの初期値を揃えるだけだと思います。

.header等に対して、他のcssでwidth・padding・margin等を指定していると思いますが、ブラウザによって動作が違います。横幅がずれる時は、なるべくpaddingを使わないでレイアウトしてみてください。(ブラウザによる違いが分からない内は)

投稿日時 - 2009-02-22 02:14:28

お礼

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

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

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

投稿日時 - 2009-02-24 17:27:11

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

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の子要素になったことが原因で、元々のレイアウトが崩れた
のではないかと思いますが、如何でせう?

投稿日時 - 2009-02-22 02:28:42

お礼

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

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

投稿日時 - 2009-02-24 17:25:50

あなたにオススメの質問