久しぶりに更新と言うか 久しぶりに煮詰まってたのが解決したので
忘れないように書いときます。
inputにロールオーバーつけるのって前に書いたんだけど
phpの記述内に入れたら IE6で反応してくれなくて＞＜
1日半を費やしてしまいました・・・・
１．csshover3.htcをDLします。こちらが配布サイト です。
２．cssに設定します。
body {
behavior:url("../js/csshover3.htc");
}
bodyに設定するしするので もうぉ～～これでロールオーバーさせ放題！
:hover や :active の他に :focus もバッチシ！
でもサーバーによって反応しない時もあるらしくて
その時は、.htaccess に
AddType text/x-component .htc
って書くと幸せになれるかもしれないらしいです。
clearfixが良く使われていたのですが IE8でも使えるのがあるのか知りません。
と言うか 私は、clearfixを使った事がないのです。
いつも 私が使うのは、親要素に float:left; を入れます。
でも これだと場合によっては、都合が悪い時があるのでその時には、 overflow: hidden; 使います。
<div id="oyayouso">
<div class="hidari">
<p>ごまとすももは、こむぎとケビンの子供です。</p>
</div>
<div class="migi">
<p>くるみは、プリンの子供です。</p>
</div>
</div>
#oyayouso {
overflow: hidden;
}
.hidari {
float:left;
}
.migi {
float:left;
}
■ dtとddを横並びにして dlかdtにpadding-leftを設定すると
ddの内容の2行目からとかが IE6で3px後ろに下がってしまいます。
これを 回避するには、ddに『zoom:1;』を入れれば良いのですが
ここで問題が二つ！
□ 『zoom:1;』 は w3c のチェックでエラーをくらいます。
□ 運が悪ければddの中身が 8em ほど右に寄ってしまいます。
■ dtとddに繋がった border を引く時は、dd の左の余白を margin ではなく padding にすると dtとddに繋がった border が引けます
<ol>
<li>
<dl>
<dt>トイプードルが３頭います。</dt>
<dd>名前は、ゆず・かりん・レモン</dd>
</dl>
</li>
<li>
<dl>
<dt>チワワが７頭います。</dt>
<dd>名前は、プリン・りゅう・こむぎ・くるみ・ケビン・ごま・すもも</dd>
</dl>
</li>
<li>
<dl>
<dt>ボルゾイが４頭います。</dt>
<dd>名前は、さつき・ウォーリー・あんず・ジンジャー</dd>
</dl>
</li>
</ol>
こう書くと IE6で
トイプードルが３頭います。
名前は、ゆず・かりん・レモン
2.
チワワが７頭います。
名前は、プリン・りゅう・こむぎ・くるみ・ケビン・ごま・すもも
3．
ボルゾイが４頭います。
名前は、さつき・ウォーリー・あんず・ジンジャー
となり 1個目のリストマークが行方不明になります。
＝＝＝＝解決方法＝＝＝＝
<ol>
<li><!-- IE撲滅運動実施中！ -->
<dl>
<dt>トイプードルが３頭います。</dt>
<dd>名前は、ゆず・かりん・レモン</dd>
</dl>
</li>
<li>
<dl>
<dt>チワワが７頭います。</dt>
<dd>名前は、プリン・りゅう・こむぎ・くるみ・ケビン・ごま・すもも</dd>
</dl>
</li>
<li>
<dl>
<dt>ボルゾイが４頭います。</dt>
<dd>名前は、さつき・ウォーリー・あんず・ジンジャー</dd>
</dl>
</li>
</ol>
と コメントを書けば良いぽいです。コメントは、なんでもOKみたいです。
dtの入れ子でdl dt ddを入れるのは、文法違反なのだそうです。
全然 知りませんでした。チェックで前は、エラー出たけど ここんところ出ていなかったんですよね・・・
でも こうせざるを得ない場合ってあって その時にスタイルシートが反応しなくて
ほとんど半日すぎてしまいました。
＝＝＝＝結 果＝＝＝＝
＜ 先に入れ子の設定を書く ＞
div#test dl {
red：toybox；
}
div#test dl dt {
red：toybox；
}
div#test dl dd {
red：toybox；
}
＜ 次に入れ子の指定を上書きし（←ここ重要！）親要素の設定を書く ＞
div#test>dl {
chocotan：toybox；
}
div#test>dl>dt {
chocotan：toybox；
}
div#test>dl>dd {
chocotan：toybox；
}
■ 親要素の指定を 『>』 を使って 後に書くと良いらしいです。
