CSSテクニックコミュのIE と firefox で表示がずれる

皆様はじめまして。
私は、htmlの知識は少しあるのですが、cssは全くといって良いほど初心者です。

最近、ブログのテンプレートを自作しようと思い、cssの勉強を始めました。
googleなどで調べながら試行錯誤して、ようやく完成に近づいたのですが、どうしても解決できないことがあったので質問させてください。

私は、普段 firefox を使用してます。
テンプレートの確認も firefox で行っていたのですが、ほぼ完成したものを IE で確認すると、表示が全く異なっていました。
原因は、おそらく position の記述にあると思うのですが、どのような修正をすれば、正しい表示になるのかわからず困っています。
どうか、皆様の力をお貸し下さい。

以下は、問題部分のソースです。

１.cssの部分

#globalnavi {
　position:absolute
}

#globalnavi a{
　color:#ffffff;
　background: none;
　text-decoration:none;
}
#globalnavi a:hover{
　color:#fff;
　background: none;
　text-decoration:none;
}

#top {
position: absolute ;
top: -20px ;
left: 0px;
width: 260px ;
height: 25px ;
}

#Mail {
position: absolute ;
top: -20px ;
left: 260px;
width: 260px ;
height: 25px ;
float: center;
}

#RSS {
position: absolute ;
top: -20px ;
left: 520px ;
width: 260px ;
height: 25px ;
}

#headline {
position: absolute ;
left: 178px ;
top: -55px ;
}

２.htmlの部分

<img src="サイトURL/images/menu.gif" width="780px" height="60px" border="0" />
<div id="globalnavi">

<a href="サイトURL/" id="top"><img src="サイトURL/images/dummy.gif" width="260px" height="20px" border="0" alt="TOP"/></a>

<a href="サイトURL/mail.php" id="Mail"><img src="サイトURL/images/dummy.gif" width="260px" height="20px" border="0" alt="Mail"/></a>

<a href="サイトURL/index.xml"id="RSS"><img src="サイトURL/images/dummy.gif" width="260px" height="20px" border="0" alt="RSS 2.0"/></a>


<div id="headline">
枠内を流れているニュース
</div>

</div>

http://craymore.ddo.jp/weblog/
液晶の中で、文字が流れているように表現したいのです。
あと、メニューのボタンは、ダミーで透明な画像を使用しています。

コメント(15)

最初
全て
最新の40件

[1] mixiユーザー 04月20日 13:34

携帯なのですぐに気づいたとこだけ。

float:に center はつきません。
left right none だけです。

[2] mixiユーザー 04月20日 14:18

早速の回答ありがとうございます。
どうやら色々いじっているうちに、消し忘れた様です(-_-;)
今は、携帯からなので、後ほど修正します。

他にもおかしいところが有りましたら、ご教授お願いします。

[3] mixiユーザー 04月20日 14:21

menu.gifをdivで囲ったらいいんじゃないでしょうか。

[5] mixiユーザー 04月20日 20:51

皆様ありがとうございました。
neige様の方法で、思っていたとおりの表示が出来ました。
簡潔なソースまで作成していただき、ありがとうございます。

面倒とは思いますが、もう一つお願いさせて下さい。

neige様のソースと表示結果を見比べ、なんとなく構造と css の組み方は理解できたのですが、正確な知識を得たいので解説をいただけるとうれしく思います。

恥ずかしながらご指摘の通り、classとidについてまだ良く理解出来ていないものでして・・・

図々しいお願いとは思いますが、もしよろしければお願いいたします。

[6] mixiユーザー 04月20日 21:47

簡単にいってしまえば、
　id = 1回しか使っちゃいけない
　class = 何度でも使える
です。

つまり、
○：<div class="abc">～</div><div class="abc">～</div>
×：<div id="abc">～</div><div id="abc">～</div>
ということです。

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-id

[7] mixiユーザー 04月21日 01:37

>Meatian様
ご紹介のページ拝見させていただきました。
ですが、解ったような解らないような(-＿- ；)

まだまだ、勉強不足ですね。
もっと綺麗なソースを書ける様に、お勉強いたします。

[8] mixiユーザー 04月21日 02:29

craymoreさん：
簡単に言ってしまえば、Meatianさんのおっしゃるとおりなんですが…(^^
技術文章は読んでいて頭が痛くなります。。

<ul>
<li>～</li><li>～</li>
</ul>
<ul>
<li>～</li><li>～</li>
</ul>
というHTMLがあるとして…
先の<ul>～</ul>と後の<ul>～</ul>の色を変えたいとします。

◆対策#1（classは複数使える）
<ul>
<li class="hoge">～</li><li class="hoge">～</li>
</ul>
<ul>
<li class="fuga">～</li><li class="fuga">～</li>
</ul>
/* CSS
********************************************/
.hoge {color: blue}
.fuga {color: red}

◆対策#2（idは１度きり）
<ul id="hoge">
<li>～</li><li>～</li>
</ul>
<ul id="fuga">
<li>～</li><li>～</li>
</ul>
/* CSS
********************************************/
#hoge li {color: blue}
#fuga li {color: red}

（◆対策#3
id,classの概念を説明する都合で <ul class="hoge"> は割愛）

どちらも同じ表示になり、直感的には「対策#1」が解りやすいと思います。

ただし綺麗なソースにしたいなら、CSSが多少複雑になってもHTMLをシンプルにすべきなので「対策#2」の方法を用います。

idはグループを総称して、classは部品を装飾するものという捉え方をしておけば良いのではないでしょうか？

[9] mixiユーザー 04月21日 03:18

一番早いのは技術本を買ってよく読んでみることですよ。

[10] mixiユーザー 04月21日 03:26

>SeeDa!!様
大変解りやすい説明ありがとうございます。
なるほど、そういうことでしたか。
ようやく理解できました。

皆様本当にありがとうございました。

webデザインやコーディングは、奥が深いですね。
私も皆様の知識、技術に追いつける様に頑張ります。

[13] mixiユーザー 04月23日 18:41

すいませんclassとidについて質問があるんですが

今回の例の場合、一つのページ内での話しだったのですが

[xxx.css page1.html page2.html]
上記のような構成で
? page1,page2の両方ともxxx.cssを読み込む
? page1,page2は内容がまったく同じ

といった条件の時、idを使うとページは違えど二度使うことになりますが、この場合idを使うべきなのでしょうか
それともclassを使うべきなのでしょうか？

[14] mixiユーザー 04月23日 19:24

>13: よっぺさん
　Web制作（プロ、素人問わず）に携わる方が機種依存文字はいかがな物かと...。丸に数字ですかね？Mac OS X 10.4.8、Safariで化けてます(^_^;)

　ご質問の件ですが、それぞれのページの内容は問わず、違うHTML文書の中でなら同じidを使用しても全く問題ないです。

[15] mixiユーザー 04月23日 19:42

>14:姫さん
申し訳ないｗｗ
内容はお察しの通り丸１と丸２です。

多分この場合id使ってもOKじゃないかとは思ってたんですが
確信へと変わりました。

ご返答のほうありがとうございました。

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