IE6のfirst-letterの謎バグ [css,firefox,IE6,opera,バグ] - BlurBlue-Note
IE6のfirst-letterに関する不可解なCSSバグを発見してしまった…。 ちょっと特殊な複合バグだけど、軽くぐぐっても出てこなかったので、一応ポストしておきます。 first-letterを指定したテキストがhidden状態になるバグ。 以下の条件の時に発生。 ブロック要素内のテキストがインライン要素で囲まれている ブロック要素のIDに対してwidthを指定している ブロック要素のIDに対してfirst-letterを指定している （この場合、タグをセレクターに含めない。#idという指定） xml宣言をしている 以下サンプル HTML <h1 id="siteId" title="BlurBlue-Note"><strong>BlurBlue-Note</strong></h1> この場合、ブロック要素はH1以外のPなどでも同じくバグる。 CSS #siteId { width:
CSSでＩＥ６がクラッシュしてしまう！まさかのＩＥバグ。 ノウハウ [okyuu.com]
プログラミング (668) 開発言語 (518) Java (31) JRuby (1) その他 (30) C,C++ (27) C# (8) JavaScript (102) Perl (33) PHP (65) Python (20) Ruby (187) VB,VB.net (16) XML (2) SQL (6) Lisp (0) shell (9) その他 (12) 開発ツール (51) Eclipse (12) Emacs (6) NetBeans (0) vi (9) VisualStudio (6) その他 (18) アルゴリズム (45) フレームワーク (7) テスト/デバッグ (13) その他 (34) インターネット (313) ブラウザ/クライアントサイド (77) Firefox (36) Ajax (0) Flash (6) AIR (2) Silverlig
IE6 を IE7/8 互換にする Script と XML & DOCTYPE宣言 - 続・教えて！Turing先生
Webデザインみなさん、こんばんは。楽しく HTML 書いてますか？HTML を書くのは楽しいですけど、ブラウザ互換性の検証は面倒くさいですよね。特に IE6 は一体何のつもりかと思いますね。 そんな悩みの多くを解決するスクリプト ie7-js の存在を知ったie7-js とは IE6 の挙動を IE7 互換にしてくれる JavaScript です。 ie7-js - Google Code日本語の解説記事はこちら。今年の頭に話題になっていたようですね。見過ごしてました。IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナルIE6以下をWeb標準に準拠させるライブラリ『IE7.js』[to-R]このスクリプト、大変便利なのですが、一つ使用上の注意があります。html の一行目は必ず DOCTYPE 宣言を書いてください間違っても xml
[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
IEで絶対配置（position:absolute）のボックスが消えるバグの検証
先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。 まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグ こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・ 日本語のリソースを調べてみても解決策
標準の日本語フォント / もうパンツはかない
各環境でどんな日本語フォントが使えるのか、まとめてみました。 それぞれのOSで標準添付されていると思われる日本語フォントをCSSの指定で表示させたものをキャプチャーしました。小さい方の字は16ピクセル、大きい方は 150% とCSS上で指定しています。使用ブラウザは主に各環境の標準ブラウザ(MacはSafari、WindowsはEdge)です。 Mac Windows Linux macOS Sequoia (15) ヒラギノ角ゴシック (ウェイト:W0〜W9の10段階) font-family: "HiraginoSans-W0","Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 100; font-family: "Hiragino Sans","ヒラギノ角ゴシック"; font-weight: 400; font-family: "Hiragino
RoundedCornr: Rounded Corner and Gradient Generator
VIGORJAYA88 SLOT If something goes wrong with your order, you'll get a full refund. Here's what's eligible: Your order doesn't match the item description or photos Your item arrived damaged Your item arrived after the estimated arrival window Your item didn't arrive or was lost in the mail View programme terms
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
[使える CSS テクニック] ブラウザのデフォルトスタイルをリセットする | バシャログ。
現場でバリバリコーディングをしている当ブログの執筆陣が、ちょっと使える CSS のテクニックをご紹介する短期集中連載企画。全 10 回の予定でお送りします。 第 1 回目は「ブラウザのデフォルトスタイルをリセットする」です。 ほんの 1～2 年前までは「*（ユニバーサルセレクタ）」を使って以下のようにブラウザのデフォルトスタイルをリセットするのが主流でした。 * { margin: 0; padding: 0; border: none; list-style-type: none; font-style: normal; font-weight: normal; font-size: 100%; text-align: left; } ただ、全要素のスタイルを無条件でリセットしてしまうと、input 要素や button 要素などフォーム周りの要素の表示にまで影響が及ぶ事から、既にユニバ
![[使える CSS テクニック] ブラウザのデフォルトスタイルをリセットする | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/f04f51f665d4fe314a73e02dd292b1a511f25a26/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
YUI 2: Reset CSS
YUI Reset CSS The foundational YUI Reset CSS file removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions. Note: YUI Base CSS (introduced in version 2.3.0) can compliment Reset by applying a style foundation for common HTML elements that i
ブラウザのデフォルトスタイルをリセットする手段、ユニバーサルセレクタとタイプセレクタの違いは？ | Blog hamashun.com
ブラウザのデフォルトスタイルをリセットする際にユニバーサルセレクタを使用すると、読み込みが遅くなるとか言う話があるんですけど、具体的にどれくらい遅くなるのかという話は聞いた事がありません。 なので、調べてみました。 ソース 使用したソースは以下の2種類です。 なお、2番目のソースはYUIで公開されている物を使用しました。 * { margin: 0; padding: 0; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } それぞれを当サイトのcssファイルに書いて、Firebugでcssファイルの読み込み時間を100回づつ計測しました。 計測したのは、2007年9月2日の夜23時頃、ADSL回
「リセット用CSSを使わない」ことが流行ってる（らしい）理由 | necoze LOG2 [ネコゼログログ]
一定期間更新がないため広告を表示しています
![「リセット用CSSを使わない」ことが流行ってる（らしい）理由 | necoze LOG2 [ネコゼログログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/689b68da1f9a1f54b8977473b4d6d3f53d8d2284/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fimaging.jugem.jp%2Ftemplate%2Fimg%2Fjugem_og-image.png)
ブラウザのスタイルをリセットするスタイルシート集 | コリス
<textarea name="code" class="css" cols="60" rows="5"> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{ margin:0; padding:
見出しがfloating blockの裏に侵食する・floating blockに後続する要素の左右margin,padding | Takazudo Clipping*
画像が左に回り込んだとき、次にくる見出しの左paddingが効いていない。 floatした要素に後続する要素の左右margin,paddingは無視される？CSS2.1の仕様書に何か書いてあるかと思ったけれど、ズバリな箇所が見つけられなかった。でもこんな例がありました。 「浮動する画像は、重なるブロックボックスの境界を不明確にする」！ よくわからないのでFirefox3で実験。以下は、div.imageをfloat:leftし、その後に、いろんなdisplayプロパティをもった要素を並べてみた結果です。各ブロックには、pading,margin,bordrerを指定しています。※これらは、すべてのdisplayプロパティに対応しているブラウザでしか、正確に描画されません。 Floatと後続要素margin,padding検証(HTML) そのCSS(CSS) Firefox3での表示(GI
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/926613b1f7bf3db5a7cb6f8141c603e41d3c2275/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
サクラエディタ用 CSSキーワード定義ファイル Rev1.00
変更箇所 (Rev0.92 -> 1.00) 抜けていたプロパティの値を追加 キーワードヘルプ辞書が新たに添付 W3C勧告候補であるCSS2.1のプロパティの簡易ヘルプ W3C勧告であるCSS2のプロパティの簡易ヘルプ ダウンロード こちらから 配布再開 2008/01/23 ファイルをサルベージできましたので配布を再開します。ご迷惑をおかけしました。 css2kwd100.zip 関連記事 その他詳細(ライセンス等)は以下の記事をご覧下さい。 サクラエディタ用 CSSキーワード定義ファイル Rev0.80 サクラエディタ用 CSSキーワード定義ファイル Rev0.90 サクラエディタ用 CSSキーワード定義ファイル Rev0.91 サクラエディタ用 CSSキーワードファイル 更新中 サクラエディタ用 CSSキーワード定義ファイル Rev0.92 コメント 当初の目標であったキーワードヘル
【ハウツー】FirebugにHTML/CSSリファレンスをアドオン! - FireScope (1) あのプロパティの使い方なんだっけ? これからはFireScopeで一発! | エンタープライズ | マイコミジャーナル
あのプロパティの使い方なんだっけ? これからはFireScopeで一発! SitePoint.comは1月27日(米国時間)、Firebug上で動作するアドオン「FireScope v1.0.1」をリリースした。FireScopeはFirefox2-3のFirebug1.2以降で動作するアドオン。各種HTMLエレメントやCSSプロパティといった要素のリファレンスと各種ブラウザの対応状況、サンプルコードを表示してくれるアドオンだ。SitePointが公開している各種HTML, CSSリファレンスの一部をまとめた内容となっている。 主な機能は次のとおり。 HTML Elements Reference HTML Attributes Reference CSS Properties Reference サンプルコード リファレンス内検索 W3C勧告に準拠しているかどうか 各種ブラウザ対応状況(
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ADP: floatレイアウトでつまづかないためのTips
[CSS]上級者向け、スタイルシートのテクニック集
印刷用CSSの書き方（基本編）：ADP