トイレのうず

先日の画像置換IE6にて表示がめちゃめちゃですね。IE6以下で「position:fixed」が使えないから互換モードで表示して、いろいろ小細工しているからだ。
これを直そうとすると、いちからCSSの組み直しか。ちょっと時間がかかりそうなので、ペンディング。とりあえず、元に戻した。

CSSの画像置換とはJavascriptを使わずにテキストを画像に置き換えて表示する方法。画像をbackgroundに指定する方法が一般的だけれど、印刷で表示されないとか問題もある。

旅のサイトでは主にbackgroundでメニュー画像を表示して、テキストを text-indent:-9999px; で画面の外に飛ばす方法をとっていたのだけれど、どうもこの「text-indent:-9999px;」がスパム判定されてるっぽい気がするんですよね。旅のサイトをGoogleSiteMapに登録したと同じくらいにGoogleからのアクセスが減っているのです。画像置換とスパムについては下記サイトが参考になりました。
→Emotional Web：画像置換とSEOスパムの境界線

で、代替方法を複数当たってみて、一番よさそうなAppleのサイトで使われている方法に変更してみました。
→fixture.jp/blog：Appleサイトに見るグローバルメニューの画像置換手法

>>『【CSS】画像置換の方法を変更してみた』の続きを読む

旅の各ページのレイアウトがIEで表示した場合に上に詰まった感じになっていたのを修正しました。今まで気がつかなくてすみません。

IE6以下では position: fixed; が効かないので、上部メニューバーを表示させ、文章部分は overflow:auto; にして仮想的にメニューバーを固定していたのだけれど、どうもmarginがIEでうまく効いていないようでメニューバー分上にずれてしまっていました。サイトを作成したときに確認したときにはちゃんと表示されていたのになぁ。おかしい。とにかく、荒手な方法でbodyの上部マージンで対処しました。（アンダーバーハック使いまくり。）
IE7もだいぶ普及してきたし、もう一度css見直そうかしら。

マイクロソフトはアンダーバーハックよりもConditional comments（条件付きコメント）を推奨しているよう。IEのHTMLサイドの独自拡張で、コメント内にIEの振り分け用キーワードを記述する、という方法。

<!–[if IE 6]>
Special instructions for IE 6 here
<![endif]–>

↑こんな感じ。他のブラウザには害を及ぼさないけれど、HTMLのソースが汚れるのが気になるねぇ。あと、スタイルシートの数が増えるので管理しにくくなるよね。でも今回みたいなバグの場合見つけやすくなるかも。

トイレのうず本館の各コンテンツ内で縦スクロールバーが2本出ていた不具合をやっと修正。
IE6以下では position: fixed; が効かないので、divタグでページ全体をくくってそこにスクロールバーを表示させてたんだけれど、ウインドウの方のスクロールバーが残ってしまっていた。特にウインドウを小さくしたときに2重にスクロールバーが出るのはいただけない、と思いつつ何年も放置していた。
原因はIEが縦スクロールなしでもデフォルトでそれを表示する設定になっているから。要はそれを消せばいいわけだ。

IEで固定座標を指定する方法
↑このページを参考に
html {
overflow: hidden;
}
としてみるけれど、なぜかスクロールバーが消えない。試行錯誤の結果、
body {
overflow: hidden;
}
としてやっとスクロールバーを1本にすることができた。
参考にしたページのサンプルのスクロールバーはちゃんと1本だったから
html {
overflow: hidden;
}
が効かないわけないと思うんだけれど、なんでダメだったんだろう。

ちなみにわたしはIEにのみ対応させるためアンダーバーハックを使いましたが、IE7でちゃんと表示されているのだろうか？　環境がないから確かめようがない。