Macの場合、Mca側が用意しているテスト領域がありますが、ちょっと準備がめんどくさそう・・と言うことでXAMPP for Mac OS X
Mac FireFox3も背景がずれる・・・。
CSSでbodyに設定した背景画像がIEでずれる怪・Safari3も背景がずれる・・。で、IEとSafariの困ったバグの話をしましたが、今回はFireFoxです。それもMac限定。orz….。
MacFireFox3もFireFox2とは違い背景ずれます。
なおWindows FireFox3ではこのバグはない模様。
ひょんなんことからMacFireFoxをアップデートする前に上げたサイトをのぞいてみると・・・なんか、右にずれてる。
そのサイトもIE7とSafari用に背景を左に1pxハックしているため、それが原因かな？と思ったため、ハックを外してみても表示は変わらず。
もしや(￣▽￣;
あわてて検索してみる。
今更ながらFavicon
あけましておめでとうございます。
本年もよろしくお願いいたします。
さて、最近のブラウザでは表示されるのが普通になってきたので、うちのサイトもそろそろ表示させようかと思ってます。
作り方は色々あれど、手軽に作れるのが一番です。
そんな時お手軽にFaviconを作れるのがコレ。
サイト内でギャラリーを作るとき。
サイトを構築する際、写真ギャラリーページを制作する場合がある。
JavascriptやFlashでこんな素晴らしいギャラリーページができる・・という実例が、なんと33個も紹介されている。
33 Most Beautiful Javascript and Flash Galleries
・・これはすごい。
IE6で文字が二重表示される怪。〜次から次へとIEめ。
はあはあ・・・
今日はバグつぶしの日ですか・・。(￣▽￣;
さて。
IE6の場合。コメントが二重に表示されることがあります。
——————–
リンゴあります。
——————–
で終わっている文章があるとする。
なのに、IE6様で見ると、
——————–
リンゴあります。
あります。
——————–
・・・「あります。あります。」って・・。(￣▽￣;
本当は「リンゴあります。」で文章は終わっている。なのにIE6で見ると「あります。」が次の行にも表示されている。HTMLを確認しても、ケアレスミスではなさそうだ。
ではなぜ？
Safari3も背景がずれる・・。
以前「 CSSでbodyに設定した背景画像がIEでずれる怪」と言うアイテムをエントリーしていたが、それの後日談。
safariでも背景がずれる。
・・・最低である。safariもずれるとは。
原因はIEと同じで、「ブラウザウインドウの幅-bodyに指定された背景幅=奇数サイズ」になった時にずれるらしい。1pxずつブラウザ枠を動かすとずれたりずれなかったりするので間違いないだろう。
今回構築中のサイトで現象を発見し、その他IE6のカラム落ちを含め煮詰まること約半日・・やはりハックを使わねばならないようだ。
今のところsafari2での確認をしていないため不明だが、safari3でのずれを解消するため、ハックを使うことにした。
シンプルなコードでロールオーバーを実現する。
先日、担当デザイナーの不在中、とあるサイトの修正を急遽行う事になったため、どうしたことか私におはちが回ってきた。
今回は「急遽」のため、担当デザイナーのクセに合わせた修正を行った。ファイルの命名方法とか、データーの置き場所はわかりやすく・・とか。
その作業中に奇妙なことに気がついた。
ロールオーバーがすごくシンプルなのである。
ごく一般的に使われている手法ではない。
そういうわけで、ちょっと検索してみると・・結構あるんですね。シンプルなやり方。
WEBページをA4印刷するには
仕事上よくあるのですが、地図や間取りなどを印刷するように設定したいことがあります。
大半のブラウザは、横幅がA4サイズ以上になると勝手にリサイズして収めてくれる場合が多い・・が、IEの場合そのままではリサイズしてくれないらしい。
ここでもIEのダメさ加減発揮。
ユーザー側のプリンター設定にもよりますが、この設定を変更することによってA4サイズに納まることもあります・・が、いちいちプリンターの設定云々とト書き書くのも、不親切きわまりない。
たとえダメダメを発揮していようとも、ユーザー率が一番高いのはIE。
このブラウザであまりよろしくない結果が出た場合、やはり手直しは必要。
全部組み終わってから直すのは結構泣けてくるので、あらかじめ印刷させるページと分かっている時は、下記に留意して組んでいく。
標準モードのCSSで高さ100%のボックスを可能にする方法。
サイト制作の際、ボックスを高さを100%にしてブラウザの下端へ合わせたい事がある。
Copyright表記なんかは特にそうしたいが、標準モードでCSS制御をする場合、ボックスの高さを100%に指定してもうまくいかない。
標準モードの場合、ボックスの高さは中に入る文章量などに依存する。
そのため、手っ取り早く高さを100%にしたい場合は、互換モードを使用すればいい。
しかし、だ。
仕事でサイト制作を行うと、きっちりレギュレーションが決まっている場合がある。
そしてその場合「標準モードにせよ」と言う規約があることが多い。
互換モード自体はあまり推奨されるものではないので、できれば標準モードでサイトを制作したいところ。
でも、ボックスの高さは100%にしたい。
そんなジレンマを抱えた場合は、CSSの記述を下記のようにすればいい。
CSSでbodyに設定した背景画像がIEでずれる怪
またしてもIE。おのれIE。
バグ多すぎだよ、アナタ(￣▽￣;
CSSでbodyに背景画像を中央揃えで設定すると、IEでは左に1pxずれます。
safariやFirefoxではずれないので、またしてもIEお得意の「バグ」です。
IEを優先して調整したりすると、正しく描画しているsafari&Firefoxがずれます・・ダメすぎるよIE。
1pxぐらいのずれだと、そんなに気づかないことが多いんですが、たとえば
- W800pxの背景の左右に1pxのボーダーを引く。
上から下までボーダーを伸ばしたいので、CSSでbodyの背景画像として敷き詰めて、位置は中央揃えにする(背景画像はボーダーを入れるのでW802px）。 - その上にW800pxのコンテンツを配置する。そうすると、コンテンツの左右には1pxづつボーダーが見える。
・・ハズなんですよ。正しく描写してれば。
でも、IEは正しく描写しない。
左右にあるはずのボーダーのどちらかが消えてしまう。つまり、他のブラウザに比べて「中央揃え」が1pxずれてるのだ。