CSS
すごく小さな事ですが、iPhoneやiPadなど、Mobile Safari特有の問題の解決策。 ※キャプチャは後ほどアップします。 input type="radio"（ラジオボタン）にCSSでwidthとheightを指定したら、四角っぽいカタチになってしまう たとえば、こんなCSSになっている…
WinIE6で幅（width）指定したリスト要素（ul・ol）のマークが消えるバグと、回避策 - Web & Design Creation notes+++ 上記記事が中途半端だったので、もう少し内容を加えて詳しく書こうと思います。 WinIE6,7,8で、list要素（ul,ol,li）にCSSのwidthプロパ…
ちょこっとメモ。 DD_belatedPNG: Medicine for your IE6/PNG headache!がトラブルが少なかったので使いやすそう。 今ざっと使ってみた感じだと、こんな感じでしょうか。。。。 DD_belatedPNG.fixPng( yourElement ) ←引数のselecterは、透過pngのimgや、透…
要するに、横スクロールがでてしまうくらい横に長いtableの話。 td { width:300px; }と書いても、インラインで直接tdにstyle属性でwidthを指定しても、IE7で無視されてしまった。Transitional でも Strict でも同じ。 解決策は、 http://chaichan.web.infose…
ちょっとハマったのでメモ。 * { border:none; }これだと、IE6、7で、input type="text"の線が消えるので注意。親の背景とinput type="text"の背景が同じ色だとカメレオン状態に。 そりゃそーさ！って事かもしれないけど、selectのborderがそのまんまだった…
〜IE6までは、iframeのborderは iframe { border:none; }とCSSで消せていたと思うんだけど、IE7から、属性に『frameborder="0"』を加えないとボーダーが出てしまうようになったっぽい。 なんとなくいやだなぁ…。もうiframeやめれってことか。 ちなみに、HTML…
※11/13 掲載していた方法が適用されない場合があったため、回避策を修正しました。申し訳ございません。dlのdt・dd 横並びレイアウト - Web & Design Creation notes+++のページビューがこの日記の中では割と高い。 が、今読むと適当すぎる。 なので、何とか…
※最近使ってみた別のプラグインのメモです→スマートな、透過pngをIE6で表示させるライブラリ「DD_belatedPNG」 - Web & Design Creation notes+++ http://blog.l-xs.com/yungsang/2007/04/iepngfix_tips_1_1.html こちらのライブラリは、他のライブラリにも…
何このタイトル、意味不明！ よーするに、↓これをIE6でできるようにしたい時に便利なJavaScriptなのです。 li:hover { color:red; }そのJavaScriptライブラリですが、こちらの「ie6csshover.htc」はとっても使いやすいです。 IE 6 以下で CSS の E:hover, E:…
※こちらに内容を書き加えてまとめました。 とあるコンテンツで、WinのIE6で見るとulのマークが表示されていない箇所発見！ 調べたところバグでした。 ulかolにlist-style-position:inside;を適用するとマークが内側になって回避できます。 が、li要素内の2行…
前にひっかっかたのを忘れてまたもやひっかかってしまう注意点がこれ。 WinIE6で再現。 CSSでwidth、heightを明示したボックスでも、要素の中身が空だと、onmouseover等のイベントが発生しない ただし、CSSでbackground-color or background-imageを正しく明…
ないのか…？標準・互換が特に曲者。後でまとめます。。。。
互換モードの場合、ボックス要素にCSSの height:100%; を適用すれば、 親要素に特に高さの明示がない場合でも 拡大解釈されて、ウインドウ表示領域全体の高さにすることができます。 これで、要素の内容の高さが低くても、 高さをウインドウ表示領域いっぱい…
frame要素に「frameborder="0"」と属性を指定すると、フレームを使ったページの境界線を消せますが、*1 印刷時に全体を囲う線があらわれてしまい、これも消したかったので試行錯誤してみました。 frameset{ border:none; }でOK。 *1:CSSでどうにかしたかった…
JavaScriptで、一定時間ごとに要素をフェードイン・アウトさせて切り替えるサンプルがこちらにありました。 RestlessDev : San Francisco Web Developer 参考リンク script.aculo.us のファイルサイズを軽減する - 2nd life script.aculo.usの読み込みの負荷…
FireFox、Opera、Safariは、センタリングなレイアウトの時、ページの内容量によって横位置が動く罠？があります。 ページ内容の高さが、ブラウザのウインドウの描画領域におさまる 縦スクロールバーが表示されない ブラウザのウインドウの描画領域でセンタリ…
Safariのみに適用されるCSSハックが必要だったので探してみました。 http://easygoing.under.jp/tips/index4.shtml こちらのページにSafari用CSSハックがあります。 /* safari only \*/ html:\66irst-child div.globalContainer{ margin: 0 0 0 18px; } /* e…
リスト要素でメニューを作る時、 背景に画像を使用 リスト間の位置を調整する レイアウトにpositionを使う こんな場合、以下のような感じのソースにするのですが、 これだとWinIE6で最初のリストの子要素の背景画像が消えてしまいます。 最初のリストの子要…
http://sho.tdiary.net/20050922.html#p02 今、仕事で組んでいるhtmlでこんなのやりたかったので、発見できてうれしい！ブラボー！ すごいです、ありがとうございます！ WinXP SP2 + FireFox2.0.0.3 WinXP SP2 + Opera9.10 はOKでした。 WinXP SP2 + IE6.0 …
※ちゃんとまとめはじめました。 →http://d.hatena.ne.jp/kurihhi/20081107 cssでdtとddを横並びにレイアウトするって結構厄介ですね。 floatとclearとmarginでなんとかなると思ったら全然ダメでした。甘いな自分。。。http://3ping.org/2005/08/24/0948 dlの…
…って事で苦戦していたのですが、winIEのバグでした。 http://cssbug.at.infoseek.co.jp/detail/winie/b042.html 幅もしくは高さの明示で回避できますね。 印刷のチェックってあまりしていなかったので初めて出くわしました。 いかんいかん。 しかも、.chm形…
こんなCSSを見かけたのですが、 font: 11px/1.4em Helvetica, Arial, sans-serif;『/』（半角スラッシュ）の意味が分からなくて、調べてみました。 Fonts（W3C 勧告文書） フォント - ばけらの CSSリファレンス Step forward CSS - Section 8 なるほど、font…
worldending.jp - このウェブサイトは販売用です！ - レシピ リソースおよび情報 各ハックが実用的に見やすくまとまっています。CSS Validatorに通るか否かのコメントも有。 緻密で美しいイラストと、coolで見やすいデザインのBlogです。この方のようなクリ…
MacIEのチェックは MacOS9.2 + IE5.1 MacOS10.3.9 + IE5.2 をチェックしていますが、前者で意図しない表示になっちゃうことがありました。色々試してみた所、アンダースコアハックが前者の環境で読み込めちゃっるではありませんか!! サンプル CSS div{ backg…
http://www.html.it/articoli/nifty/index.html 高さ1pxのBoxを重ねて角丸!! Javascriptのライブラリも有 head要素内にライブラリjsファイルを読み込み、5行ぐらい記述 適用するセレクタ、外側の色、内側の色を引数で指定できる 角丸用の要素をhtml内に書き…
