• ベストアンサー

cssを使ってlist表示(opera)

こんにちは。 初心者ですが、今cssとxhtmlを用いてのweb制作をしております。 cssの指定でマウスを乗せると色が変わるメニュー(横型)を配置したのですが、Firefoxでは動作確認できるのですが、IEでは全部崩れ、operaではメニュー部分のリストが指定できていません。 FirefoxとoperaではCSSの記述に違いがあるのですか? そして、IEで表示する際にcssはどうしたらきちんと読み込んでくれるでしょうか??

  • riepu
  • お礼率93% (29/31)
  • HTML
  • 回答数2
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

各種ブラウザで動作が違う場合、わたしは http://members.at.infoseek.co.jp/cssbug/ とか http://www.mozilla.gr.jp/standards/webtips/ 等を参考にしています。

riepu
質問者

お礼

ありがとうございます。 IEの表示されない件については文字コードの関係でした。 でも文字コードを直して(統一して)表示させるとopera、IEともにレイアウトがガタガタになってしまいました^^; steel_grayさんの参考URLで勉強しなおしたいと思います。

その他の回答 (1)

  • NINJA104
  • ベストアンサー率43% (133/306)
回答No.1

cssで定義しているclass名称にアンダースコア("_")等を使っていませんか? Firefoxでは問題ありませんが、IEでは認識してくれなかった経験があります。

