もーいや！ブラウザで表示が変わってしまいます。

質問

ホームページをIEとNSとFFで確認すると表示が違うんです。

IEは問題ないのですが、Net ScapeとFire Foxで見ると、とんでもない表示になってしまいます。

全てが全く同じにならなくてもいいとは思っていますが、あまりにもとんでもない表示箇所があるので、出来る物なら修正したいなーと考えています。

問題箇所は、Copy Right部分です。よくあるようにサイトの一番下部分にCSSで個別のBOXを表示させるようにしているのですが、Net ScapeとFire Foxでは上にあるメニューのBOXの下と、とんでもない所に出てきます。

ちなみにCSSの記述は、以下のようになります。
何がいけないんでしょうか？

.copyright {
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
WIDTH: 800px;
COLOR: #ffffff;
PADDING-TOP: 10px;
POSITION: static;
HEIGHT: 30px;
BACKGROUND-COLOR: #81abc3;
TEXT-ALIGN: center
}

これを御覧になって、わかる方おられましたら宜しくお願いします。

回答No.5

Fukurow · ベストアンサー

「position」をはずしても同じとは、私にも原因がわかりません。
参考までに私の指定例をあげておきます。
Copyright は、トップページの最下行に次のように入れてあります（XXXXXXXには制作者名が入ります）。

…………
<p class="copyright">
Copyright &copy; 2001-2005, XXXXXXXX All Right Reserved.
</p>
</body>
</html>

そして、ＣＳＳでは次のように指定しております。

p.copyright {width:800px;
color:#ffffff;
background-color:#3300ff;
font-family:Courier;
font-size:14px;
text-align:center;
margin:0px;
padding-top:3px;
padding-bottom:3px;}

参考になればいいのですが。

お礼

ありがとう御座います、参考にさせていただきます。

CSSもとても奥が深いものですね、もっと勉強したいと思います。

回答No.4

Fukurow

No2では、用語の使い方が少し間違っていましたね。
一般に、ＣＳＳの記述は、
　h1.top {font-size: 15px;}
などと書きます。
　ここで、「h1」をセレクタ名、「top」をクラス名、「font-size」を属性、「15px」を値といいます。
つまり、ＣＳＳの書式は、
　セレクタ名.クラス名{属性: 値}
となります。
Ｗ３Ｃでは、これらの記述をすべて小文字で書くことを推奨しています。

お礼

度々、ご回答ありがとう御座います。

さっそくご指摘の「position」をはずしてみたのですが全く変わりません？

もういっそのことテーブルで作った方がいいのでしょうか？なるべくなら使いたくはないんですが・・・。

回答No.3

noname#12055

> ちなみにセレクタって何ですか？

http://msugai.fc2web.com/web/CSS/selector.html

参考までに、私は「positionは使わない」を絶対条件にしています。
あなたのようなことが起こるのは目に見えてるからです。

使いたいなら、ここらへんは読んでおきたいですね。
http://members.at.infoseek.co.jp/cssbug/index.html

参考URL：

http://msugai.fc2web.com/web/CSS/selector.html,http://members.at.infoseek.co.jp/cssbug/index.html

お礼

ありがとう御座います。

参考にさせていただきます。

回答No.2

Fukurow

No1さんとは逆で、私はＨＰ作成ソフトは使わず、HTML、CSSを使ってＨＰを作成していますが、Ｗ３Ｃの標準仕様に従って作成した場合、安心して動作をチェックできるのはＩＥだけです。Netscapeはブラウザ自体にバグが多く、とくにＣＳＳを使うとひどいものです。
それはさておき、本題に戻りますと、CSSの「position」セレクタは、ちょっと使い方が難しく、ブラウザによって解釈が異なってしまいます。とくにその親要素との関係で、とんでもない動作をします。
お使いのコードを見る限り、「position」の記述はいらないのではないかと思います。
それからこれは蛇足ですが、HTML 4.01やXHTML 1.0ではCSSのセレクタは小文字で書くことを推奨しています。とくに、XHTMLははっきりと小文字で書くようにと指定されています。

お礼

わーん！
御回答ありがとう御座います。

>とくにその親要素との関係で、とんでもない動作をします。

やっぱりそうですよね、少し安心しました。
「position」の記述はいらないのですね、ふむふむ。
早速試してみます。

駄目だったらまた泣きを入れたいと思い間す。笑）

ちなみにセレクタって何ですか？

回答No.1

noname#39234

なにがいけないかといえば

Microsoftが恒常的に
標準規格をないがしろにしたプログラムを開発していること。

CSSについてはNetscape7以降やFirefox等が利用する
Geckoレンダリングエンジンのほうが正確だと言われています。

Netscapeで下に表示してもらえないのは
単純に下に表示する指示が出されていないからで
自動的に下に表示するIEのほうが
(異常な)独自解釈の動作をしている可能性があります。

Netscapeで正常になるように作成していけば
IE基準で作成するよりも、最終的には
多環境対応の負担が楽になる説を聞いたこともありますが
まぁ、ほんとうかどうかは知りません。

今回のケースで、IEが悪いのかどうかはわかりませんが
MS OFFICE互換製品が多々あるなか
NetscapeやOpera等がIE互換表示機能を採用しないのは
IEの表示が、あまりにも標準にかけはなれているからと言えます。

もうひとつ、そのIEを使っている人が多いのもいけないか。
まぁ、IEは所詮はWindowsローカルのアプリケーションで
IEが動かないパソコンはFirefoxの動かないパソコンより
多いってことは間違い無いんですけどね orz

お礼

ありがとう御座います。

IEよりGeckoレンダリングエンジンのブラウザに対して作成基準を設けた方がいいのでしょうか？

でも色々問題は山積みに思うのは私だけでしょうか？
実際ユーザー数はIEが圧倒的ですし・・・。

全てで統一の基準が作れない物でしょうか？