ログをみると、IE7(Beta2)のbackground-attachment:fixedのバグ?へのアクセスが最近頓に増えている。 IE7の普及とともに悩む人が増えているのだろうか。 お察しします^^; 一応、対策をまとめておくことにした。 現象の概要 IE7(Beta2)のbackground-attachment:fixedのバグ?でも述べているとおり、IE7で問題が発生するのは、background-attachment : fixed;を適用しようとした場合に、その要素か親要素に、position : relative;を指定している時である。 この時、IE7はそのrelative指定された要素の上辺を基準に画像を固定してしまう。 また、後続する要素の左paddingが失われて、その分の左marginが増えたような感じに描かれる。 ちなみに、親要素より遡った祖先要素にrelati

リストタグを使用時の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

Mac Safari 2でclearfixのレンダリング結果を画像付きで検証 俗に呼ばれているclearfixと呼ばれる良く出来た技、例えばボックス要素内に2つの要素が分かれていて、内部要素にfloatで左右に浮動させると、外にあるボックスは内部要素を包括できなくて、周囲をborderで囲んだり、背景色を入れたり、margin-bottomなどで下の余白を取ったりとかが出来ないところに有効とされているやり方なんですが、Mac Safari 2でちょっと難ありって感じでした。 下図は以下のソースコードのレンダリング結果です。 〜XHTMLソースコード〜 <dl class="clearfix"> <dt><img src="images/itemphoto.jpg" alt="写真" /></dt> <dd><h2>商品紹介</h2> <p>商品の案内が入ります。商品の案内が入ります。商品の

絶対配置でこんな風にすると <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ということ

This domain may be for sale!

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でいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出

inline-blockとは、displayプロパティの値のひとつで、表示形式を「インラインに流し込むことのできるブロック要素」にするためのもの。まともに対応しているのが、OperaとSafari、それになぜかMac版IEくらいというマイナーな存在だが、なかなか興味深い振る舞いをする値なので、いろいろと検証してみた。 まず、「インラインに流し込むことのできるブロック要素」とはどういうものなのかを見てみるために、.inlineblockというクラスを作り、div要素に指定してみた。また、「インラインに流し込むことのできるブロック要素」とは、言い換えれば、「幅と高さを指定できるインライン要素」ということだから、span要素にも指定した。 インラインブロックの検証 その1 【スタイルシート】 .inlineblock { display: inline-block; width: 100px;

ちょっと今日はまってしまったCSS。 紙を重ねていくように、 要素を重ねるとき、上か下か、その順番を指定する「z-index」 数が大きいほど、重なりは上になります。 例） #test1 { z-index: 1; } #test2 { z-index: 2; } この場合、「test2」の方が上に表示されます。 さて、これを使って作業していたのですが、 各ブラウザで表示のチェックしてみると、、、、 IE5.5、IE6、IE7で、 上に表示したいものが下に回りこんでしまっている という現象がおこりました。 ざっと他を確認したところ、 Firefox3、IE8、Safari3(Win)では意図した通りに表示されます。 色々触ってみたり、調べてみたりしたところ、 原因は「 position: relative; 」にありました。 簡単に書くと、 html--------------------

オッシーBlog：「ブログのカスタマイズができますよ」ということでブログを作りました。 「ブログのカスタマイズができます」という意味でブログ。内容はあまりないかもしれません。 カテゴリー：(X)HTML and CSS 備忘録 (1) CSSとか書いていて「このパターンあの時作ったけどどうやってやったっけ?？」とか、自分で作っておきながら「作った時はいいけど二度と組めない」とか、そういったことがあるので備忘録です。 文字要素をボックスの上下方向のセンターに配置することってあるじゃないですか？ テーブルならば「vertical-align:middle;」と書きたいところですが、実際表組みではなかったりしてHTMLの構文的にはブロック要素で表現する方がよいことってありますよね。 または、テーブルではなく、定義リストを使いたいときとか・・・。 親要素の高さを算出して、子要素の高さをそれに合わ

ホームページ制作の情報交換 - 掲示板

以下の文書はウェブ制作者にとって非常に有用な文書でしたが、サイト自体が消滅していたようなのでキャッシュからサルベージしました。 この文書を公開することについては翻訳者さまへメールで連絡をとっていますが、まだご返答を頂いていません。なので、申し出によっては公開を止める可能性もあります。何か問題がありましたら eiji.fukushima@gmail.com までご連絡ください。 また、以下の文書は、ほぼ元のままで手を加えておりません。従ってリンク切れしているものもあります。また、画像はサルベージできませんでした。 公開者 福島英児 公開日 2007-07-31T11:05:00+09:00 この文書について Apple Developer Connection - Working with CSS - CSS Hints for Internet Explorer 5 の日本語訳です。200