関連するQ&A

  • HTML,CSSの表示について

    宜しくお願い致します。 webサイトを制作しているのですが、 IE6、IE7で表示チェックをすると、レイアウトが崩れてしまいます。 クロム、ファイヤーフォックス、オペラ、サファリは大丈夫でした。 いろいろ調べた結果、IEのバグだと思われます。 そこで疑問に思ったのですが、 プロのweb制作会社の方は、IEのバージョンごとのcssを用意なさっているのでしょうか? それとも、何か他の方法があるのでしょうか? もし参考になるサイトなどあれば教えてもらいたいです。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • MacのfirefoxでCSSが読み込まれない件

    初めまして。 現在XHTML+CSSでサイトを製作しているのですが、ブラウザチェックの段階で、「MacのFirefox」だけCSSを読み込んでくれません。 MacのOPERA、SAFARI WinのFirefox、IE は問題なかったのですが、Macのfirefoxだけダメなんです。 記述は「@import」ですが、個別設定(3つのCSSファイルを個別にhtmlに指定)もやってみましたがダメでした。 このような事態になった方はいらっしゃいますでしょうか? どうか、助けてください、よろしくお願いします。

    • ベストアンサー
    • Mac
  • CSSが反映されない(IE)

    こんにちは。 調べてみても原因が見つからないので質問させていただきました。 Firefoxで動作確認をしたXHTMLとCSSで作成したwebsiteがあります。 そのsiteをIEで動作確認したところ、CSSが全く反映されていませんでした。 文字コードをEUCにして作成したのですが、IEで文字エンコードをshift_jisにしたらレイアウトはガタガタに崩れていますが反映はされるようです。 しかし、バグってしまって文字がおかしくなります。 cssが反映されないと文字は正しく、反映されると文字化けしている、という状況です。 動作確認はFirefox、Operaで行ないました。 全くの初心者ですがどなたかアドバイスをお願いします・・・

  • 公開されてるページのCSSのソースを見たい

    XHTMLとCSSでWEBページを制作したいのですが、IEではきちんと表示されるのですが、FIREFOX,SAFARIでは文字がずれてしまい、レイアウトが崩れてしまいます。そこで、他のページを参考に勉強させてもらいたいのですが、外部ファイルのCSSのソースを見る事のできるブラウザはあるのでしょうか?

    • ベストアンサー
    • CSS
  • CSSを使ってのLIST表示

    CSSを使ってLIST表示を以下のようにしているのですが、 ul.ref { margin: 0 20px; padding: 0; } .ref li { margin: 0 0 5px 0; padding: 2px 0 2px 20px; list-style-type: none; font-weight: bold; color: #03C; background: #DDD url(../img/arrow.gif) no-repeat; background-position: 0.5% 55%; } IEとFirefoxで表示の差が出て困っています。Firefoxの方が自分の思ったとおりに表示されてます。 参考ページ http://canada.ciao.jp/life/share.html IEでもFirefoxと同じように表示させるには、一体上記CSSのどの部分を修正すべきなのでしょうか?それともIE用にCSSを書き換えないとだめなのでしょうか? また、追加質問で恐縮なのですが、上記参考ページでもう1点、IEとFirefoxの表示の違いがあり、ちょっと困っています。ページ右側にある広告枠なんですが、IEだとFirefoxよりちょっと下側に表示されます。 #right { margin: 20px 20px 0 600px; padding: 10px 0 20px 0; text-align: center; } おそらく、上のCSSのせいなのでしょうが、この20pxを失くすと、これまたおかしくなりで、困っています。 アドバイスよろしくお願いいたします。

  • CSSハックの使い方を教えてください

    CSSでサイトを作っているのですが、フッターとメインのwrapperの間を開けるのに、どうしてもすべてのブラウザで共通のCSSではできません・・・かなり格闘したのですが・・・ そこで、この際CSSハックを使おうと思っています。 といっても、よくわかってないのですが、CSSハックを使えば、IE6にはこの指定、IE7にはこの指定、Firefoxにはこの指定、opera、safari・・・ など個別のブラウザに異なったCSSを指定することができるのでしょうか? 実際の記述方法を教えていただけないでしょうか? 「firefoxとopera」にはwrpperにmargin-bottomをかけて、IE6,7にはfooterにmargin-topをかけて解決しようと思うのですが・・・ ちなみに、この現象のほかの解決方法ってあるのでしょうか? #wrapper{ position:relative; width:870px; margin:0px auto; text-align:left; } #foot{ position:relative; width:100%; height:auto; clear:both; }

    • ベストアンサー
    • HTML
  • CSSレイアウトについて

    XHTML+CSSでレイアウトし、IE6、FireFoxで確認すると、横のずれはないのですが、縦の崩れができてしまします。 具体的にはIEでは正しく表示されているが、FireFoxで見ると、縦方向に余分なスペースができるといった具合です。  きちんとCSSで高さを指定していないことが理由でしょうか?

    • 締切済み
    • CSS
  • Operaでの表示がおかしい(CSSハック)

    あるサイトをWebデザインしているのですが、F5キーを押せばOperaでの表示がおかしくなります。 色々CSSファイルとかを自分なりに見て解決法を試行錯誤したのですが、自力では限界になって投稿させて頂きました。 ■ 問題の内容 ・ 表示がおかしいブラウザはOperaに特定される。 ・ 環境はHTML5・CSS(外部ファイル)・JQuery(外部ファイル) ・ Operaで最初に表示させた時はローカル・Webとも通常表示されるが、そのサイトをF5(更新)キーで押した時、サーバーアップ時のみレイアウトが崩れる(ローカル(Windows)上の同ファイルをOperaで開いた時及びF5キーを押した場合は、両方とも表示崩れが起きない)。 ・ レイアウト崩れは特定の部分のみ。 ・ お客様のサイト、自社でテストでアップしたサイトの両方のサーバー(別会社)とも全く同じ現象が起きる。 ・ 通常表示時に別サイトに行き、リンクや戻るボタンで戻った時は、上記崩れは起きていない。 ・ Opera以外のブラウザ(試しているのはOperaのほか、IE・Firefox・Chome・Safari)では上記現象は一切発生しない。 通常のOperaのCSSハックをすれば解決するっていう感じでは無さそうですし。 解決策は何かありませんでしょうか。 よろしくお願いいたします。

  • Operaは劣っているのでしょうか?

    現在OperaとIE、Firefoxがありますが、主にOperaを使用しています。 ほとんどのサイトなどは問題ないのですが、時々「IEとFirefox以外のブラウザではご覧になれません」と出てきて先に進めないサイトもあります。 FirefoxやIEのUserAgentに切り替えることができますので、切り替えると特に大きな問題なく見られます。 ところで、IEはWindows標準のブラウザですので対応していないとなると大問題ですが、 (1)なぜFirefoxは動作するのにOperaでははじかれるサイトがあるのでしょうか? (2)OperaもFirefoxもサイトを表示するエンジン(JavaScript互換性など)の機能が実はOperaが劣っているのでしょうか? (3)もしくはパソコン版Operaの認知度が少なく、ゲーム機や携帯端末に入っているOperaという感じでサイト制作者側から見るとOpera=パソコンではないという印象が強いのでしょうか? それにMozillaの後継としてFirefoxになっているのですが、Mozilla時代を知らなくても使っている人が多いと思います。 個人的にはFirefoxよりもOperaの方が断然便利だと思います。 (4)なぜFirefoxよりもOperaが人気なのか分かる人があれば教えていただきたいです。 質問が長くなりましたが、一つだけでも答えられるところがあればご回答よろしくお願いします。

  • Webページのブラウザ差異を出来るだけ無くす方法

    XHTMLにてWebページを作っています。 業務系のページのため、多くの要素がありかなり隙間なく色々な要素が入っている状態です。 そしてそのページを他ブラウザ・他バージョン・また新しいバージョンのブラウザが出た場合でも表示ができるかぎり崩れないようにしたいのです。 色々試してみてもやはりズレが出てしまって完全にズレを無くすことは出来ないのかもしれませんが、配置が全く変わってしまったりといった大きなズレを無くしたいです。 ブラウザはIE・Safari・Firefox・Opera・Chrome、またIEは8~10の対応は特に重要です。 HTML5やCSS3は使えません。 レンダリングエンジンの違いの影響を受けにくいCSSの指定方法やXHTMLの組み方についてご意見を伺いたいです。

    • 締切済み
    • CSS

専門家に質問してみよう