スタイルシート

 IE6でz-indexが効いてくれない

IE6のz-indexが効かないって結構あるな〜。 今回は、効いてほしいブロック?のrelativeを指定しているdivにz-indexを1000とか指定したら、ちゃんと上に乗ってくれた。

 IE6でfloat使うとマージンを2倍とってしまうのを解決する方法

マージンを2倍とってしまうボックス?にdisplay:inline;をつけると解決した。

positionでbottomで指定するとIE6で1px空く。 それを直すのが↓ http://gyauza.egoism.jp/clip/archives/2007/05/bottom-odd-ie6/でも、私は、高さを偶数にしました。(面倒なので)

フォームの縦位置のズレを揃える

input要素にvertical-align:middle;を指定すると縦位置が中央に指定され入力欄とボタンの縦位置が揃う

 flashファイルでz-indexが効かない(IE)

flash表示のコードを書くところに、<param name="wmode" value="transparent" />を追加したら、ちゃんとz-indexどおりに表示してくれるようになった。 追加したのが、赤い部分 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="ht…

YOUTUBEでz-indexを有効にするには

z-indexを有効にするためにembed内に wmode="transparent"を入れるとz-indexが有効になります。

z-indexで、IEだとうまく順番が適応されない

一番もとのブロック要素にposition: relative; とz-index:1;を指定したら、できた!! よかったー!!! 一番もとのdivに指定するのがポイントである。 つまりは、 #menu{z-index:1000;}とかになる。 #menu .navi{z-index:1000;}みたいに、中の中に指定する…

IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。

これ疑問だったけど、解決できた http://blog.btmup.com/xhtml/ie6-final-letter-bug.html#extended

IEで背景画像とコンテンツが1pxずれるのを回避する方法

ハックを使ったら、直った /* IE7でpadding指定 */

IEで背景が表示されない

幅を指定したら、すぐに解決できた。なんでだろ? http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1323617843

フォームの縦位置のズレを揃える

今までフォームとかあんまり使ったことがないからわからなかったが、↓を書けば、解決する。 input { vertical-align: middle; }

CSSのチェック

CSSが間違っていないかチェックできる http://jigsaw.w3.org/css-validator/

半角英数字しか入力できないようにする

#なまえ {ime-mode: disabled;}スタイルシートでこういうことできるんだーと思った。 http://www.tagindex.com/stylesheet/form/ime_mode.html

フロートする要素には幅を宣言しておく必要があります

In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affectedhttp://atstyle.biz/blog/archives/2009/02/23_1258.php

IEで背景画像とコンテンツが1pxずれるのを解決する方法

↓のハックをするのが簡単らしい。 でも、私の場合、2pxにしないと直らなかった(IE7の場合) http://www.meblog.info/41.html

画像の下にすきまができる

↓をスタイルシートで書くと、解消された。 img {vertical-align:bottom;}

CSSハック一覧表

これは便利! http://d-lover.com/css/hack.shtml

画像を改行させない

ul.theme img{display:inline;}

背景画像がずれる時

bodyに背景画像を指定するのはよくない。ずれている時は、bodyに背景指定をやめて、コンテナーとかのidをつくり、そこに背景画像を指定するとうまくいくかも

左に写真で、右に文章という並べ方の時、写真と文章の上の余白が合わなかったが、マージンパディングを0にして、色々と検証したらちゃんと合うようになった。変な時は、マージンやパディングをなしにしてみるといいのかも。

画像に枠線つけて、ロールオーバーで枠線の色変えるってやつ。なかなかできなかったけど、今日できた。 aで指定するといいんだな。前は、a:link, a:visitedで指定していたので、うまくいかなかったのかと思われる。 #artist-main .main-comtents li a{ float…

floatを使った後、clearしないと大抵不都合がでる。 おかしいなーと思ったら、clearしてないとかいうのが多い。 スタイルシートがきかないときは、まず、clearを疑うといいのかも

IE6に:hoverを対応させる.

↓のサイトに詳しく書いてある http://retujyou.com/2007/03/20/csshoverhtc/

#main h1{}この指定を使うとき、 #main h1#coop{}とid指定はできないけど #main h1.coop{}クラス指定はできる でも、 .main-comtents h3#works{ ↑だとちゃんとスタイルシートきいた。きくときもあるんだな。。 何が違うのだろう。。?

floatを使うときは、幅指定をしないとうまくできない。

h1とかを指定するときは、 h1#main{}よりも #main h1{}とかするほうがよい。

スタイルシートでクラスを複数設定する

クラスを複数指定するには、半角スペースで区切って複数書くだけ。 こんな感じ。 <td class="left top">応募資格

テーブルで文字を上に合わせる(デフォルトでは真ん中になっているようです。) スタイルシートで↓を書く vertical-align:top;

テーブルでtd間のスキマをなくす方法

スタイルシートで↓を書く border-collapse:collapse;