ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換！
更新通知を受け取って、最新情報をゲット！

CSSテクニックコミュのＩＥだとうまく表示できません。ソースのどこが悪いのでしょうか

ログインして参加する

  • mixiチェック
  • このエントリーをはてなブックマークに追加

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

mixiユーザー 2009年02月22日 00:43

画像は、左がFirefox、右がIEです。Firefoxだとうまく表示されるのですが、IEだと大きく崩れます。
いろいろとデバックしてみましたが、どうしてもわかりません。ソースのどこが悪いのでしょうか？本当に困っています。

問題点は以下の二つです。

?タイトルの右の画像が下に落ちる。
?画面中段の「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"

width="140" height="90" alt="このサイトについて" name="_HPB_ROLLOVER1" /></a>
<a id="_HPB_ROLLOVER2" onmouseout="HpbImgSwap('_HPB_ROLLOVER2', 'image/sidebar

weblog.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER2', 'image/sidebar weblog

click.gif');" href="about this site.html"><img src="image/sidebar weblog.gif"

width="140" height="90" alt="このサイトについて" name="_HPB_ROLLOVER2" /></a>
<a id="_HPB_ROLLOVER3" onmouseout="HpbImgSwap('_HPB_ROLLOVER3', 'image/sidebar

link.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER3', 'image/sidebar link

click.gif');" href="about this site.html"><img src="image/sidebar link.gif"

width="140" height="90" alt="このサイトについて" name="_HPB_ROLLOVER3" /></a>
</div>

<div id="main">
<div id="month">

<div id="month1">
<img src="image/manth jan.gif" width="50" height="30" border="0" />
</div>
<div id="month2">
<img src="image/manth jan.gif" width="50" height="30" border="0" />
</div>

</div>
</div>
</div>
<div id="footer"><a href="index.html">トップへ戻る</a>
<p>Copyright</p>
<img src="image/footer image.gif" width="780" height="100" border="0" /></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;}
---------------------------------------------------------

index.css↓

---------------------------------------------------------
body {
text-align:justify;
text-justify: inter-ideograph;
argin:0;
adding:0;
}

#wrap {
position:absolute;
width:780px;
left:50%;
margin-left:-390px;


}

img {
border:none
}



#header {
width: 780px;
height: 160px;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
background:#fff;
}

#contents {
width: 750px;
margin-top: 20px;
margin-left: 15px;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
background:#fff;
}

#sidebar {
float: right;
width: 165px;
padding-top: 10px;
padding-left: 10px;

}



#sidebar #down {
margin-bottom: 20px;
}

#footer {
width: 780px;
margin-top: 10px;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
background:#fff;
}

#footer a {
float: left;


}

#footer p {
float: right;
margin: 0px;
}
---------------------------------------------------------

main.css↓

---------------------------------------------------------
#main {
width: 600px;

}

#month {
width: 600px;
}

#month #month1{
float:left

}
---------------------------------------------------------

コメント(10)

[1] mixiユーザー 02月22日 01:43

ざっくりとしか読んでないので申し訳ないですが、XHTMLで一行目にxml宣言が書いてあるとIE6で互換モードになり、おかしな挙動をしたような気がします。

一行目の宣言文削除してみてもダメでしょうか？

[2] mixiユーザー 02月22日 01:49

まず、ヘッダ内の問題について。

> <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="
>
> バナー" />

ここ、改行せずに一行で書きましょう。
imgの後近辺でソースを改行していると、IEは勝手に余白を組み込みやがります。

次に、janが落ちる……というより、実は#mainが落ちてる件。

> #contents {
> width: 750px;
> (中略)
> }
>
> #sidebar {
> (中略)
> width: 165px;
> (中略)
> }
>
> #main {
> width: 600px;
> }


165+600＝775　なのに、これを入れる#contentsが750幅では
どーやっても溢れますね。

で……
質問トピがあるのに、あなた専用の単独トピを立てるのはいかがなものかと。

[3] mixiユーザー 02月24日 17:22

>雛四季さん

ありがとうございます。一行目の宣言文は削除してみたのですが、変化はありませんでした。


>Ken-Sさん

ヘッダの部分、修正したところ、うまくいきました。imgのあたりの改行、気をつけます。
また、#mainが落ちている件もwidthの修正で対応できました！

こんな単発トピに答えをいただき、どうもありがとうございます。今後は質問トピにあげます。。。


HPBが勝手に修正してしまったので、どこに原因があったのか、まったくわからなくなってしまっていたのです。

質問ついでに伺いたいのですが、FXだとJanのイメージのあとにもう一度Janのイメージを並べても、二つのJanの間には隙間ができません。しかし、IEだと二つのJanのイメージの間に隙間ができてしまうのです。そのために、最終的には横に12個並べたいのですが、FXではきっちり収まるのに、IEでは収まりません。

12個を横に並べたいのでフロートを使っているのですが、何かよい方法はあるのでしょうか。リストをうまく使えばどうにかなるのではないかと予想しているのですが、なかなかうまくいきません。

[4] mixiユーザー 02月24日 17:39

#3 カルゴさん：
> 今後は質問トピにあげます。。。

と言った直後に、

> 質問ついでに伺いたいのですが、

とはどういう事でしょうか。

[5] mixiユーザー 02月24日 18:32

すみません。このトピの流れでの質問だったので…

[8] mixiユーザー 02月26日 23:26

初心者の場合、CSSでつまづいたらもう一度書き直しましょう。失礼かと思いますが、素人さんでしょうから時間的にも余裕があるでしょう？CSSをリセット掛けてもレイアウトが崩れるなら、そもそもCSSを理解できていない証拠です。
勉強のためにもレイアウトが崩れた場合、いったんCSSを書き直してみては？ひとつずつ確かめてコーディングしていきましょう。
CSSを理解していないまま、ここで質問したとしても一時的に解決しただけですよ。

[10] mixiユーザー 02月27日 01:07

うーん、、、Firefoxの表示は、本当に意図どおりですか？　フッタにあるべきものが上に来ちゃってるし、mainがcontentからはみ出ちゃってるけど。。。

ヘッダ部分のイラストが下に落ちちゃうのは、タイトルとイラストの幅の合計が、ヘッダの幅より大きくなってるからでしょう。計算上はピッタリでも、CSSのリセットをしていないとか、ソースを改行していると意図しないスペースが入る場合があります。
特に厳密な位置合わせが必要ないのなら、少し余裕を持たせたらいいのではないかと思います。

それと、あるブロックをフロートすると、そのブロック（の親ブロック）は、他に要素がない場合は高さがゼロになります。contentsの高さを指定してやるか、contentsの後でフロートをクリアしてやる必要があります。

たぶんcontentsのなかにサイドバーとmainを並べたいんだと思いますが、先に書いたほうを右に寄せるにはちょっとした工夫がいるので、素直にmainを先に書いたほうが管理は楽です。

ラッパーのセンタリングもpositionでやるのは大変なので、text-alignとmarginの組み合わせでやったほうがカンタンです。

あと、これは直接関係ありませんが、ファイル名に半角スペースを含んだものは、いろいろとトラブルの元です。できれば使わないほうが無難です。

ログインすると、みんなのコメントがもっと見れるよ

mixiユーザー
ログインしてコメントしよう！

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

CSSテクニック

人気コミュニティランキング

困ったときには

関連ワード

mixiで趣味の話をしよう
新規登録（無料）

このページの上部へ