ここのWebページは、はじめはHTML 4.01 Strictに合わせて書いていたのですが、 唐突に思い立って、全体をXHTML化してみました。理由は簡単。新しい物好きだから。 まあ、そんなに新しいものでもないことは承知してますけどね。
…しかし、まだ全体が完成していないというのに、 何をやってるんだか。
ページの大体の枠組みが見えてきたところで、見た目もしっかりとさせようと、 腰を据えてCSSいじりを始めてみました。この辺で、見た目を決定させないと、 暫定的に決めたものをずるずると使ってしまいそうなので。
ええと、まずはメニュー。Mozillaあたりで トップページを見ると右上に出てくるあれ ね。チェックチェック。
は、テキストブラウザで見ると最後の項目の後ろに何か余計な文字が…
最後の項目の後ろには<span class="hide"> | </span>
はいらないのに。どうやらコピペしたときに消し忘れた模様。消し消し。
さて、このメニューで問題になるのが
Internet Explorer(以下IE)と、
Opera6での見た目。
IEで、メニューが最上段に現れるのは、IEがCSSのposition: fixed;を解釈できない
せいなので、(たぶん)対処法はないと諦めることにして(マテ)、Opera6の、メニューが画面上部
ど真ん中に居座るって、ありゃないでしょ。うむむ。バグか？ それともデフォルト
スタイルシートとの兼ね合いでこうなってるだけか？ それなら対処のしようがありますし、
私としては後者であって欲しいと思っているのですが、CSSの仕様書を読むにつれてなんだか
前者のような気がひしひしと。
とりあえず、似たようなことをやっているページを探して、と。う〜む。 幅をきめ打ちしてるっぽいな〜。これやると、文字の大きさを大きい方に変えられると なかなか楽しげな表示になってしまうんだよな〜。何より、それをやるとIEでの見た目が さらにしょぼくなってしまうじゃないかっ(笑)
うーん、しょうがない。とりあえず保留。次いこ、次。
次に目をつけたのは Lineage冒険記: キャラクター紹介。 一見、何も問題がないように思えますが、実は結構巨大な落とし穴が。
じつは、この能力値表はtableで表現しているんです。 レイアウト目的で使っているんではなく、ホントに表だからいいんじゃないか、 という向きもおありかもしれませんが、甘い。STRなどの6つの基本能力値を ひとところに押し込めるために、一まとまりであるはずのこれらがソース上では ばらばらの場所に。しっかりレイアウト目的でつかっちゃってるんですね。 さらにそんな構造をしているもんだから、 tableを無視してくれるlynxなんかで見ると見事にばらんばらんのわけワカメ状態。
で、考えてみた結果、定義リストで表して、スタイルシートで配置ってのは いいんじゃないかな〜と。tableで結構見やすくまとまってたw3mが割を食う 形になってしまうけど、lynx使いを敵に回すわけにも行くまい。
早速テスト用ファイルを作って作業開始。
えーと、見出しの真横に内容をつけるには… なるほど、display: compact;ね。
って、あーた、天下のIE様が対応してないではないですか。まあ、仕様書にも、
displayに対応していなくてもよいとの旨書いてあるようだし、仕方ないか。
ならばマージンを駆使して何とかするまで。まずは高さを3exに決め打ちして、
margin-top: -3ex;などとしてみる。どうだっ。
Opera…問題なさげ。Mozilla…問題なさげ。IE…
……………………またお前かあぁっ(爆)
ぜはぜは。げほっ。…なんか数ピクセルずつ下にずれてるし。マージン、 パディングともしっかり設定している…はずなのに。
むう。これも諦めかな？
当初考えていた大きな変更、二つとも挫折。
Operaが:first-line擬似要素を認識しないとか、
IEが:first-letter擬似要素を認識しないとかならどうにでもなってるのに。
と、現実逃避がてら、ちょこちょこと細かいレイアウトを変更。 例えばこの雑記の 日付表示 とか。とか… とかぁ？？
なんでIEだと表示が欠ける かなぁ？
はあ、もう何がなにやら…
何か自分の無知さ加減にあきれてきた…
