CSS Validatorでのエラー

このQ&Aのポイント
  • 最近作成したサイトで、CSS Validatorのチェックでエラーが発生しています
  • 問題の箇所で「文法解析エラーが発生しました」のメッセージが表示されます
  • エラーの原因が分からず、解決策を探しています
回答を見る
  • ベストアンサー

CSS Validatorでのエラー

すみませんがよろしくお願いします。 最近1つサイトを制作しまして、背景、画像等に透過のPNGを使用して、ie6以前のものでも表示できるように、いろいろな方法の中、 http://blog.l-xs.com/yungsang/2006/12/png_alpha_filter_ie7.html 元 ”韓流”プログラマ、ユンサンのサイトを参考にさせてもらい、 iepngfixを使用して表示されるようにはなったんですが、 CSS Validatorのチェックをすると、これを使用した部分で 「文法解析エラーが発生しました IEPNGFIX.fix(this))」 となります。利用方法としては、下記のようにクラス指定し背景でPNGを使用するところでdivに適用、その他PNGを使う画像のところで#ID img{behavior: expression(IEPNGFIX.fix(this));}で適用させて使用している感じです。 <script src="iepngfix.js" charset="utf-8" type="text/javascript"></script> <style type="text/css"> * html .iepngfix { behavior: expression(IEPNGFIX.fix(this)); } </style> web上でいろいろ検索はしてみたんですが、よく分かる回答もなく どこをどう直せばエラーが消えるのかでかなりつまづいております。。。 ぜひともよろしくお願いします!

  • jjjsk
  • お礼率90% (9/10)
  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • hetare560
  • ベストアンサー率66% (28/42)
回答No.1

こんにちは。 エラーが出るのはbehaviorを使ってるからだと思いますよ。 behaviorはIE独自の機能なので文法チェックをすると エラーとなりますが特に気にする必要はないかと。 ちなみにIE独自の機能でbehaviorの他に文法エラーになるのはzoom ぐらいですかね。他はちょっとわかりません。 もしエラーが気になるのであればbehaviorを記述したIE専用のCSSを用意して、 IEのみにCSSを読み込ませてはいかがですか?

jjjsk
質問者

お礼

ありがとうございました!! IE専用のCSSでばっちりエラーが消え、エラーなしになりました! またひとつ勉強になりました。 これからもよろしくお願いいたします。

jjjsk
質問者

補足

迅速なご回答ありがとうございます! そうなんですね。 一応出来上がりとしては大体のブラウザでも同じように表示するようにレイアウトでき、PNGもしっかりきれいに表示されるので気にする事もないのかと思うんですが、CSS Validatorのチェックでのエラーがこの部分だけで、その他は問題ないので、なんとかできれば気持ちがいいなと思いまして。。。 >ehaviorを記述したIE専用のCSSを用意して、 IEのみにCSSを読み込ませてはいかがですか? との事ですが、こうすることでエラーは消えるんでしょうか? ちなみに方法としてはどうやってやったらいいんでしょうか? すみませんがよろしくお願いいたします。

関連するQ&A

  • PNGがうまく表示されない・・・。

    お世話になります。 PNG画像で分からないことがありますので申し訳ありませんが、わかる方がいらっしゃいましたらお知恵をお貸しください。 以前からホームページでPNG画像を使って重ね合わせて使用していたのですが、最近になりIEのバージョンによって動作が変わってしまうということを知り、確認したところIE5.5とIE6の場合だとPNGの透明部分が灰色になってしまい、背景が見えなくなっていました。 そこでIE5.5~IE6まででも綺麗にみえるようiepngfix.jsというスクリプトを使用してみました。 設定して確認したところ、IE5.5 IE7 IE8とFireFoxで動作を確認することができましたが、IE6でのみPNG部分が映らなくなってしまいました。 (PNGの部分ではなく、背景のJPEGだけしか見ることができません) 下記がソースになります。 <script type="text/javascript" src="png_js/iepngfix.js"></script> <!--[if IE]> <script src="iepngfix.js" charset="utf-8" type="text/javascript"></script> <style type="text/css"> .iepngfix { behavior: expression(IEPNGFIX.fix(this)); } </style> <![endif]--> <div style="background-image:url(i/samp.gif); height:150px;"> <img src="i/top.png" width="780" height="150" border="0" class="iepngfix" /> </div> 参考サイトをコピーして使用したのですが、うまく動作しませんでした・・・。 すみませんが、どなたか教えていただけませんでしょうか。よろしくお願いいたします。 (ちなみにIEでの動作確認はIETesterというものを使用しております。)

    • ベストアンサー
    • HTML
  • iepngfix.jsでPNGを透過させたいがIE6/7で表示が不正

    iepngfix.jsでPNGを透過させたいがIE6/7で表示が不正 サイト内に透過PNGを何点か使用したく、かつIE6に対応する必要があるため、上記「iepngfix.js」を導入しました。 divボックスの背景に敷いたPNG画像は無事に透過されましたが、そのボックスの中にimgタグで配置したリンクボタンの表示が一部不正です。 具体的には、IE6および7にて添付画像のような状態になります。8および他のブラウザは問題ないようです。 マークアップ設定としては、divのcontentsボックスに透過PNGの背景を指定、その中にリストボタンを並べるためのcontents_headlistボックスを配置、その中にaタグでリンクを設定した透過PNGボタンを配置しています。 関連部分のおおまかな設定は以下のとおりです。 body:全面にgif画像(透過なし)を敷き詰め .contents:幅と高さを指定、透過pngをno-repeatで配置、「behavior: expression(IEPNGFIX.fix(this));」「overflow:hidden;」を付加 .contents_headlist:contentsボックス内に配置、幅と高さを指定、左にフロート、パディング指定、「behavior: expression(IEPNGFIX.fix(this));」付加 .contents_headlist内に設置したimg:幅と高さを指定、alt属性指定、リンク付加、「style="behavior: expression(IEPNGFIX.fix(this));」付加 IE6の表示でも、透過部分のグレー表示が見られないので透過自体はされていると思います。 できればiepngfix.jsを使用したままなんとかしたいのですが、iepngfix.js自体のバグか何かならば乗り換えもやむなしと考えています。 不明点等あれば追記しますので、よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • HTMLメールの外部CSSが有効になりません

    HTMLメールから以下のように外部CSS(http://から始めてます)を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか? <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>

  • CSSレイアウトとJavascriptの連動について質問なのですが…

    過去の教えてgooの記事より見つけたJavascriptのテーブルの背景画像がランダムに変わるスクリプトを使用しています。 <script type="text/javascript"> wall = new Array(); /* 使用する背景画像を好きなだけ記述 */ wall[0] = "aaaaaaaaaaaaaaa.jpg"; wall[1] = "bbbbbbbbbbbbbbb.jpg"; wall[2] = "ccccccccccccccc.jpg"; rnd = Math.round(Math.random() * (wall.length - 1)); document.write('<style type="text/css">ontline { background-image:url(' , wall[rnd] , '); }</style>'); </script> CSSレイアウトに変更したところ背景が表示されません。 CSSのOutline部分(<div id="outline"></div>)に表示させようとしたのですが、エラーが起こりレイアウトが崩れてしまいます。 JavaとCSSはどうしたら連動させる事ができますでしょうか? ぜひ教えてください。

    • ベストアンサー
    • HTML
  • ファイヤーフォックスでCSSが読み込まれません

    会社のホームページを担当していて困っています。 IEでは、きちんと表示されるのですが ファイヤーフォックスですと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の「<style type="text/css">」エラーについて

    CSSの「<style type="text/css">」エラーについて Line 1, Column 1: no document type declaration; will parse without validation <style type="text/css"> 1行目でエラーが出ます。意味がわかりません。助けてください。

  • CSSとMacの関係

    CSSの制御で、 外部CSS マック用に css/style_mac.css に body {font-size: 12pt;} td {font-size: 12pt;} ウイン用に css/style_win.cssに body {font-size: 10pt;} td  {font-size: 10pt;} と記述しています。 がプラウザで確認したところ、 windows IE5.0は制御されていますが、 Mac IE5.0で制御されません。 HTMLの呼び出しは、 <SCRIPT LANGUAGE="JavaScript"> <!-- if(navigator.appVersion.indexOf("Mac",0) != -1){ document.writeln('<link rel="stylesheet" type="text/css" href="css/style_mac.css">'); } else { document.writeln('<link rel="stylesheet" type="text/css" href="css/style_win.css">'); } //--> </SCRIPT> と記述しています。 そもそもjavaがわからないので どこを直せばMacでも制御されるのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ファイヤーフォックスでCSSが機能しません

    会社のホームページを担当していて困っています。 IEでは、きちんと表示されるのですが ファイヤーフォックスですと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>

  • HPの文字の大きさを変えるCSSがうまくいきません

    ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!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=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 透過PNGをIE6に適用させたい

    透過PNGをIE6に適応するため、DD_delatedPNGというjavascriptを使おうと思ってコーディングしたのですが、うまく透過されません。 コードは <!--[if lte IE 6]> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a.js"></script> <script type="text/javascript"> DD_belatedPNG.fix('#header_box_r li'); </script> <![endif]--> と<head>の中に書きました。「#header_box_r li」というidに指定した背景画像にjavascriptを適用させIE6でも背景画像を透過させたいのです。 この他にも必要なコードがあるのでしょうか?IETesterで試すと、「DD_belatedが適用されていません。」とでます。コードを間違って記入しているのでしょうか? どなたか、教えてください。

専門家に質問してみよう