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

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

とりあえず 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だと先頭のアンダースコアが無視されるバグ利用）アレな解決方法で放置したのですが、納得いかない。
なんか簡単すぎるような解決策がありそうだけど頭悪いので思いつかない。はげる。

とりあえず 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だと先頭のアンダースコアが無視されるバグ利用）アレな解決方法で放置したのですが、納得いかない。

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

前に<%=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;
}

前に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;
}

構想3分。制作1時間半。
暇すぎ……
てか、左側のやつが、だんだんゲゲゲの鬼太郎に見えてきて鬱です。
たぶんまだ弄ります。
途中で左側のぶっとい奴が一番下までいかねーよぉお。なんてことに悩んだり……
結局ボーダーで解決。えっと、だから左側のぶっといのはボーダーです。15emのボーダー。あぁ、なんで思いつかなかったのだ。

教えてもらったのをメモメモ。

content: "AAA\A BBB";
white-space: pre;
\Aの後に半角スペースが必要なのか……
<BR> 要素に相当するとか何とかなのにwhite-space: pre;なのか……
Operaも同じ実装だしなぁ……良く分からない

ブロックとなるときとインラインとなるときとで適用するスタイルを変えたい……

ネタ元：blockquoteはもう古い〜fieldsetの伝説(legend)!! via fieldsetで引用 @ securecatのMT

たのしそう。ウケた

月日は百代の過客にして、行きかふ年も又旅人也。

奥の細道　松尾芭蕉

<style>
blockquote {
    position: relative;
    padding: 1em;
    border: solid 1px #000;
}
blockquote cite {
    position: absolute;
    top: -0.7em;
    left: 1em;
    padding: 0 0.5em 0 0.5em;
    background: #666;
}
</style>
<blockquote>
<p>月日は百代の過客にして、行きかふ年も又旅人也。</p>
<p><cite>奥の細道　松尾芭蕉</cite></p>
</blockquote>
blockquote の中に cite でテンパりつつこれ自身はインラインスタイルでむにゃむにゃ
position: relative のブロックの上ボーダーがIEで消える。float と相性が悪いらしい。
眠い。わけわかんない。眠い。パープルくらげ
おもいっきり invalid だったのを修正
title属性で引用元を書いて blockquote:before {content: attr(title); ...} とかやったほうがいいと思う。IEで表示できないけど。追記の追記：これ無理らしい（ワレズ日記：どちらもカッコよく見えないっていうか（笑））
この引用はブロックじゃないよな……
なんか微妙に大事なんですね……