RedLine Magazine : リストタグを使用時のIEでの変な隙間を消す
リストタグを使用時のIEでの変な隙間を消す 私的覚え書き。 リストタグを使用してメニューを作ったりする際にIEだけに変な余白が入る事がある。それを解消するネタ。 >>問題のサンプル・こんな感じ。 Firefox等で見るとちゃんとメニューの間が詰まっててＯＫなのだが、IEの場合だと勝手に余白が入る。marginやpaddingを0にしても、liタグを途中改行しても効果なしで、その都度ごまかしてきたりしてたんだけど、とりあえず原因はIEの場合、リスト内のインライン要素をブロック化すると余計な余白を入れるというかline-heightの解釈が正しくないっぽい。 >>対策はこんな感じ。 li { line-height:0; } a { display: block; background-color:#900; padding: 5px; color: black; text-decoratio
IE6 dl,dt,ddの擬似テーブルで3pxのずれを直す方法 - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。 このページの先頭へ戻る
奇数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ということ
When can I use... : Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web ...
IEのタグで隙間ができる - めざし回遊禄
IE6でリストタグを左や右のメニューのように使う時にブロック要素化(display:block;)したり、画像ファイルを使っていると、上下のリスト感に隙間ができるバグがあるようです。 いろいろ調べて、とりあえず解決法があったのでメモ。 【HTMLソース】 1.リストを<a>タグでメニュー化しているとき <ul> <li><a href="〜">メニュー１</a></li> <li><a href="〜">メニュー２</a></li> <li><a href="〜">メニュー３</a></li> </ul> 2.リストを<a>タグ+画像でメニュー化しているとき <ul> <li><a href="〜"><img src="メニュー１の画像" /></a></li> <li><a href="〜"><img src="メニュー２の画像" /></a></li> <li><a href="〜">
CSSでz-indexを指定する時、position: relative;だとIEでうまくいかない: Aman-Style感謝の朝礼スタッフブログ
ちょっと今日はまってしまったCSS。 紙を重ねていくように、 要素を重ねるとき、上か下か、その順番を指定する「z-index」 数が大きいほど、重なりは上になります。 例） #test1 { z-index: 1; } #test2 { z-index: 2; } この場合、「test2」の方が上に表示されます。 さて、これを使って作業していたのですが、 各ブラウザで表示のチェックしてみると、、、、 IE5.5、IE6、IE7で、 上に表示したいものが下に回りこんでしまっている という現象がおこりました。 ざっと他を確認したところ、 Firefox3、IE8、Safari3(Win)では意図した通りに表示されます。 色々触ってみたり、調べてみたりしたところ、 原因は「 position: relative; 」にありました。 簡単に書くと、 html--------------------
MdN Design｜総合情報サイト
デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載！
テーブルを使わずにvertical-align:middle;的な・・・ : ブログ : 株式会社オッシー
オッシーBlog：「ブログのカスタマイズができますよ」ということでブログを作りました。 「ブログのカスタマイズができます」という意味でブログ。内容はあまりないかもしれません。 カテゴリー：(X)HTML and CSS 備忘録 (1) CSSとか書いていて「このパターンあの時作ったけどどうやってやったっけ?？」とか、自分で作っておきながら「作った時はいいけど二度と組めない」とか、そういったことがあるので備忘録です。 文字要素をボックスの上下方向のセンターに配置することってあるじゃないですか？ テーブルならば「vertical-align:middle;」と書きたいところですが、実際表組みではなかったりしてHTMLの構文的にはブロック要素で表現する方がよいことってありますよね。 または、テーブルではなく、定義リストを使いたいときとか・・・。 親要素の高さを算出して、子要素の高さをそれに合わ
掲示板/スタイルシート質問板/Open Error: 1035.dat - TAG index Webサイト
ホームページ制作の情報交換 - 掲示板
Mac版 Internet Explorer 5 の CSS バグと回避方法 日本語訳
以下の文書はウェブ制作者にとって非常に有用な文書でしたが、サイト自体が消滅していたようなのでキャッシュからサルベージしました。 この文書を公開することについては翻訳者さまへメールで連絡をとっていますが、まだご返答を頂いていません。なので、申し出によっては公開を止める可能性もあります。何か問題がありましたら eiji.fukushima@gmail.com までご連絡ください。 また、以下の文書は、ほぼ元のままで手を加えておりません。従ってリンク切れしているものもあります。また、画像はサルベージできませんでした。 公開者 福島英児 公開日 2007-07-31T11:05:00+09:00 この文書について Apple Developer Connection - Working with CSS - CSS Hints for Internet Explorer 5 の日本語訳です。200
IE6で:hover擬似クラスを適用するためのCSS : ずっと工事中
ブログネタ：ライブドアブログのカスタマイズ に参加中！ 今回もテンプレートを作ったときの副産物でも。 やや旬をすぎたネタですみませんが、IE6では:hover擬似クラスがaタグにしか効かないので代替策を探してみました。 IE6のためだけにJSを設置するのはスマートじゃないしテンプレート共有では警告も出るし、よく知られているcsshover.htcは記述自体がスマートでも別ファイルをどこかにアップロードしなくてはいけないなど、適当なものが見つからないときはこんな感じにすると良いようです。 *html .target-element { behavior: expression( (function(el) { if(typeof(behavior_onMouseEnter) == 'undefined') { behavior_onMouseEnter = function() { this
CSS の z-index について整理してみる | HTML + CSS | かたつむりくんのWWW
今日は CSS Nite in Ginza, Vol.31に行ってきます。テーマは「CSSレイアウト：IE 6対応のかんどころ／小林 信次（まぼろし）」ということで、以前「CSS Nite ビギナーズに参加した感想とか要望とか」で書いた「CSS Nite への要望っぽいこと」が実現した感じで、すごく楽しみです。 僕は Web制作の現場にいないので、実務経験が少ないです。ですので、日頃、Web 制作を仕事としてやっている人が、サッと解決できちゃうようなことにもハマったりします。 そういった点を補うには、今日の CSS nite のようなテーマはすごくありがたいです。 さて、前置きが長くなりましたが、今日は以前ひっかかった IE6 の z-index の解釈について、改めて整理してみました。 どんなシーンでハマったか このブログもそうですが、最近ページ上部にグローバルナビゲーションを配置し、そ
CSS を使って IE 6 で PNG の半透明を有効にする | ヨモツネット
概要 IE 6 で img 要素で埋め込んだ PNG ファイルの半透明を有効にする JS はいろいろありますが、CSS でこれを行うための方法です。 利点として、JS で実現した場合、一瞬グレーの部分が表示されてしまいますが、この方法ではそれがありません。 PNG が読み込まれた時点で半透明が有効になっています。 また、CSS のセレクタを用いて、どの img 要素に対して半透明を有効にするかなどを決めることができます。 さらに、onload 後にドキュメントに appendChild や innerHTML などで追加された PNG ファイルについても、半透明が有効になった状態で追加されます。 動作確認用の demo (IE 6 用) 説明 アルファチャンネルを有効にしたい個所に対して以下のようなCSSを適用します。この例では、#sample の中の img 要素となります。(セレクター
IE7で○（丸）や×（バツ）などの記号が小さく表示される事象について
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog IE7（Internet Explorer 7）で発生する、「一部の記号（○□△×など）が小さく表示される」という事象を解決する方法があったので、メモ的にエントリーしておきます。 結論から言ってしまうと、「UTF-8 でフォント指定をしていないサイトを IE7 で表示した場合」に発生する事象のようなので、その条件をクリアしてやれば良いようです。 以下、詳細。 経緯 僕は自宅でも会社でも MacOSX 環境なので、制作したサイトのクロスチェック以外に IE を使うことはほぼありません。 ただ、お客さんの大部分は Windows ユーザーで、IE7 のユーザーもかなり増えてきているようです（自動更新開始から既に数ヶ月経ってますしね）。 そんなわけで IE7 絡みの問い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
worldending.jp
Z座標に苦しむ（正の数・負の数） : ブログ : 株式会社オッシー
expression() > 仕様ノート
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
disply mode - Google ドキュメント
http://www.designwalker.com/2009/03/crossbrowser.html
