いやいやブログ

VistaでCSSを書いていて思わぬミスをしてしまった(^^;

a .hide {
　　visibility : hidden;
　}
a:hover .hide {
　　visibility : visible;
　}

この「hidden」のときに高さを指定してもIE6には効かないんですね。あれこれいじると「!important」だらけになって結局は素直に表示していたブラウザまでおかしくなって来る(苦笑)

たまたまXPでWordを読んでたとき、ふと思いついてIE6で見て発見したのですが少なからずショックでした。IE7ではバッチリでしたから、これを見てもIE6の出来損ないぶりを思い知らされます。要するに古いんですね(^^;

ユーザ数を考えれば、第一に考慮しなければいけないことだったんですが、またもIE6の亡霊に出くわすとね。もう生きてる必要はないので、いい加減にお墓に入ってください！

»追記

CSSについてはいろいろと悩むものですが、IE6は特に悩みの種です。ここ数日考えていたことに、ひょんなことから答えが見つかりました。

800×600ピクセルの画像があります。
これを200×150ピクセルで表示します。
a:hoverで800×600ピクセルの原寸表示しようと思います。

»最初の答え
[CSS]
a:hover img { width: 800px; height: 600px; }
[HTML]
<a href="./"><img src="sample.jpg" width="200" height="150"></a>

これではIE6は動作しません。試行錯誤を続けるうちに、ある答えが出ました。さらに簡略に書けないかと考えていたのですが、ふと初めの答えに戻ってみました。するとこんな答えになりました。

»最終案
[CSS]
a:hover { border: none; }
a:hover img { width: 800px; height: 600px; }
[HTML]
<a href="sample.jpg" title="enlarge image">
<img src="sample.jpg" width="200" height="150" alt="拡大"></a>

a:hover { border: none; }　これを追加するだけでいいんですね。
属性と値は何でもいいようで { background: #fff; } でも動作します。理由はともかく実用になりそうなのでメモしときましょう(笑)

8月27日に書いたCSSは思いつき程度でしたが、こんどのCSSは使えると思います。

　　　div.box {
　　　　　　min-height: 110px;
　　　　/* height: 110px; */
　　　　　　height: auto;
　　　　}

「height: auto; 」を追加するとOperaやFirefoxでもブロック内の要素が増えても自動的に高さが増えます。もっともこれの影響でIEの場合は条件によっては高さが110ｐｘ以下に自動的に縮小されます。

画像がブロック内でフロートされ、テキストが画像の高さに及ばない場合などは効果的と思います。「/* height: 110px; */」としたのは「height」がダブルのは正しい書き方とは言えないことと私の好みというだけです。

完全な解決ではないがベターな書き方かなと、自分用にメモしときます。

ブロック要素の高さを指定するとIEと他のブラウザでは挙動が違うので不便です。
よく使われるのがアンダースコアハックという不適切な書き方です。

　　min-height: 300px;
　　 _height: 300px;

IEは指定の高さ以上に子要素が増えた場合は自動的に高さを増加します。ところが他のブラウザでははみ出てしまうため「min-height」を使って高さの初期値と自動的に高さを増すことに対応しています。

IEは「min-height」を解釈できず、「_」を無視するため「height: 300px;」とみなすことを利用しているのですが、私的にはどうも気分が良くありません(苦笑)

そこで私は次のように書いて、気持ちだけはスッキリさせています。

　　height: 300px;
　　min-height: 301px;

これならIEは300px、他のブラウザは301pxを初期値としてOKではないでしょうか。

　　追記 :
　　ちょっと思いついたことを書いたのですが勘違いでした(苦笑)
　　というのも書き順がどうあれOperaなども「height: 300px;」の方を優先します。
　　上手くいってるように見えたのですが、またなにか別の方法を探るとします。

いや、突然の土砂降りで見とれてました。気持ちいい(笑)

ブログでコメントをテストしていたら「コメントの入力内容が不正です」ときた。それではと別名のブログで試すと大丈夫。はて？ どうやら文字コードがおかしいようです。

物は試しに(って、よくやるんですが)Webにアップ中のファイルを転送してローカルで試すと大丈夫です。それを一部書き直して改めてWebにアップです。両方とも大丈夫のようですが、どこが違ったのか全く分りません。

こんなことを一日のうち何度もやっているとストレス溜まりますね(苦笑)
今日の作業はこのくらいにしときましょう。

いままで3箇所でブログを試してました。どういったスタイルのブログがあり、私の好みに合うブログはどれか、色々と試行錯誤していたわけです。

タイトルも同じく「いやいやブログ」ですが今日から新しいブログのスタートです。アクセシビリティへの改良も可能ですし、構成の分りやすさシンプルさが気に入りました。

いつ気が変わって他のブログに乗り換えるか分ったものではありませんが、このブログのカスタマイズをとことんやるなら使い続けるしかなさそうです。

質問されても説明しにくいですね。リンクとも違うし引用みたいな面もあるしで「コメントの中で話題にしたことをまわりにお知らせするリンク機能」なんて言ったら余計に分りにくい？(苦笑)

ま、トラックバックすること自体がちょっと面倒ですからあまり利用したくはないですが、それじゃブログを使う必要なんてないじゃないかと笑われそう(~~;

それにしてもWカップサッカー、日本の惨敗には参りました。敗因は宮本にあり、私はそう思います。攻めのサッカーを確認していながら、小野の投入を宮本はなんと解釈したんでしょうね。どう考えても引き分け作戦じゃないでしょうに。大事なときに役に立たないディフェンダーなんていらんわ！

ま、敗戦と言う事実はもうどうしようもないですから次の試合を楽しみに待ちますか。それにしても前監督トルシエの「死ぬ気でやれ！」には笑いました。あのトルシエも最後は理屈じゃないんだね(笑)