text-indent:-9999px;ちょっと怖いな。

とある仕事で作ったページのリンク画像表示にtext-indent:-9999px;の手法を使い、
ふとそのページをiPhoneでブラウズしたら、
背景画像が見えていなかった。
ショック！

googleのCSSスプライトはどうしてるんだっけ？と思ったら、以下のページに詳しくコツが書いてありました。
多謝。

http://otaxa.com/css/text-hiding-without-text-indent-9999px/

対処せねば～

■追記：
CSSスプライトで、画像を使ったhoverに直しましたが、
IIEだけ画像置換してくれません。。。

悩んだから、zoom:1;でOKになるという記述を見て、
やってみたらOKに。。
http://likearpeggio.blog63.fc2.com/blog-entry-223.html

 http://www.ryu-raku.co.jp/blog/archives/989

やっぱIE対策はzoom:1;(hasLayout対策)ですか。。。

z-indexとclassとidの関係

z-indexを高く設定したのに,下に表示さえる、という現象に悩みました。

考えてみたら、classにz-index:1000;
idにz-index:500;
などとしていたのでした。

z-indexより、class,idの優先度（詳細度）の方が優先でしたね。

当たり前か。

まあ、解決して良かったです。

IE6でmin-height

IE6でもmin-heightを再現したいと思って検索していたら方法が書かれていたのでメモです。

height:auto !important;を宣言する、と。
で、height:100px;と、min-heightで宣言した高さを更に宣言するようですね。

.foo {

min-height:100px;

height: auto !important;

height: 100px;

}

大丈夫かな？と思って怖々でしたが、一応100pxを超える場合もOKのようです。

よかった。

以下、参考になったページ。

http://blog.creamu.com/mt/2008/03/cssminheighteasiest_crossbrows.html

floatで左右に振って、スライドバーが出現。

左右にカラムを並べるごく一般的なレイアウトで、以前作ったサイトのページ下部にスライドバーが表示されている事に気がついた。

色々調べて、左右それぞれをfloatで左右に振っているのが良くないと判明。
左はfloatで寄せて、右はmargin-leftで右に寄せていく、という方がベターですね。

floatの多用は気をつけないと、表示崩れを起こしやすい、と改めて認識。

IE6でフォームをfloatしたら、崩れた。。

IE６以外は大丈夫でしたが、
header領域をdivでくくり、その中でformをfloat:rightなどとして右寄せしてみたら、
divのheightを大きく崩して、間延びしたレイアウトになってしまいました。

理由が分からなかったのですが、
formをfloatしても、IE6の場合は括られている領域のheightを押し広げてしまうのが原因と判明。

position:absolute;にして対応して、無事レイアウト崩れが収まりました。

z-indexとpositionの大事な関係。

サイト制作をしていて、headerの背景が、main contents部分の上に重なり、main contentsの文字が欠けてしまって困りました。

z-index関係とは分かりつつ、試行錯誤の末やっと解決したのでメモです。

position:relative;等の指定（static以外のpositionプロパティ）をすると、z-indexは高くなり、指定していない要素の上に重なってしまうということで、
main contents部分のpositionをrelativeにしてもIE6はダメで、結局main contents内にmainとsidebarという領域をfloat等で作っていたので、それらにもposition:relative;を指定してやると無事重なり順を変更できました。

z-indexとpositionはワンセットで指定するものですね。
positionを使って大きめの背景を使い、次の要素をネガティブmarginなどで上にずらしてみたりすると、この問題に遭遇しやすいかもです。

IE6でp要素に幅を指定すると、floatしたimgの横がカラム落ち

IE6でimgをfloatさせてるのにpの横がカラム落ちするからおかしいなあ、と思っていたら、
p要素に幅を指定しているのが原因だった。

IE TESTERで調べていて、pに幅指定をしていたのを思い出し、pに幅指定されていると、floatしてもfloatしたimgのwidth+pのwidthが親要素のwidthより大きいと落ちる様子。

モダンブラウザは大丈夫だから、侮った。

pにwidthなんて指定しちゃいけませんね。やっぱ。