S-Bot

Entry

ちょっと役立つCSS2

DATE:05-11-24 Category:Web

はてなブックマークに追加 del.icio.us に追加 livedoorクリップに追加 Yahoo!ブックマークに登録


前回書いたちょっと役立つCSSの第二弾です。
今回は、困った時系で。

は?画像の間に隙間できるんだけど、ネスケ

これは仕様です。どうやら、画像はインライン要素なんでベースラインに揃えて表示しちゃうみたいです。ネスケは。
こんな時は、img要素にdisplay:block;を指定してやれば問題ありません。

img {
border: none;
}

img.b{
display:block;
}

こんな記述をはじめから入れといてます。マージンを取られて困るような画像には、class="b"を指定します。

Win IEってフロートさせた時のマージン変じゃない??

これは、たぶんバグ。WinIEを使ってる人はFirefoxとかが変なんじゃないかと思ってるかもしれません。
このせいで、左右に分けた領域がWinIEだけ、下に落ちちゃうって現象が出たりします。どうやらフロートさせるとマージンが指定より多めに取られちゃうみたいです。前までめちゃくちゃ悩みましたが、速攻で解決できました。

box{ float:left;
display:inline;
margin:0 20px;
}

box2{
float:right;
display:inline;
margin:0 10px;
}

こんな感じで、display:inline;を入れるだけで解決します。
フロートしてる要素がインラインになってもあまり意味がないので、正しいブラウザでも今後問題になる事はないと思います。

指定した記述が効いてない!

いろいろ原因はありますが、その記述より先に優先度の高い記述がある恐れがあります。
特定の記述を優先させたいときは、

margin: 0 ! important;

! importantを入れると優先度が上がります。

今回はこんな感じで。。またやるかもしれません。

Comment 0

コメントする(アルファベットのみのコメントは投稿できません。)

trackback

このブログ記事に対するトラックバックURL:
http://s-bot.net/MT/mt-tb.cgi/87

twitter

twitter


▲PageTop