小枝。。もとい小技

あああ

こういう枠をつくってmouseoverしたときに背景を変えたいとき、
getelementbyid でやればいいんだけどcssでもできる。

:hover　の疑似セレクタを使えばいいけどIE6だと a タグ以外
サポートしていない。どうするかというと以下のように a タグ
を block 要素として扱えばいい。

<a href="URL" class="hoverLink">あああ</a>
.hoverLink{
display:block;
padding:10px;
background:#ccc;
border:solid 1px #000;
}
.hoverLink:hover{
background:#fff;
}


例：
あああ

IE7 ハック

なぜかie7のハックが効かなかったので、
http://www.koikikukan.com/archives/2006/11/17-015033.php

ぐぐったらIE6のアンダースコアハックの要領で以下の記号なら
なんでもいけるそう。
http://pico.g.hatena.ne.jp/vantguarde/20060701
!@#$%^&*()+=/?.,|[]{;:<>


便利なのでこれからも使おうと思ったけど、、う、うーん。
どれにしよう。。 html ファイルではあんまり見かけない
$　あたりが便利かなぁ。後々検索しやすくて。

ドルドレイハックと名付けよう。あぁ久しぶりにオラタンが
やりたい。ごめん、ドルドレイはウソ。



あ、ちなみに当然IE6にも効くので、最終的に以下のようになるかも。

padding:10px;
$padding:5px;/* IE7,IE6 用 */
_padding:0px;/* IE6 用 */

もっさいなーｗ

変なスペースが！

・横幅を決めていて、そこにぴっちり画像を並べている場合は
　ソース上の改行をとってみる
・form のstyleをpadding:0;margin:0;にする
・使っている画像に1px余計な隙間が入り込んでいないか確認する
・h[1-4]タグを使っている場合はstyleをpadding:0;margin:0;font-size:12px;にする

hタグを使ってその中に画像しかない状況って言うのはあんまり
無いだろうしお勧めできないんだけどfont-size:12px;がないと
本来のfont-size:18px;ぐらいのスペースが取られてしまうこと
を最近知りました。ちなみにIEだけ。

ｇｄｇｄ

バグではないけどグダグダな話題でも書いてみようかと思った
けどあんまり思いつかないっていうグダグダっぷり。

http://blog.so-net.ne.jp/
のヘッダーの、ボタンっぽい部分にマウスをもっていくと
画像が切り替わる。ようにみえる。手法は昔からよくつかわ
れているけどソースを見ると表示されないテキストが書いて
あったりする。クローキングだと疑われないのかな。

IE6 表示崩れ

原因調査中のメモ

IEのメインを（間違ってもメインブラウザをIEにしたりはしない）
7にして、6をスタンドアローンにしてから確認がおざなりになって
久しい。そんな中でたまに6で確認すると表示が崩れている。

・floatで組んだレイアウトがおかしい
　（ある画像の左側1pxが消えている）
・backgroundの様子がおかしい
　（マウスでなぞると no-repeat　なのに繰り返し気味の表示になる）

なにか簡単なことをミスってるんだろうけど、IE6をメインに確認
しているときはなかった表示崩れが二つも出て困惑中。じっとり
調べる時間をplz

IE position:absolute;

position:absolute; を使ったボックス要素の子要素で

width:300px; のようにサイズ指定してるにも関わらず
枠幅を無視して内容がはみだしてしまう。


・子要素の並列で最後に clear:both; する

CSS 優先度

参考
http://anslasax.net/css-make/cascade.html

但し、IEの場合 import 先のファイルで!importantがあっても、
import 元のファイルで上書きの記述がある場合!importantより
優先される。


...裏づけはなし。誰か実験して。

半角英数字のベースラインが揃わない IE

vertical-align:baseline;

をつかう

セレクタ優先度

最近全然バグのことじゃないけど。自分のおまぬけ備忘録。


<h3 class="title">タイトルよ</h3>

とかあって、あれースタイル効かないなと思ってたらこんなん
なってました。

h3 {
padding:10px 0px 5px;
margin:20px;
}

.title{
padding:0;
margin:0;
}


まぁ例が極端なのでアレですが、cssファイル内では
上二つの記述が離れていたため小一時間悩むハメに。

セレクタは上から順に読まれるので、「下にあるのが優先」です。

divで組んだtable風レイアウトのborderが（ｒｙ

divで組んだtable風レイアウトのborderが下まで伸びない時、

height:100%; とすればいいが親要素に height:200px; の
ようにサイズが入ってなければいけない。仕様。

親要素の高さが場合によって違う場合は何も指定しなければ
height:auto;　で可変になるが、以下のような場合で、

<div style="float:left;border-right: solid 1px #000;">内容１</div>
<div style="float:left;">内容２</div>
<div style="clear:left;"></div>

内容１　と　内容２　の高さがわからない場合、どちらが
高いかによって線が途中できえてしまう。
正しくはないかもしれないけど　min-height:100px;　で一応解決

<div style="min-height:100px;float:left;border-right: solid 1px #000;">内容１</div>
<div style="float:left;">内容２</div>
<div style="clear:left;"></div>

IE6でborderやpaddingの取り方が違う

ボックスの解釈がIEは間違ってるせい。
・widthの指定がなければしてみる
・各種hackを駆使してみる
・そもそも横幅一杯になる必要があるborderを使わない
・borderを背景画像にする

floatの上手な使い方

以下のようにするとき、どのタイミングでクリアするか。

<div>
<div style="float:left;">左</div>
<div style="float:right;">右</div>
<div>その下</div>
</div>

以下の形が一番問題がでづらい。

<div>
<div style="float:left;">左</div>
<div style="float:right;">右</div>
<div style="clear:both;"></div>
<div>その下</div>
</div>

floatでmarginが倍になるバグ

・これもIE6限定。アンダースコアハックを使うのが楽

margin-left:10px;
_margin-left:5px;

IE6で文字が消える

・hasLayoutのせい。*{zoom:1;}とする。
・<div style="clear:both;"></div> してると無理
・諸々調整が必要になったりインライン要素追加したりしないといけない
・IEうんこ

■参考
http://coliss.com/articles/build-websites/operation/css/143.html

IE6で背景が消える

・after擬似クラスとcntentプロパティを使う

■参考
http://blog.webcreativepark.net/2007/01/08-231453.html

IE6でborderが消える

・親要素にwidth を指定する
・borderの左右を背景画像にする