IE7のCSSバグ（border付きbox内のfloatでmarginが効かない） [css,IE7,バグ] - BlurBlue-Note
今日ちょっとひっかかったIE7のCSSバグをメモしておきます。 どうやらborder付きのbox内に2重に入れ子にしたfloatさせたboxの親要素（ややこしい！）のmarginが効かなくなるようです。 口で言い表しづらいので、以下のソースを見てください。 XHTML <div id="page"> <div id="content"> <ul> <li id="hoge">hoge</li> <li id="huga">huga</li> </ul> </div> </div> こうなっている時、#contentにborderが設定されると、UL要素のmarginが効かなくなります。 CSSサンプルは以下の通り。 CSS * { list-style: none; margin: 0; padding: 0; line-height: 1; } div#page { width: 350
colspan使用時のテーブル列幅指定について
こんにちは。島津です。 今回は、テーブルの列の幅指定に関する話題です。 表組みを使う時、内容やデザインにしたがって 列の幅サイズを指定することはよくあると思いますが、 colspanによるセル結合と組み合わせて使った場合に 実はちょっとした落とし穴があります。 とりあえずサンプルをご覧下さい。 ▼スクリーンショット ※上がWindows Firefox3、下がWindows Internet Explorer7です。 （htmlコーディング） <table> <tr> <th class="col01">商品No．</th> <th class="col02">商品名</th> <th class="col03">価格</th> <th class="col04">概要</th> </tr> <tr> <td class="col01">01</td> <td class="col02">
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
【CSS】CSSレイアウト時のIE6対策まとめ | バシャログ。
Adobe の CS5 はなんか凄そうですね。「でもお高いんでしょ？」「ハイ、とても！」 いま会社で使っているアプリは「Macromedia」の Dreamweaver8 と Fireworks8 です。結構バリバリ制作作業していますが、別に不便に感じてないしなー、と思っている sakai です。自宅では Dreamweaver4 と Fireworks4 です。エヘン。 世間では HTML5 や CSS3 の話題も増えてきた今日この頃ですが、実務では相変わらず IE6 との格闘が続いています。 ただ、長年さんざん IE6 対策に取り組んできたこともあり、今ではそれほど IE6 を意識してコーディングすることもなくなりました。 今回は IE6 をターゲットに含めた CSS レイアウトで気をつけたい点をまとめました。 基本ですが、おさらいまで。 大前提 大前提として、IE6 は標準準拠モード
IE6対応・cssのみでマウスオーバー時に噴出しも実装するナビゲーションKntL-Pager
JSや画像を使わず、cssとHTMLオンリー でマウスオーバー時に噴出し状のツール チップの実装が可能なナビゲーション KntL Pagerをご紹介します。これは結構 便利そう。ありがたい事にIE6にも対応、 cssも無料でダウンロードも可能です。 jsや画像を使用せず以下のようなページネーションを実装可能です。 KntL Pager うーん、凄い。これでcssオンリーとは驚きでした。一応ページネーション（ページ送り）のcssとして紹介されていますが、普通にユーザビリティを意識したナビゲーションとして使えそうですね。 対応ブラウザはIE6以上、Firefox1以上、chrome、opera、safariに対応との事。日本語に直してHTMLをアップしてみましたので[sexy-lightbox href=’http://kachibito.net/wp-content/uploads/2010
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Firefox 3.5 の display: table;(table-row; table-cell;) 関連の挙動について
※この記事は古いバージョンの Firefox について書いた内容です。最新バージョンでは正常に動作しています。 Firefox 3.5 の CSS のレンダリングには仕様なのかバグなのかよくわからない挙動が起きることがあります。 というか恐らくバグなのですが、簡単にいえば、CSSで display: table-cell; を指定してマルチカラムレイアウトを行っている場合に Firefox 3.5 だとまれにカラム落ちしてしまうという現象が起きてしまいます。 現象 まず以下のサンプルを見ていただきたいと思います。 新しいウィンドウで開く Firefox 3.5 で見たときどのように表示されていたでしょうか？ ソースは以下のようになっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.or
[CSS]ハック無しでIE6でmax-widthを実現するスタイルシート
CSS HackもJavaScriptもIEの条件付きコメントも無しで、IE6でmax-widthを実現するスタイルシートをCSSplayから紹介します。 'max-width' for Internet Explorer IE6 demo: center 実装のポイントとなるのは左右に配置されたdiv要素で、それぞれマイナスマージンを指定します。 コンテンツを配置するdiv要素には「overflow:hidden;」を指定します。 デモでは上記のmax-widthのコンテンツをセンターに配置したものと左右に配置したものがあります。 'max-width' centered 'max-width' left 'max-width' right
IE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
jmblog.jp - Win/IEで絶対配置（position: absolute）のボックスが消えるバグの検証ページ
http://jmblog.jp/archives/180より。 Bruno Fassino氏のIE/Win: Disappearing position:absolute boxes near to floats and clears のテストを元にしています。 日本語 | English 概要 Win/IEでは、以下の場合に絶対配置（position: absolute）にしたボックスがレンダリングされないことがある。 position:absolute が float と hasLayout をもつ clear の直前に存在する場合。（Test1） 解決方法 : #1, #2, #3, #4, #5 position:absolute が float と hasLayout をもつ clear との間に存在する場合。（Test2） 解決方法 : #1, #2, #3
position:absoluteにしたときにIEで位置がずれることの対応 - まんぞうブログ
jqueryプラグインgalleriaをホームページに使ってみようと、サンプルからちょろちょろ修正してた。Firefoxで動作確認とかして最後にIEでチェックすると表示がおかしいぞと気づく。position:absoluteにしているのに位置がおかしい。 IEのバグらしい。 to-R『floatした際に背景が消える件(IE編)』（参照） IEに対して対応するには以下のような方法があります。 width:100%を指定する 親要素に対してwidth:100%を指定することにより、IEの『幅や高さを指定した要素ではボックスサイズの算出時にフロートを除外しない』というバグを発生させることができます。 親要素にwidth:100%を指定したら、ちゃんと表示された。
IEのhasLayoutをtrueにした時に起こる不具合を回避する | バシャログ。 - WEB制作
以前のエントリー：IEのhasLayoutをtrueにした時に起こる不具合の続きです。 前回は IE の様々な CSS のバグは hasLayout という IE 独自プロパティを true にすることで回避ができるものの、今度は hasLayout が true の時にのみ起こる別のバグが発生してしまう、というエントリーでした。 今回は hasLayout の値を true にした要素を false に戻す方法をご紹介します。 * { zoom: 1; } 上記のようにユニバーサルセレクタに「zoom:1」を指定すると、全ての要素の hasLayout プロパティが true になります。 これにより IE の CSS バグがかなり解消されますが、ul や ol のリストマークが消えてしまうなど別の不具合が起こります。 この不具合を回避するために、以下の記述で ul, ol, li それ
Heavymetalcafe | Notebook: アンカーを:hover状態にすると親ブロックの高さ/マージンが変化するバグ
私はCSSコーディング中にIEでプレビューすると、a:hoverで上下マージン(margin,padding)が変わることがよくある。 これには以下のような条件があるようだ。 条件1: 3重以上の入れ子ブロックになっている。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 最も内側のブロックに任意の上下マージンを設定している。 内側から2番目のブロックに背景とボーダーを設定している。 内側から3番目のブロックに任意の幅を設定している。 条件2: 3重以上の入れ子ブロックになっており、最も内側のブロックが複数存在する。 一番内側のブロックに含まれたa要素に:hover疑似クラスで背景を設定している。 内側から2番目のブロックに任意の上下マージンを設定している。内側から2番目のブロックまたはそれより内側にある要素に背景を設定している。内側から3番目のブロッ
RedLine Magazine : IE6 → 透過PNG+overflow=混ぜるな危険（追記有）
IE6 → 透過PNG+overflow=混ぜるな危険（追記有） >>081205：追記 解決しました (追記:081205)はてブのコメント見たらこの下記の症状が出ない方もいらっしゃるみたい。私が検証に使ってるIE6はIETesterのものと「IE6 standalone の落とし穴」っていう記事で書いた透過も使えるこっちのスタンドアローン版IE6なんだけど、もしかしてもしかして正規版では正常に動作してるとか？？コメント書いてくださった方が正規版IE6なのかどうかは分からないけれども、一応その件も補足しとこかなということで追記。 やりたかった事 親ボックスには大きめの写真を入れたい。 その親ボックスの写真は背景じゃなく、諸事情でimgタグで入れること。 その中にまたボックスを作って背景に透過PNG画像を使用してテキスト本文入れたい。親ボックスの写真が透ける感じで。 そのテキスト本文部分は
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
めも - IT戦記
このメモについて id:amachang の私的な学習目的 IE6 の標準モードに関するバグ いろいろとポイント layout IE6 の視覚整形モデルの中で要素は、大きく分けて layout を持つ要素と、 layout を持たない要素に分けることができる。 layout を持つ要素とは、自分のサイズや位置に責任を持つ要素である。 layout を持つ要素は、四角形の領域を作る。 layout を持たない要素は、直近の layout を持つ要素のサイズおよび位置と、そこの間にあるすべての要素の margin, padding, border によってその開始点、折り返し点が決まる。 layout を持たない要素は、四角形の領域を作らない。上下左右の間隔を保持しているだけに過ぎない。 layout を持たない要素間の上下マージン（相殺されるマージン）は二つの要素間の共有のもので、ある要素特
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[ CSS ] IE で垂直マージンが相殺できないバグ![[ CSS ] IE で垂直マージンが相殺できないバグ](https://cdn-ak-scissors.b.st-hatena.com/image/square/1a05d2bf64bd9f5604fd6bd8288b6381789ec693/height=288;version=1;width=512/https%3A%2F%2Fbowz.info%2Fwp-content%2Fuploads%2F2015%2F10%2Fie-vertical-margin-bug-ie.png)
http://tetlist.info/2009/02/positionrelative_border_intern
http://hpbuilder.net/weblog/2007/08/06203819.html