タグ

2007年10月31日のブックマーク (6件)

  • ポップアップブロックされる基準 | Takazudo Clipping*

    今日はじめて知ったんだけれど、IE6+XP SP2以上でポップアップブロックされ無いためには、onmouseup か onclickをwindow.openのトリガーとして指定しないとだめらしい。何でいまさらそんなこと言うのかと言うと、このページで、ポップアップブロックされてしまったから。 上記ページは、onclickでやってるのになんでポップアップされてるわけ?と思ってソース見てみたら、onclickではなくて、onmousedownで指定してた。 以下のMSDNの人のブログによると、 jeff's WebLog : mouseDown + mouseUp = click ユーザーが認識しない動作で開かれるポップアップはダメであると。ユーザーがクリックしたと認識するのは、マウスをクリックし、離した時である。よって、onmousedownは、まだクリックしている途中なのでダメなので、onl

  • 奇数bottomバグ - IE6 | Takazudo Clipping*

    絶対配置でこんな風にすると <div class="Container"> <div class="InsideBox">x</div> </div> .Container{ width:200px; height:101px; background:blue; position:relative; } .InsideBox{ width:30px; height:30px; background:yellow; position:absolute; left:0; bottom:0; } 絶対配置で下付けボックスサンプル IE6ではこんな感じになってしまいます。 何故か下に1px空いてしまうのです。どーやらIE6は、絶対配置をしてbottomを指定すると、親ボックスの高さが奇数の時、1pxあいてしまうという現象があるっぽいです。この場合は、div.Containerが101pxということ

  • ブラウザバグ回避用CSSセットアップ / IEバグ対処フロー | Takazudo Clipping*

    暇だからCSSのセットアップでも載せとく。 CSSレイアウトで問題になるのは、ブラウザごとにバグがあって、それに対応するのにどうするかっていうのが一番困る。でも、ブラウザごとにっていっても、実際に問題があるのは、ネスケ4とかIE4とかMacIEとの当に古いブラウザと、バグの多いけどまだちょっと使っている人がいるIE5、IE5.5、まだまだこれからも高いシェアを続けていくIE6と、かなりましになったけどまだちょっと問題のあるIE7を、なんとかすればいい。逆に言えば、これら以外のブラウザには、フツーに何の仕掛けもなしに、きちんと表示される必要がある。FirefoxとかOperaは、かなりきちんと表示してくれるから。 要するに問題なのはIEばっかりなんだけれど、FirefoxやOperaできちんと表示されていれば、IEでボロボロになってても、大して心配はない。一定の流れでバグ回避をしていけば

  • (X)HTML関連リンク | Takazudo Clipping*

    (X)HTML関連リンク集。ちょこちょこ更新。 仕様書やガイドラインやマニュアル等 XHTML1.0仕様 XHTML1.0の仕様書(W3C) CSS2.0仕様 CSS2.0の仕様書(W3C) Web Content Accessibility Guidelines 1.0 ウェブコンテンツアクセシビリティガイドライン1.0(W3C) 富士通ウェブ・アクセシビリティ指針 富士通のウェブ・アクセシビリティ指針 jQuery JavascriptフレームワークjQueryのマニュアル Movable Type 3.3 マニュアル Movable Type3.3のマニュアル CSS Hack関連 Position Is Everything ブラウザのCSSバグに対処する方法など CSSバグリスト@CSSバグ辞典スレッド 2ちゃんねるに集められたブラウザのCSSバグと、その対処法 CSS Filt

  • db.SyntaxHighlighter - コードハイライトJavascript | Takazudo Clipping*

    HTMLCSSPHPなどは、Webサイトにのっけようとすると、<body>であれば、<body>などと実態参照にしないとダメですが、これらを、そのまソースを貼り付けるだけで見えるようにしてくれるJavascriptライブラリ。 ついでにコードもカラーリングしてくれる。textareaにソースを入れるため、そのまま表示してくれるという仕組みなので、文法上はパースが滅茶苦茶になり、ダメダメだけど、とても便利。使うと、以下のようになります。 <![CDATA[ this is some CDATA content tags inside cdata ]]> いろんな言語に対応。注意点としては、onload時にカラーリングを行っており、これが結構重たい。1ページの中で沢山使いすぎると、ページロードが重くなりすぎてしまうので注意しないとだめかも。ダウンロードはこちら。 dp.SyntaxHig

  • 幅可変な画像ブロックをtable無しで作る | Takazudo Clipping*

    画像を右に配置して、左側にはテキストなり何なりを入れたりといったものを作る事が仕事上、よくあります。左画像、右テキストもしかり。仕事ごとに必ずこれは作る。さらに、この画像にはいろんなものが入るため、幅は常に変わる。 これを、divだけで作ることがなんとかできました。 こーいうものを作ろうとする時、CSSでやろうとすると、左右のブロックをfloat:right, leftとかやって配置しますが、これはあまり汎用性のある方法とはいえません。なんでかというと理由は3つ。 1つ目は、imgをfloatさせると、テキストがその下に回りこんでしまうというのが1点。回り込ませたいならいいですが、テキストを回り込ませないでやりたい場合が殆どなので。 2つ目は、回り込ませないでやるとしたら、左右のfloatさせたdivにwidthを指定しなければなりません。そうすると、例えば、画像の幅が200pxであれば、