html/css

firefoxでmargin-bottomがmargin-top

[追記 / 20110323] コメント欄に別の対処法が2件あるよ

[image]firefox / 上にmarginが付いてh1との間に隙間があいてる

理由がわからないんだけど
Firefox(3.6.15のみ確認)でmmargin-bottomがmargin-topになるのです。

スクリーンショット

chrome

こうなって欲しい
[image]chrome / h1と#primaryに隙間は開かない

IE8

こうなって欲しい
[image]IE8 / chromeと同じ

Firefox

なのにこうなる
[image]firefox / 上にmarginが付いてh1との間に隙間があいてる

原因と解決法を考える

結論から先に書くと、上記の構成の場合
ulにdisplay:inline-block;を追加して意図した表示に出来た。

あれ、display:tableでも平気か?

Firefox

display追加するとこうなった。
[image]firefox / display:inlin-block;追加

けど理由が全くわからない。

どんな状況で発生するのか試してみると
liにposition:absolute;でも同じ現象が起きたので
浮動体に問題がありそうな感じ

多分Firefoxが間違ってるんだろうけど
firefoxの仕様が正しいのか他のブラウザーの仕様が正しいのか知りたい

ここら辺を理解できたら解決するのだろうか。。。?
Visual formatting model
Box model / 8.3.1 Collapsing margins

ulにborderを付けてもmargin-topみたいな隙間は消える
[image]border付けた
border使えない時はこれじゃダメだ。

rollover2.jsとoperaと色々復習

凄く滑らかなロールオーバーを超お手軽に実装できるrollover2.jsというものがあるんですが
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript – KAZUMiX memo
クロスフェードするロールオーバー処理 動作サンプル – XHTML サンプル | KAZUMiX memo

これ、imgにvertical-align:bottom;や
vertical-align:top;を指定してある場合、
operaでpositionの基準点がうまくいってないような感じの
とんでもない表示になってて(v10.50以前は確認してないけど)

例 / positionの基準点がうまくいってない感じの表示
[image]左がfirefox、右がopera

今気づいたけど
aタグの中にrollover2.jsのロールオーバー対象になるimgだけが入っていると
おかしくなる。

aタグの中にimgの他に、テキストが入っているとおかしくならない。

蛇足 / imgにvertical-align:bottomしたい(してる)理由

ご存知vertical-alignの初期値はbaselineなので
アルファベットのg,j,p,q,yの下に飛び出る部分(ディセンダって名称らしい*1)の余白が確保され、テキストと並べた時にimgの下に隙間ができちゃう

この隙間を埋めるには、vertical-align:text-bottomを指定するのが定石みたいなんだけど
operaだとテキストの位置がズレてたので(10.50以降?)、
いつしかbottomで指定するようになって
しばらくしてbottomを指定するようになった理由を失念してました。

[image]text-bottomとbottom
今確認してみたらbottomも表示が変だった><;;;なんだこれ。

とりあえず
vertical-align:text-bottomを指定しとけば
operaでクリック出来なくなるくらい表示が崩れる事はないのかな?

ここから先は失敗を含む試行錯誤メモ

続きを読む

li内のaをdisplay:blockした時IE6でmargin-bottomぽいところが広がる

liの中のaタグにdisplay:blockを指定して
クリック出来る部分を広げた時
IE6で下marginが広がってしまった。

みた感じaタグのmargin-bottomが拡張されている風だけど
marginを0にしても消えない。

どうもこれは、hasLayoutがtrueじゃないから起こるみたいで
普段はaタグにwidthを指定してるから発生してなかった。
(widthに値が入ってればhasLayoutがtrueになる)

今回は_zoom:1を追加して対処。

他にhasLayoutをtrueにするには
hasLayout Property (A, ABBR, ACRONYM, …)

CSS property Value
display

inline-block
height

any value
float

left or right

position absolute
width any value
-ms-writing-mode tb-rl

zoom any value

IE6 CSS Fixer

ie6fixer – onderhond.com
普通のcssからIE6用のcssを吐き出してくれるサービス、現在バージョン0.95。

例えば

IE6だと左右のmarginが40pxになってしまう以下の記述

これをie6 css fixerで変換させると
(select your master stylesheetのpaste your complete master stylesheetを選択してgive me my ie6 fixesをクリック)

なんてcssを吐き出してくれる。

これを保存してコンディショナルコメントでie6だけ読み込むようにすれば対策完了。

でもって、最初からdisplay:inline;が付けてる場合は、新たにdisplay:inline;を吐き出さないのかな?と試してみたけどdisplay:inline;を吐き出してた。

というか、

を変換すると

を吐き出してた。
むむむ?

dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;

タイトルが全てだけど

dtとddを横並びさせた時、IE6でddが3pxズレる時はzoom:1;を付けるとズレなくなりました。

zoomの前の_はIE6用のハック
/にするとIE7以下に効く。

メモ / iframe 高さ取得変更 クロスドメイン

こちらのページをそのまま参考にしてhttp://ja.w3support.net/index.php?db=so&id=153152
iframeで別ドメインにあるページを開いた時に、自動的にheightを調整する方法を試してみた。
(※ 別ドメインにあるファイルにjsを追加する必要あり)

別ドメインのhtmlに手を加えずに出来たら、確実に嬉ションしちゃうけど難しいみたいすなぁ。

続きを読む

base href

base href

baseタグっちゅーのがあって、head内に記述すると
その指定以降の要素に適用される。

みたいに書いておくと下の図のように
http://sakurachiro/を基準とした相対パスになるそうな。
(hrefに絶対パスと相対パスの両方指定出来るような解説をしてるサイトがあったけど絶対パスしか使えないハズ)

[image]base href

ちなみに記述した後の要素に適用されるので

(あれ、リンク貼ってないのにリンクになってる?)

こうゆう順番で書くと
A は普通の相対パス
B はbaseで指定した位置からの相対パスになります(した)。

[image]記述順による違い

自分で使う分にはメリットが思いつかないんだけど
baseタグを外部jsで吐き出すようにしておくと
リンク先のフォルダを簡単に変更出来たりする?

base target

target属性を追加するとそれ以降のリンクが指定した挙動で開くよ。

_blankとかすげぇウザいですけど。

フレームを使ったサイトをいじくる時
target=”_top”を指定する手間が省けていいかも。
しかしこれ
ローカルで確認する時はどうするんだろう?
ローカルサーバー必要?