[Safari]Clearfixで下スペースが出てしまう問題 [css,hack,safari,tips] - BlurBlue-Note
以前、[CSS][コピペ]clearfixでコピペ用に最新版のclearfixを紹介していましたが、今回Safariで問題があることが発覚したので、修正版をPostしておきます。 CSS .hoge:after { display: block; clear: both; height: 0; visibility: hidden; content: "."; line-height: 0; } .hoge { display: inline-table; min-height: 1%; } /* for macIE \*/ * html .hoge { height: 1%; } .hoge { display: block; } /* end of for macIE */ どこが変わったかというと、モダンブラウザ用に書かれている、.hoge:afterの部分に line-height
IEバグ：peek-a-booバグ
WinIEの動作確認をしている時に、時々表示が違うってことありませんか？ ボクはソレが結構発生したりして、原因が分からず悩んだりする事が多々有ります。 IEにバグが多すぎるってばそれまでですが、それにしてもIEはよくハメてくれる… 現在仕事で組んでいるサイトがあるんだけど、ソレも時々表示がおかしくなったりして、納期との戦いだったりする昨今。 そんな中、ふと読んでいたブログにpeek-a-booバグなる記事が書かれていたので、今更ながら「あ！」 と思わされました。 びっくりするくらいタイミングが良かった。 ちょっと発生条件が分かってませんが、WinIEだけ読み込み時にボーダーが出たり消えたり、背景がスクロールしたら消えちゃうとかそういうバグにハマってしまったら、 height:1%; のように、高さを指定して上げる事で解決するそうな。 IEは、高さを固定しても内容物にあわせて自動的に高さもあ
css filters (css hacks) - centricle
Windows Mac OS X Macintosh Other IE Mz Ns Op iC IE Mz Ns Om Op Sf IE Mz Ns Op Ko 7 6 5.5 5 4 1 7 6 4 8 7 6 5 2 5 1 7 6 4 8 7 6 5 2 5 4 1 7 6 4 6 5 3 7 6 5.5 5 4 1 7 6 4 8 7 6 5 2 5 1 7 6 4 8 7 6 5 2 5 4 1 7 6 4 6 5 3 IE Mz Ns Op iC IE Mz Ns Om Op Sf IE Mz Ns Op Ko Windows Mac OS X Macintosh Other voice-family:"\"}\""; voice-family:inherit; property:value;
スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
CSS Step Menu
What is this? 5 step (showing each state of the step menu) Step 1: XXXXXXXXEt nequ a quam turpis duisi Step 2: XXXXXXXXEt nequ a quam turpis duisi Step 3: XXXXXXXXEt nequ a quam turpis duisi Step 4: XXXXXXXXEt nequ a quam turpis duisi Step 5: XXXXXXXX Et nequ a quam turpis duisi Step 1: XXXXXXXXEt nequ a quam turpis duisi Step 2: XXXXXXXXEt nequ a quam turpis duisi Step 3: XXXXXXXXEt nequ a quam t
Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する
文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |
Elements of Design: A Web Design Showcase
Elements of Design is a collection of UI components that highlight best practices for particular design patterns from leading websites around the world. Browse the archives and use it as a source of inspiration for your next web design project. The average shopping cart abandonment rate is slightly under 70%, which translates to billions of dollars in lost sales per year. As a result, an effective
Free Design Templates | Developer's Toolbox | Smashing Magazine
If you are hesitant about choosing the perfect template for your website, then maybe it is high time to stop browsing and order one for yourself. To simplify this process, you should employ a professional RFP template for software development. One of the best things you can do when choosing a theme is to learn about the person or company who made it. If they have a reputation to live up to, then t
Lecture／趣味のWebデザイン
趣味のWebデザイン Lecture Advice Note Info Webサイトの運営と構築について考える。 Renewal "いろは"の先のCSS Strict HTML + CSS によるリニューアル手順を詳細に解説 第1回 第2回 第3回 第4回 第5回 第6回 第7回 第8回 第9回 第10回 実践の記録 Advice334 Advice332 Advice330 Advice329 Advice327 Advice326 Advice325 Advice324 Advice323 Advice321 Advice314 宇治IN茶筒 Design HTML＆CSS ウェブサイト作成入門講座 お勧めの HTML 解説記事 お勧めの CSS 解説記事 CSSを使うわけ CSSの基礎 単位と色 プロパティ一覧 アクセス向上を考える 初級篇 企画篇 計測篇 良質なアクセスは「期待」か
CSSにおけるセレクタの優先順位 - reflux flow
reflux flow > CSSにおけるセレクタの優先順位 CSSにおけるセレクタの優先順位 セレクタの優先順位を決める詳細度の計算方法。 このページの目次はじめにセレクタの種類優先順位の計算方法ブラウザの実装参考文献公開日2006-08-23最終更新日2007-05-21T19:21:52+09:00 はじめに ここではCSS2の仕様を元にセレクタの優先順位を決める詳細度（specificity）の計算方法について説明します。 セレクタの種類 まずは用語の確認（参考: 5 Selectors）。 全称セレクタ すべての要素に適合するセレクタ。「*」と記述する。 IDセレクタ id属性（HTML/XHTMLの場合）に基づくセレクタ。「#ID」と記述する。 クラスセレクタ class属性に基づくセレクタ。「.クラス名」と記述する。属性セレクタを用いた「[class
DOCTYPE スイッチについての検証とまとめと一覧表 - hxxk.jp
DOCTYPE 宣言の種類によって、ブラウザのレンダリングが標準準拠モードになったり後方互換モードになったりすることを DOCTYPE スイッチと言います。 今回は要点だけ手短かに行きたいので詳しくは解説しませんが、 IE 6 だと DOCTYPE 宣言より前になんらかの文字 ( 記述が推奨される XML 宣言であっても ) があれば問答無用で後方互換モードになるバグがあるとか、まあよく聞く話題です。 標準準拠モードと後方互換モードでレンダリングにどんな違いが現れるかは Lucky bag::blog: xml宣言についてや !DOCTYPE スイッチが良いリソースなのでそちらをご覧下さい。 既存の DOCTYPE スイッチ一覧表に "?" ここ数日、この DOCTYPE スイッチについて調べていたのですが、書籍やサイトに書かれている情報と、実際に試してみた結果が少し違うんですよね。 ある
tableを使用しない段組CSSによるマルチカラムデザインについての考察
HTML文書の記述。 <div id="original"> 〜 </div> <div id="critical"> 〜 </div> <div class="status"> 〜 </div> CSSの記述。 div#original { float:left; width:50%; } div#critical { float:left; width:50%; } div.status { clear:left; } http://members.jcom.home.ne.jp/w3c/MediaMix/tntstyle.css float ブロック要素を左に順次floatさせる事で、疑似的に「段組」を表現する。 Navigator 4.x Navigator 4.xでは#fooをfloatさせないとダメ。 float:left;するセレクタをdiv#fooとすると、Navigato
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Ajax/Javascript/Dhtml examples and demos to download
Dynamic Drive CSS Layouts- Tableless, CSS based templates
携帯電話スペック一覧
bkhvalid - BK class
Open Web Design - Download Free Web Design Templates
TUTORIAL BLOG
Stripe Designer for Web 2.0
Stripe Generator - ajax diagonal stripes background designer