mk-mode BLOG

このブログは自作の自宅サーバに構築した Debian GNU/Linux で運用しています。
PC・サーバ構築等の話題を中心に公開しております。(クローンサイト: GitHub Pages

ブログ開設日2009-01-05
サーバ連続稼働時間
Reading...
Page View 合計
Reading...
今日
Reading...
昨日
Reading...

ブログのW3C(CSS)チェック!

[ サーバ構築, ブログ ] [ CSS, W3C, WordPress ]

こんばんは。

   昨日、自分の ブログページ のW3Cチェックを行いましたが、今日はW3CCSSの方をチェックしてみました。

エラーは意外と少なく10個ほどでした。

エラーの内容は、ほとんどがケアレスミスでしたが、他にクロスブラウザ対応の記述部分がエラーになってました。

IE用の記述部分ですが、IEってかなりのくせものですな~。 W3Cへの対応が遅れているそうな。

普段、自分はIEなんて使わないから、あまり意識してなかったけど、、、 時々、もしやと思ってIEで表示を確認してみるとやっぱりおかしいってことが非常に多すぎる!

僕が思うに数々のブラウザの中でも一番やっかいじゃないんかな!?

ま、そんなこんなで何とかW3C(CSS)チェックもOKになったんで、めでたし。

ちなみにIE対応するのに結構ググって調べて以下のように修正しました。 (正確かどうかは不安だが、とりあえずチェックが通ったんで。。。) ↓↓修正前↓↓

1
2
3
4
5
6
7
8
9
10
11
12
13
div.post table.code pre.code {
    margin: 0px;
    border: groove 1px #808080;
    background-color: #333333;
    padding: 10px;
    font-size: 1em;
    line-height: 1.4em;
    overflow: auto;
    overflow-y: hidden;
    _width: 90%;                /* for IE4 - IE6 */
    *padding-bottom: 25px;      /* for IE? - IE7 */
    color: #FFFFFF;
}

このままだと、 「 overflow-y: hidden; 」、「 _width: 90%; 」、「 *padding-bottom: 25px; 」の部分がW3C(CSS)でエラーになります。

↓↓修正後↓↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div.post table.code pre.code {
    margin: 0px;
    border: groove 1px #808080;
    background-color: #333333;
    padding: 10px;
    font-size: 1em;
    line-height: 1.4em;
    overflow: scroll;
    color: #FFFFFF;
}

/* for IE? - IE7 */
*:first-child+html {} * html {} div.post table.code pre.code {
    width: 90%;
    padding-bottom: 25px;
}

「 *:first-child+html {} * html {} 」を付けると、IE(7以前)に対応できるみたい。

※ちなみにこちら( 小粋空間:IE7 の CSS ハック )を参考にさせてもらいました。

これで、このバナーを貼れます。

正当なCSSです!

(当ブログの右下参照!)

※当方では以下のブラウザで動作確認しています。

  • FireFox3.0.6
  • Opera9.63
  • InternetExplorer6.0

・IE7では試してませんので、あしからず。。。

   じゃあまた!

Comments