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

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

今まで、自分の場合は、OSごとにIEのチェックを行っておりました。 というのは、Windows XPで動く、IE6やIE7など、OSによって環境が変わってしまう可能性もあるかと思い、慎重になりすぎていたのかもしれません。 そこで、今回はIE6 と IE7 と IE8 を同じマシンで共存させましょうということで いろいろと調べましたので、公開致します。 他の方はすでに共存させている方もいらっしゃいます。ちゃんと方法も書いてあります。 それをxxxYukihiroxxxなりに解説。 いや、初めてインストールする人向けと言った方がいいかもしれません。 自分も初めていろんなのインストールしましたから。ｗ では、早速。。。 インストールする前に、OSなどのスペックを説明。 IE6 と IE7 と IE8 を同じマシンで共存させるには、Windows XPのみの環境でしかできないみたいです。 つまり、

ちょっと今日はまってしまった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

ブログネタ：ライブドアブログのカスタマイズ に参加中！ 今回もテンプレートを作ったときの副産物でも。 やや旬をすぎたネタですみませんが、IE6では:hover擬似クラスがaタグにしか効かないので代替策を探してみました。 IE6のためだけにJSを設置するのはスマートじゃないしテンプレート共有では警告も出るし、よく知られているcsshover.htcは記述自体がスマートでも別ファイルをどこかにアップロードしなくてはいけないなど、適当なものが見つからないときはこんな感じにすると良いようです。 *html .target-element { behavior: expression( (function(el) { if(typeof(behavior_onMouseEnter) == 'undefined') { behavior_onMouseEnter = function() { this