かなしいときーかなしいときー

ずっと変わったデザインでシャレてるなぁって思ってたサイトをIEで見てみたら普通のブログサイトだったときー。

1. トップ
2. web
3. かなしいときー！

かなしいときーかなしいときー
ずっと変わったデザインでシャレてるなぁって思ってたサイトをIEで見てみたら普通のブログサイトだったときー。

1. トップ
2. web
3. かなしいときー！

とりあえず width は内容幅。心の奥底で width = 内容幅 + padding + margin + border とか思っているので書いて戒めを。（width = 包含ブロックの幅 - padding - margin - border）

で、a 要素（何でも良いけど）を display: block にしてブロック全体でホヴァーを受けるようにするとします。Gecko は diplay: block だけで十分なのですが、IEだとテキスト部分しかホヴァー対象にならない。（でもホヴァーしたときに背景色だけは正常に変わる。今のこのサイトのスタイルシートだと左側のメニューがこれ）

んで width: 100% とかやればIEでもホヴァー対象がブロック全体に広がるんですけど、width は内容幅なので padding とかを指定してるともちろんハミだします（IEじゃハミださないけど）

というわけで、どうやったら親要素全体に padding(margin) を指定しつつ広げられるかはわからんという感じ。

とりあえず _width: 100% なんていう（IEだと先頭のアンダースコアが無視されるバグ利用）アレな解決方法で放置したのですが、納得いかない。

なんか簡単すぎるような解決策がありそうだけど頭悪いので思いつかない。はげる。

1. トップ
2. web
3. わけわかめ width は内容幅

とりあえず width は内容幅。心の奥底で width = 内容幅 + padding + margin + border とか思っているので書いて戒めを。（width = 包含ブロックの幅 - padding - margin - border）
で、a 要素（何でも良いけど）を display: block にしてブロック全体でホヴァーを受けるようにするとします。Gecko は diplay: block だけで十分なのですが、IEだとテキスト部分しかホヴァー対象にならない。（でもホヴァーしたときに背景色だけは正常に変わる。今のこのサイトのスタイルシートだと左側のメニューがこれ）
んで width: 100% とかやればIEでもホヴァー対象がブロック全体に広がるんですけど、width は内容幅なので padding とかを指定してるともちろんハミだします（IEじゃハミださないけど）
というわけで、どうやったら親要素全体に padding(margin) を指定しつつ広げられるかはわからんという感じ。
とりあえず _width: 100% なんていう（IEだと先頭のアンダースコアが無視されるバグ利用）アレな解決方法で放置したのですが、納得いかない。
なんか簡単すぎるような解決策がありそうだけど頭悪いので思いつかない。はげる。

1. トップ
2. web
3. わけわかめ width は内容幅

前にins(del)をインラインとブロックで使い分けたいなんて書いたけど、通常の ins をブロックにして p とかその他もろもろの中に入ってるやつをインラインにすればいいだけか。

要するにこういうこと。

ins {
display: block;
background: #fff url("/img/ins.png") scroll no-repeat bottom right;
margin: 1em 1em 1em 1.5em;
text-decoration: none;
border-style: dotted;
border-width: 1px;
border-color: #ccc;
}

1. トップ
2. web
3. ins(del) 使い分け

前に<%=my "20040324#p04", "ins(del)をインラインとブロックで使い分けたい" %>なんて書いたけど、通常の ins をブロックにして p とかその他もろもろの中に入ってるやつをインラインにすればいいだけか。
要するにこういうこと。

ins {
    display: block;
    background: #fff url("/img/ins.png") scroll no-repeat bottom right;
    margin: 1em 1em 1em 1.5em;
    text-decoration: none;
    border-style: dotted;
    border-width: 1px;
    border-color: #ccc;
}

1. トップ
2. web
3. ins(del) 使い分け