具体例がないと何とも言えませんが、IEと違い、FireFoxもOperaも仕様(ルール)にかなり忠実です。
仕様通りにCSSを記述し、IEのバグに対応するように小技を使うのがベストだと思います。
もしくは、マイノリティ(FireFox、Operaを切り捨てるか)
IEでキレイに表示されるのを第一に記述し、それがFireFoxなどで表示されるようにするのはかなり難しいです。
ごく簡単な例としては、
body { color: black;}
* html body { color: blue;}
とすれば、IEでのみ文字色が青になります。
* htmlにマッチする要素は本来は存在しない(htmlはルート要素だから、親要素は存在しない)ので、これもIEの有名なバグです。
ただし、CSSの内容によります。IE用に記述したモノに1、2点手を加えるだけで、FireFoxなどでも使えるようになることもあります。
例えば、
body { color: blue;}
[lang] body { color: black;}
とすれば、IEが対応しない属性セレクタ[lang]に対応したブラウザ(firefox, Opera)でのみ、文字色が青になります。(html要素にlang属性が指定してある必要があります。XHTMLの場合[xmlns]がよく使われます)
上記の例と見た目は同じですが、どちらを基本の記述とするかという点で異なります。
この質問では、この程度の一般論としてしかお答えできないと思います。すみません。
URLは、各ブラウザのバグをリストアップしてあるページ、ボクが分かりやすいと思うCSSのリファレンスです。
http://hp.vector.co.jp/authors/VA022006/css/index.html
正しい知識を得たい人の爲のCSS2リファレンス
崩れている、だけでは答えようがありませんが、Firefox や Opera のほうがスタイルシートの解釈を正しく行っている確率が高いです。
基本的に Firefox や Opera に合わせ(Operaもなんか変なところがあるような気もしますが)、
<!--[if gte IE 5]> 〜 <![endif]-->
を使うなどして IE 用に別のスタイルを用意してみてはいかがでしょうか。
あぁ、そういうタグもあったのですね!知りませんでした。よろしければ質問文のURLをfirefoxなどで見てください。カラムが成り立たないんです。
回答ありがとうございました。
>質問文のURLをfirefoxなどで見てください。
質問文にURLが見当たらないのですが。
私のこの回答のコメントにURLを書くと以降の回答がつきやすくなると思います。
あれれ、書いたと思ったんだけど。。。
私のURLはこれです。http://future-links.net よろしくおねがいします!
http://jigsaw.w3.org/css-validator/
The W3C CSS Validation Service
CSSでのコメントは
<!-- コメント -->
ではなく
/* コメント */
形式です。
完全な不正なCSSなのでCSS自体が認識されてません。
コメントを上記のように修正すれば、概ね表示されます。
一部、IEとは表示が異なりますが、それについては、先の回答のURLを参照されてはどうでしょうか。
細部まで拝見していませんが、CSSの検証は以下のURLでできます。
そうだったんですね!!
回答ありがとうございました!
style.css内のコメントアウトの仕方が間違っています。
<!-- -->ではなく
/* */を使ってください。
細かい部分は他の方の回答を参考にされればいいと思います。
回答ありがとうございます!
ざっとみさせていただきましたが、訂正しようとするとほとんど
書き直さないといけなくなり、回答する方も大変な部分(書ききれない)があるので、気になった点を変えるだけでもきれいになると思います。
class と id の使い方が逆です。
学級と生徒の関係を考慮して書換えて下さい。
class と id の名前にタグに使われる名前を重複させない。
head table link タグ、left right bottom top
(要素としてスタイル決める用語)を id の名前にしない。
これが備わっていないと多分回答がつかないように思います。
回答ありがとうございます。
idは要素が単独の場合、classは要素が複数あった場合に使うと聞いたので、このようになりました。
別々にCSSファイルを作ってJavaScriptでブラウザ別に読み込みというのはだめですか?
-----<例>-----
<!-- IEのときのCSSファイル -->
<link rel=”stylesheet” type=”text/css” href=”msie.css”>
<script language=”JavaScript” type=”text/javascript”>
<!--
str = navigator.userAgent.toUpperCase();
if (str.match(’FIREFOX’)) {
// FIREFOXのときのCSSファイル
document.write(”<link rel=¥”stylesheet¥” type=¥”text/css¥” href=¥”firefox.css¥”>”);
} else if (str.match(’OPERA’)) {
// OperaのときのCSSファイル
document.write(”<link rel=¥”stylesheet¥” type=¥”text/css¥” href=¥”opera.css¥”>”);
} else if (str.match(’NETSCAPE’)) {
// NetscapeのときのCSSファイル
document.write(”<link rel=¥”stylesheet¥” type=¥”text/css¥” href=¥”netscape.css¥”>”);
} else if (str.match(’MSIE’)) {
} else {
// 上記4つすべて当てはまらないときのCSSファイル
document.write(”<link rel=¥”stylesheet¥” type=¥”text/css¥” href=¥”none.css¥”>”);
}
// -->
</script>
-----<例>-----
ちなみにIEはdocument.writeをすると白紙ページになる(<link 〜>のみ書かれる)のでJavaScriptより前に定義しています。
回答ありがとうございます!
<body id=”body”> → <body> ※body{}
<div id=”total”> なくして body に入れる ここはなくても影響はない
#head → .header か .atama 等
※ div.header{},div.header h2{},div.header p{},div.header img{}
<ul id=”menu”>
<li class=”menu”></li>
:
:
</ul>
→ ここはmenuが重複しているので一つ上に div を作り、
<div class=”osina”> ※div.osina{}
<ul> ※div.osina ul{}
<li> ※div.osina ul li{}
とこのような形で書くとセレクタの継承が上手くいく。
<div id=”leftside”> → <div class=”hidarigawa”>
<div class=”lefttitle”> → <span class=”hidaridai”>
<table class=”table”></table> ← class=”table” から kensaku 等にかえる
ここまで来て疲れてしまったので、続きはあした。
問題点まで来ていないので、終了してもいわしに書きます。
回答ありがとうございます!
メールも読ませていただきました!!
http://itpro.nikkeibp.co.jp/free/ITPro/USNEWS/20041126/153104/
「Webブラウザのシェア,IEが5ポイント減,Mozillaが5ポイント増」,オランダOneStat.comの調査:ITpro
Javaスクリプト等でブラウザ毎にcssを切り替える方法や、共通する仕様だけで作るという方法があります。 MozillaやOperaが絶対正しいということは無いですよ(笑)
しかし、50%以上のシェアを有するブラウザに合わせて作るれば良いという考え方もあります。
私は、現在のところはMozillaやOperaに合わす必要はないと私は考えます。 つまり無視しして良いという事。
Firefox 1.0は使えると感じてますが、IEに取って代わるような魅力はありません。
個人サイトで50%、オフィシャルは20%のシェアを超えたブラウザには配慮すべきかと思っていますので、今はIEでよければ全てし・・・かな。
回答ありがとうございます!
回答ありがとうございます。具体的には、質問のURLをFirefoxなどでごらんいただければわかると思うのですが、idブロックで指定したカラムがまったく無視されてしまいます。