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) | 日記 | このブログの読者になる | 更新情報をチェックする