CSS検証サービス

質問

ヘッダーと本体の部分のCSSをこの前教えてもらった
CSS検証サービスにかけたらエラーが返ってきました。

div { position : relative ; color : white ; }

#header {position : fixed ; top : 0px ; left : 0px ; overflow : auto ;
　　　　　　width : 100% ; height : 8% ; z-index : 2 ; border-bottom : 1px red solid }

#navi{ position : absolute ; left : 50 px ; top : 10 % ; height : 88% ;
　　　　overflow-x : hidden ; overflow-y : auto ; z-index : 1 ; }

#headerではエラーで出ず、#naviのtopとleftで構文的におかしいと出ます。
やっぱりおかしいですか？ちなみにブラウザ上は想定した通りに行っています。

回答No.2

ORUKA1951 · ベストアンサー

実際に検証してみました。ただし、全角スペースは半角スペースに戻してテストしました。

エラー: 以下のエラーが見つかりました。 (3)
URI : TextArea
6 　#navi 　次のプロパティが正しくありません : left 値が多すぎるか、もしくは値が解析できません : 50 px 50 px
6 　#navi 　次のプロパティが正しくありません : top Lexical error at line 6, column 54. Encountered: "%" (37), after : "" % ;
7 　　次のプロパティが正しくありません : top 文法解析エラーが発生しました [: 88% ; overflow-x : hidden ; overflow-y : auto ; z-index : 1 ; }]

★基点となるセレクタとそれに繫がるセレクタの間には半角スペースは入れられません。
　[例]　div .class　は、div *.class と解釈されます。半角スペースは{子孫セレクタ}です。CSS2では、*(全称セレクタ(詳細度0)が導入され、すべて[基点となるセレクタ][接続詞][繫がるセレクタ]という形式になります。)
　このミスはありませんが、添付画像のように全角スペース、半角スペース、タブが認識できるテキストブラウザで、文字は等幅フォンを使うようにすると、全角半角の誤りはなくなります。EmEditor( http://jp.emeditor.com/ )での画面です。

★値の間にはスペースは入れることが出来ません。
　[例]　　left : 50 px ;と書くと、二つの値がある　left : [値] [値];と解釈されます。そのときに適合しない値の場合デフォルトの50%と判断されますから、left:50% 50% と判断されてしまいます。leftは、値をひとつしかとりえません。同様に
　top : 10 % ;もエラーとなります。

[CSS3]として、W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input+with_options )でチェック
★タブは＿に置換してあります。

div {
＿position : relative ;
＿color : white ;
}
#header {
＿position : fixed ;
＿top : 0px ;
＿left : 0px ;
＿overflow : auto ;
＿width : 100% ;
＿height : 8% ;
＿z-index : 2 ;
＿border-bottom : 1px red solid;
}
#navi{ position : absolute ;
＿left : 50px ;
＿top : 10% ;
＿height : 88% ;
＿overflow-x : hidden ;
＿overflow-y : auto ;
＿z-index : 1 ;
}

お礼

ご回答有り難うございます。
質問文に書くのを忘れましたが、あるサイトの記述を
参考に自分で手打ちで作成しました。コピペではありません。

エラーはそのエラーです。まさか空白がいけないとは。
前にも<div>を< div >として悩んだ記憶があります。
また再現されてしまいました。ｏｒｚ＿

回答No.1

notnot

インデントを全角空白でやっているのは、ここへの投稿時の修正ですよね？
それ以外だと、50 px を 50px に、10 % を 10% に修正すると、http://jigsaw.w3.org/css-validator/ でCSS3 として正当と検証されました。

CSSでは空白は意味を持っているので、むやみに挿入してはいけません。

お礼

すみません。見やすいように全角に変換しています。
でもコピペしてくれるんだから半角のままの方がいいですよね。

50pxと10%はここだけ空白が空いてました。
うーん、でもこんなのでエラーになるのですね。
どうも調べて頂いて有り難うございます。