• 締切済み

IE7でcssの表示が出来なくなりました

こんにちは。タイトルの通りです。 私はHTMLを結構ごちゃごちゃとデザインにこだわって作成します。 そのせいでデザイン変更の際はいろいろと手間だったのでcssは外部参照で一括に設定していました。 それが、これまでのバージョンでは思ったように表示されていたんですがパソコンを買い換えてIE7にしたら認識しないようになってしまいました。 しかもすべてを認識しないわけでもなく、たとえば画面の周りをぐるりと太枠で囲むように指定した部位(body{border-style: solid;border-width: 20px;)は認識されるのに、その色指定(border-color: #ff8040;)は認識されなかったり、 カーソル指定( cursor:crosshair;)は認識されたりと、表示されるものもあります。 しかしスクロールバーやリンク色の指定はどのサイトでもデフォルトで表示されてしまいます。また壁紙や背景色は表示しません。 単に設定の問題なのでしょうが、調べてもいまいちわからず・・・ 考えられる問題点、解決策を出来ればわかりやすく教えてくださると幸いです。

みんなの回答

  • karita_83
  • ベストアンサー率45% (39/86)
回答No.5

http://blog298.blog25.fc2.com/blog-entry-462.html これの逆のことをやってみるのはどうでしょうか? cssの問題ではなく、すべてのサイトで、ということは ブラウザの設定で切ってしまっているのではと思います。 どうぞご確認ください

全文を見る
すると、全ての回答が全文表示されます。
  • sugarp
  • ベストアンサー率54% (721/1331)
回答No.4

うーん、原因だと思ったのですが。 そうなってしまうとこれ以上はちょっと思いつきません… 中途半端で申し訳ないです。。。

全文を見る
すると、全ての回答が全文表示されます。
  • sugarp
  • ベストアンサー率54% (721/1331)
回答No.3

「safari」はどうですか? これはCSS3に完全対応していると思います。 http://www.apple.com/jp/safari/ これでもダメですと、もう元のCSSの方を見直すしかないかも知れません。 といいますか、IE8でダメというCSSは、ちょっと… と個人的には思いますが。

yanagi103
質問者

お礼

重ね重ねありがとうございます。 safariでは表示できるようですね。 おそらくcssの問題ではないと思いますよ。 というのは、私の素人サイトはともかく、yahooなどプロが作成していると考えられるサイトでもcssを認識しないからです。真っ白な画面のyahoo!mail・・・非常に味気ないです--; cssなしというのは本当に見づらいので、解決策が見つかるまでsafariとoperaでやっていこうと思います。

全文を見る
すると、全ての回答が全文表示されます。
  • sugarp
  • ベストアンサー率54% (721/1331)
回答No.2

原因がハッキリしましたね。 では、対応ブラウザをインストールするか、元のCSSのバージョンを 落とすのか、のどちらかになります。 CSSの方をいじるのが難しいようでしたら(バージョンを落とすことで 再現できなくなる機能もありますので)、ブラウザをバージョンアップ するしかありません。 IE8をインストールし、「IE7互換モード」に設定してください。 IE8をただ入れただけでは互換性の問題で、不具合出る可能性があります。 まずIE8の今のWindowsに合ったものをインストールし http://www.microsoft.com/japan/windows/products/winfamily/ie/function/default.mspx インストール後、IE8の 「ツール」→「互換表示設定」→「互換表示ですべてのWebサイトを表示する」 にチェックを入れてください。 これでIE8を再起動すれば、「IE7互換モード」で動くようになります。 とりあえず1台お試しになってみて、様子を見てください。うまくいくようで あれば全台に適用してください。

yanagi103
質問者

お礼

回答ありがとうございます。 IE8をインストールしてみましたが、改善されません。 一応ほかのブラウザも試してみましたが、fire foxでもほぼ同様に表示されます。 しかしOperaは色指定や背景の設定も読み込み、一番見栄えよく表示されるようです(IEを想定して作成されたサイトは少々崩れますが)

全文を見る
すると、全ての回答が全文表示されます。
  • sugarp
  • ベストアンサー率54% (721/1331)
回答No.1

1つの可能性ですが、「CSS2」や「CSS3」ではありませんか? CSS1や2しか表示できないブラウザもあります。または設定で表示が できなくなっているかも知れません。 こちらでそのブラウザがCSS2や3を表示できるかご確認できます。 http://www.lucky-bag.com/archives/2006/10/css3-selectors-test.html

yanagi103
質問者

お礼

回答ありがとうございます。 さっそくテストしてみたところ、相当数「サポートされていない」と表示されました。 ブラウザをインストールし直すといいんでしょうか・・・困りました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • CSSでborderの長さを指定、または可変にしたい。

    下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。 文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。 h3{ border-width : 0px 0px 1px 5px; border-style : solid ; border-color : #FF3333; padding-left : 5px; }

    • ベストアンサー
    • HTML
  • CSSでテーブルボーダーを表示させたいのですが・・

    スタイルシートを使用したテーブルのボーダー表示について質問です。 スタイルシートで下記テーブルボーダー表示設定をしたところ、 IEでは表示されるのですが、Netscape7.0ではボーダーが全く表示されません。 table.01 {FONT-SIZE: 12px; border-collapse : collapse ; border-width : 1px 0 0 1px ; border-style : solid ; border-color : #37503D ; background-color:#FAFFFB;} table.01 td {border-width : 0 1px 1px 0 ; border-style : solid ; padding : 5px ; line-height:120%;} 現在調べているところですが、お解りになるかたがいらっしゃれば是非教えていただけないでしょうか。 どうぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • CSSについて 初心者です。

    勉強中の身なんですが・・ このように設定した場合文章1と文章2が大きく開く状態になるんですが、なぜでしょうか? また文章1セルの真ん中に表示され文章2が左にひょうじされるのも分りません・・・・ いろいろ調べてみたんですが中々納得ができなくて・・・ 特にこうういう風にやりたいとかは特になくて、なんでこうなるのかが知りたいのです。 詳しい方説明して頂けるとありがたいです。すみませんがよろしくお願い致しますm(。。)m 「HTML」 <table> <tr> <th>見出し</th> <th></th> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <td>内容</td> <td>&nbsp;</td> <td>&nbsp;</td> <td></td> </tr> </table> 「CSS] table{ width:250px; border-collapse:collapse; border-width:1px; border-style:solid; border-color:#000000; border-spacing:0; } th{ border-width:1px; border-style:solid; border-color:#000000; } td{ border-width:1px; border-style:solid; }

    • ベストアンサー
    • HTML
  • cssを使った枠線の表示について

    css初心者です。宜しくお願いします。 タグ打ちしたHTMLファイルとcssファイルがあります。 cssファイルに「.waku {BORDER-WIDTH:5px;BORDER-COLOR:#FFFFFF;BORDER-STYLE:SOLID}」と記述し、 HTMLに「<P CLASS=waku>適当な文字列</P>」としました。 この、「適当な文字列」の周りに5pxの白い枠線が表示されたところまではうまくいったのですが、画面の左右いっぱいまで枠線が延びています。 (1)文字列の幅に合わせて、自動的に枠の幅を変えるにはどうすればいいのでしょうか? (2)この枠の幅を「画面の50%」あるいは「500px」などと指定することは可能でしょうか? (3)文字列と枠線との間隔を調整することは可能でしょうか? 余談ですが、cssの記述の際、スペースを多様している例をよく見かけます。 冒頭での私の書き方でも正常に動作しているようですが、「.waku { BORDER-WIDTH : 5px ; BORDER-COLOR : #FFFFFF ; BORDER-STYLE : SOLID }」このように (4)各文字列や値の前後にスペースを入れる理由を教えてください。

  • Cssで

    次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し2</h2> <h2 class="sample1">見出し2</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }

  • NN使用でのCSSでのBORDERについて

    IEで TD.TD1{BORDER-STYLE:SOLID; BORDER-COLOR:CORNFLOWERBLUE; BORDER-WIDTH:1; BACKGROUND-COLOR:ALICEBLUE;} のように指定すれば、細い線で囲まれたものをかくことができますが、NNでは、背景色は有効になっても線が出てきません。 これを有効にするにはどのようにしたらいいのでしょうか? また、IE・NNで表示結果が違うCSSの一覧などが載ってるような便利なサイトがもしあったら教えてください。

    • ベストアンサー
    • CSS
  • CSSでIEとFirefoxでの表示の違い

    IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常(希望通り)に表示されるようにするには どのような記述にすれば良いのでしょうか? 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSSを消して表に色を付けたい!!!

    参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「CSSが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> 1.CSSを全て解除しなければいけないのですか? 2.メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか?

  • ホームページ 点線の入った表の書き方(CSSを使って)

    表を作っています。 何度もチャレンジしながらやりましたが・・ギブアップ・・・分かりません。。わかる方がいらっしゃったら教えてください。 http://hw001.gate01.com/with-flower/tesuto/article04.html (1)1つの枠の中(物件)で区切りに点線を入れたいのですが、どのようにしたらいいでしょうか? (2)上下に重なった枠線を片方だけにできないでしょうか? または改行を入れようと思ったのですが、間隔が広すぎておかしくなります。改行幅の指定はできるのでしょうか? ↓CSS .solid {border-width:1px; border-style:solid; border-color:#330000;} .dashed {border-width:1px; border-style:dashed; border-color:#cccccc;}

  • 指定したborderの一部が表示されない

    以下のようにboxを作りその中にフロートさせた2つ(div class="b"とdiv id="c"を作り、 div class="b"の方にdiv class="nwesbox"を作り、その中にiframeを入れました。 問題はdiv class="nwesbox"に上下左右に表示指定したborderの線の右側のみブラウザ(ie7)で表示されません? div id="c"を取り除くと表示されます、nwesboxやiframeの幅を変更したりしてみましたが 解決できなく困っています、どなたか教えていただけますでしょうか? 宜しくお願いします。 以下html記述-----↓ <div class="box"> <div class="b"> <div class="nwesbox"><iframe id="iframe" frameborder="0" scrolling="yes" src="whats.html" title="お知らせ">お知らせ</iframe></div> </div> <div id="c"> <p>*****</p> </div> 以下CSS記述------↓ .box{ width : 898px; margin-left : 0px; margin-top : 0px; padding-left : 0px; margin-bottom : 0px; } .b{ width : 575px; margin-left : 0px; margin-top : 10px; background-color : #ffffff; padding-left : 10px; float : left; margin-right : 0px; } .nwesbox{ width : 575px; height : 233px; background-color : #ffffff; border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #0080ff #0080ff #0080ff #0080ff; } #iframe{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 573px; height : 228px; padding-top : 0px; overflow : auto; margin-top : 0px; } ↓---iframe内に読み出してる先のテーブルに指定した内容(テーブル幅)--- #what{ width : 545px; background-color : #ffffff; margin-top : 0px; }