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

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

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

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

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

IE6とposition:absoluteと幅高さ指定。

IE6でposition:absolute;を使う場合、
どうもposition:relative;を指定する要素がしっかりwidthやheightが指定されていないと、position指定したとおりになってくれない様子。

モダンブラウザはOKだが、IE6でずれるので、いろいろやってみて縦横を指定したらOKになったので、メモ。

どちらかだけでもいいのかもしれない。要するにhasLayoutというあれが原因かな。。

backgroundの一括指定メモ。

background指定の際、

background-image:url(example.jpg) no-repeat;
ではエラーで、
background:url(example.jpg) no-repeat;
はOK。

なぜなら、background:という指定方法は、「ショートハンド」として複数の属性値を指定可能。

background:url(example.jpg) no-repeat 5px 0;
などとしたら、leftから5px,topは変わらず、となる。
数値指定は、left topの順番。

background,短くて便利。

IE6でh1要素を見えなくしようとして躓いたメモ。

IE6でh1要素を見えなくしようとして、躓いたメモです。

text-indent:-9999px;
を使い、
font-size:0px;height:0px;visibility:hidden;
等も指定したのですが、
他のモダンブラウザは消えてくれても、IE6だけは高さそのままで消えてくれませんでした。
（メインビジュアル上にサイト名も書き込んでいるので、そのような設定を必要としていました。メインビジュアルをh1要素の背景にすれば話は早いのですが、CMS上での特殊な適用で、ちょっと工夫が必要であったので。）

結局、position:absolute;を指定して、他のボックスから切り離して対処しました。

自分の対処が最善か、まだ調査が必要そうです。

隣接セレクタと子セレクタを認識。。

子要素にだけスタイルを適用するには、親要素を正しく設定してやる必要あり。

内のh2要素の後にくるulに左マージンを作ってやろうとしたら、関係ないグローバルナビのulにまでマージンが発生してレイアウト崩れて、少々悩みました。
h2 > ul{    margin-left:50px;
}
みたいに設定したら無理で、
div#main > ul {
    margin-left:50px;
}
はOKでした。

子セレクタへのCSS適用は、ちゃんと親要素を設定してやらないといけませんね。

h2とulは隣同士の関係だったので、「隣接セレクタ」という「+」で設定するようですね。
「子セレクタ」と「隣接セレクタ」を混同していました（爆）

input type='text' とtextareaの違いメモ

input typeでtextにした際は、textboxの長さはsizeで指定。

一方、textareaの場合は、rows,colsで指定。

メモでした。

backgroundの省略形と、CSSでの一枚画像でのロールオーバー

backgroundというプロパティなら、backrgound:url(button.png) no-repeat 0px 0px;
などという風に複数の値を記述可能。

background-imageならイメージのURLだけ。当然ですが。。

それで、CSSのみでロールオーバーさせる場合、
上下にロールオーバー前と後の両方の画像を作って、
a要素をdisplay:blockにし、
backrgound:url(button.png) no-repeat 0px -30px;
みたいに上などに適宜ずらしてやればOK。

参考になったページ：http://www.acky.info/tips/css/00014.html