2008年08月01日

小枝。。もとい小技

あああ

こういう枠をつくって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;
}


例:
あああ
posted by ふなふな at 14:40| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2008年07月25日

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 用 */

もっさいなーw
posted by ふなふな at 14:11| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2008年06月05日

変なスペースが!


・横幅を決めていて、そこにぴっちり画像を並べている場合は
 ソース上の改行をとってみる
・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だけ。
posted by ふなふな at 11:54| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2008年04月03日

gdgd

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

http://blog.so-net.ne.jp/
のヘッダーの、ボタンっぽい部分にマウスをもっていくと
画像が切り替わる。ようにみえる。手法は昔からよくつかわ
れているけどソースを見ると表示されないテキストが書いて
あったりする。クローキングだと疑われないのかな。
posted by ふなふな at 19:18| Comment(1) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2008年03月28日

IE6 表示崩れ


原因調査中のメモ

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

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

なにか簡単なことをミスってるんだろうけど、IE6をメインに確認
しているときはなかった表示崩れが二つも出て困惑中。じっとり
調べる時間をplz
posted by ふなふな at 11:53| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2007年12月29日

IE position:absolute;


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

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


・子要素の並列で最後に clear:both; する
posted by ふなふな at 17:35| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2007年11月14日

CSS 優先度


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

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


...裏づけはなし。誰か実験して。
posted by ふなふな at 23:41| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

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


vertical-align:baseline;

をつかう
posted by ふなふな at 23:37| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2007年08月29日

セレクタ優先度

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


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

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

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

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


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

セレクタは上から順に読まれるので、「下にあるのが優先」です。
posted by ふなふな at 17:22| Comment(2) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

divで組んだtable風レイアウトのborderが(ry

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

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

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

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

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

<div style="min-height:100px;float:left;border-right: solid 1px #000;">内容1</div>
<div style="float:left;">内容2</div>
<div style="clear:left;"></div>
posted by ふなふな at 15:42| Comment(1) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2007年08月14日

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

ボックスの解釈がIEは間違ってるせい。
・widthの指定がなければしてみる
・各種hackを駆使してみる
・そもそも横幅一杯になる必要があるborderを使わない
・borderを背景画像にする
posted by ふなふな at 22:16| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

2007年08月08日

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>
posted by ふなふな at 15:24| Comment(1) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

floatでmarginが倍になるバグ

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

margin-left:10px;
_margin-left:5px;
posted by ふなふな at 15:19| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

IE6で文字が消える

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

■参考
http://coliss.com/articles/build-websites/operation/css/143.html
posted by ふなふな at 15:18| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

IE6で背景が消える

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

■参考
http://blog.webcreativepark.net/2007/01/08-231453.html
posted by ふなふな at 15:16| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする

IE6でborderが消える

・親要素にwidth を指定する
borderの左右を背景画像にする
posted by ふなふな at 15:14| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする