- ベストアンサー
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;} ---------------------------------------------------------
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
cssで問題があるとすると、reset.css以外の様な気がするのですが。 reset.cssの役割は、タグによる、スタイルの初期値を揃えるだけだと思います。 .header等に対して、他のcssでwidth・padding・margin等を指定していると思いますが、ブラウザによって動作が違います。横幅がずれる時は、なるべくpaddingを使わないでレイアウトしてみてください。（ブラウザによる違いが分からない内は）
その他の回答 (1)
- KI401
- ベストアンサー率53% (44/82)
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の子要素になったことが原因で、元々のレイアウトが崩れた のではないかと思いますが、如何でせう？
お礼
#headerの部分を修正したところ、うまくいきました。imgの周辺で改行をすると、IEが余白を入れてしまうようでした。 また、#mainが落ちている件（＝Janが落ちている件）もwidthの修正で対応できました！ HPBのせいではなかったようです。しかし、勝手に説明もなく修正してしまったので、どうなっていたのか戻せない、という状態でした。
お礼
ありがとうございます。修正できました。 ＞paddingを使わないでレイアウトしてみてください。（ブラウザによる違いが分からない内は） パディングが悪さをすることが多いのですね。