IE6でCSSの一部の記述を読み込まない
- IE6でCSSの一部の記述が読み込まれないエラーに困っています。
- 外部CSSに書いた一部の記述が効かない現象が発生しています。
- IE6がCSSの一部の記述を読み込まないエラーの原因について教えてください。
- ベストアンサー
IE6でCSSの一部の記述をを読み込まない
IE6でCSSの一部の記述を読み込まないので、困っています。 上位のIEやモダンブラウザーでは出ない症状です。 解決策の判る方に、お助けをお願いします。 外部CSSに書いた内容で、反映するものと反映しないものがあります。 div#main { } とかはOKで、p.small { } 、td.com { } などの classに書いたものが、効きません。 他にも、h2 { } 等も効きません。 IE6は、CSSのコメントを閉じる前に全角文字があるとエラーになるとか、 HTMLとCSSの文字コードが違うとエラーとか、ありました。 該当はしていません。 classを複数並列記載するとエラーなど、Googleで探したら、 ありましたが、そのようなな複雑なことはやっていません。 他に、IE6がCSSの一部の記述を読み込まないエラーの原因となるものは、あるのでしょうか。 一部の内容です。 CSS========== @charset "UTF-8"; 以下、略 HTML========== <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="base.css" type="text/css" /> 以下、略 思い当たる原因として、 <body>の上に、wrapper を以下のように定義して、センター配置しています。 div#wrapper { width:800px; height:100%; position:absolute; top:15px;left: 50%; margin-left: -400px; background-color: transparent; margin-bottom:0px; } この子要素や孫要素に、コンテンツが書かれています。 孫要素は、float している場合もあります。 そのような構造では、本題のエラーが出るものなのでしょうか？ お助け願います。
- YOKOHAMA-Boy
- お礼率42% (23/54)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
IE7以上できちんと適用されるならIEは無視して構わないとは思います。 マイクロソフト自身が「腐った牛乳」と使用して撲滅キャンペーンを張っているくらいです。 マイクロソフト、IE6 撲滅に向けた一大キャンペーン始める | スラッシュドット・ジャパン IT ( http://it.slashdot.jp/story/11/03/07/2037203/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%BD%E3%83%95%E3%83%88%E3%80%81IE6-%E6%92%B2%E6%BB%85%E3%81%AB%E5%90%91%E3%81%91%E3%81%9F%E4%B8%80%E5%A4%A7%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%9A%E3%83%BC%E3%83%B3%E5%A7%8B%E3%82%81%E3%82%8B ) まず、スタイルシートの順番を変えると適用されたりされなかったりするのでしたら、それでどの部分以降が読まれていないかチェックできます。 また、子孫セレクタを解釈しない部分がありますから、間に全称セレクタを入れてみるとかします。 一意セレクタで記述したスタイルに対して、複数クラス指定しても二つ目以降は利きません。 p.small { } 、td.com { } は、 p small { } 、td span.com { } と指定できるようにHTMLを書き換えます。 これはＩＥ６のバグですが、HTMLをきちんと記述することで回避できるはずです。 ＞これは、800pxワイドのwrapper をセンター配置させるCSSです。 まともなブラウザでしたら width:800px;margin:0;auto; なのですが、IE6でしたら body{text-align:center;} #wraper{width:800px;} #wraper *{text-align:left;} ですかね。 私は、この点についてはIE6は無視しています。左に偏って表示されても問題ないですから、それよりも、スマホや幅広ディスプレイに対応させるため div.article{width:80%;min-width:640px;max-width:800px;margin:0 auto;} です。 IE６への対応に使う労力がもったいない。 最近では、数字にも上がってこない 日本のバージョン別ブラウザシェアグラフ （StatCounter Global Statsより） ( http://lhsp.s206.xrea.com/misc/browser-share-version.html )
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まずHTMLの文法チェック、ついでCSSの文法チェックをしてください。 The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) なお、細かい部分ですが、HTMLの場合 <link rel="stylesheet" href="base.css" type="text/css" /> ではなくて <link rel="stylesheet" href="base.css" type="text/css"> です。 left:50%; margin-left:-400px; とはなに？？
補足
HTMLの文法チェックをThe W3C Markup Validation Serviceでしました。 <link rel="stylesheet" href="base.css" type="text/css" />を修正しました。他に、ダイレクトで style=""で書き込んである点がエラーではないですが指摘されました。ほかには、エラーはありませんでした。 CSSも、W3C CSS 検証サービスでチェックしましたが、background-colorと文字色の指摘のみで、エラーはありません。 まだ、IE6/7でエラー状態です。 left:50%; margin-left:-400px; これは、800pxワイドのwrapper をセンター配置させるCSSです。 参考： http://www.css-lecture.com/log/css/032.html その他、UTF-8で、htmlとcssとを書いています。 あと、何をチェックすれば、IE6/7のエラーを解決できるでしょうか？
関連するQ&A
- IEでCSSの中央寄せが効かない
common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか？
- ベストアンサー
- HTML
- IEでエラー
FireFoxだと問題ないのですが、IEだとエラーが出ます。 原因がわからないので、助けてください。 IEには次のようなエラーが出ます。 ライン：5 文字：1 エラー：構文エラーです コード：0 ソースコードは以下の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> 。。。。 以上、すみませんが、よろしくお願いします。
- ベストアンサー
- HTML
- html,css初心者です。ヘッダーの余白について
ヘッダーの余白について教えて下さい。 どうしてもヘッダーの上部分に余白ができてしまいます。 HTMLとCSSをはります。 bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="font.css" type="text/css"> </head> <body> <div id="header"><!--/ #header --> あいうえお </div> </body> <html> CSS #header{ width: 980px; margin: 0 auto; background: #fff; text-align: left; } 宜しくお願いします。
- ベストアンサー
- HTML
- cssがIE6で適用されない理由は
教則本を見てcss/xhtmlでサイトを作ったのですが、 （教則本がIE7以降対応だった為） safari firefoxd IE7では表示がうまくいくのですが、 IE6では全くcssが適用されないです。 少し調べたところこの辺の記述に問題があるのかなと思っています。 誰か教えて下さい。 ............................................................................... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jap" lang="jap" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> ....................................................................
- ベストアンサー
- HTML
- IE用CSSが適用されない
通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]--> <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？ 宜しくお願いします。
- ベストアンサー
- HTML
- CSSでフォントが適用されない
CSSでレイアウトを作成しました。 フォントはMS Pゴシックを指定しています。 CSSを外部にしましたらフォントがMS Pゴシックではなく、明朝っぽくなっています。他のCSSは適用されているのにフォントだけが適用されていません。 ※外部CSSにする前はMS Pゴシックになっています。 html ------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="style/style.css" rel="stylesheet" type="text/css" media="all"> <title>無題ドキュメント</title> ------------------------------------------------- 外部CSS ------------------------------------------------- @charset "utf-8"; html { height: 100%; } body { font-family:"ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Osaka"; padding: 0px; margin: 0px; font-size: 0.8em; } ------------------------------------------------- どこが間違っておりますでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- IE8でページの一部が表示されない
CSSテンプレートを利用して作成したページの、ヘッダーや周りの色つき部分、フッターが正しく表示されません。Chromeでデバッグした際は問題ないのですが、なぜでしょうか？ CSSも初心者のためよく解析ができていません。 HTMLでは次の宣言をしてありますが、これに問題があるのですか？ すみませんがお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head><title>********</title> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <link rel="stylesheet" type="text/css" href="style1.css"> <meta name="GENERATOR" content="MSHTML 8.00.6001.19019"></head>
- ベストアンサー
- ホームページ作成ソフト
- ファイヤーフォックスでCSSが読み込まれません
会社のホームページを担当していて困っています。 ＩＥでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか？ よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>
- 締切済み
- ネットトラブル
- 【CSS】Firebfox内でbackground-imageを使うって階層化すると・・・
IE６では正しく表示されるのに、FireFoxだとずれてしまうという問題について、ご教授ください。 CSSで２つのBOX（outboxとinbox）と定義します。 outboxの定義の中にinboxを配置します。 outboxの背景にbackground-imageをいれなければ問題ないのですが、いれるとinboxの位置がおかしくなってしまうのです。（outboxからのmarginが効かない）IEでは正しく（意図したように）表示されています。 ソースは以下です。 test.gifは、outboxのwidthとheightにあわせて作成するか、widthをheightを変更してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="ja"> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title>test page</title> <style type="text/css"> <!-- .outbox { margin-top:100px; margin-left:auto; margin-right:auto; width:449px; height:270px; background-image:url("test.gif"); background-repeat:no-repeat; } p.inputbox { margin-top:120px; margin-left:110px; } --> </style> </head> <body> <div class="outbox"> <p class="inputbox">aa</p> </div> </body> </html>
- ベストアンサー
- HTML
- 【フォント】記述したCSSが反映されない
ログを検索しましたが同様の質問は無いようなので投稿させて頂きます。 先日PCを買い替えましてXPからVistaへと移行しました。 しかし新しいPCで自分のサイトを見てみると、CSSでフォントをTahomaに指定していたページの文章が何故かゴシック体で表示されています。 （サイトは旧PCでビルダー7を利用して作成したものです） 古いPCからHTMLのデータを移動し早速ソースを確認、上書き保存等してみましたがフォントはゴシック体のまま。 明朝なども試しましたが反映されてくれません。 やはりOSやブラウザの変更が原因なのでしょうか。アドバイスをよろしくお願いします。 ↓HTMLソースの一部を掲載します <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <meta name="robots" content="noindex,nofollow"> <STYLE type="text/css"> <!-- body { scrollbar-face-color: #000000; scrollbar-highlight-color: white; scrollbar-shadow-color: white; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: white; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000; } --> </STYLE> <style type="text/css"> <!-- a{ text-decoration:none; } --> </style> <style type=text/css> <!-- body,td { margin-top : 50pt; margin-left : 90pt; margin-right : 90pt; margin-bottom : 40pt; font-size :15px; font-family :'Tahoma'; } --> </STYLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 7.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE>(仮）</TITLE> </HEAD>
- ベストアンサー
- HTML
お礼
一般的にはIE6の影響は小さいと思います。 特定の所では、XPと合わせてまだ残っていて、たまたま特定のところのホームページだったので、あせりました。 何とか、まともになりました。 お礼を申し上げます。