html/css

tableに指定したpaddingが効かない原因はborder-collapse: collapse;

tableに指定した背景を少し広げようと思って
paddingを指定したけどうんともすんとも言わない

firebugで確認してもpaddingは指定されてるわ、でも実際には反映されてないわってのが確認できた
最小のソースで試してみたらそっちはちゃんとpadding効いた

さっぱり意味がわからず時間も無かったから
その時は背景色と同じ色のborderで誤魔化した(邪道)けど
落ち着いてよく考えてみたら
問題の起きてるファイルに読み込まれてて
最小の記述に読み込まれてないreset.css内の内容がほぼ犯人としか思えない

そこでtable周りのreset指定を見なおして、とてつもなく怪しい奴がいました
[html]table{border-collapse: collapse;}[/html]

って事で次のように書き換えてみると
[html]table{border-collapse: separate;}[/html]

tableに指定したpaddingが反映されました

[image]tableにmargin

[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>

<style>
body{
padding: 3em;
font-family: sans-serif;
}
table{
width:300px;
margin: 0 auto;
background: #f33;
padding: 2em;
border: 1px solid #000;
border-collapse: collapse;
margin-bottom: 20px;
}
th,td{
background: #fff;
border: 1px solid #000;padding: .5em;
}

.separate{
border-collapse: separate;
}
</style>
</head>
<body>
<table>
<tr>
<td>th th</td>
<td>td td</td>
</tr>
<tr>
<td>th th</td>
<td>td td</td>
</tr>
</table>

<table class="separate">
<tr>
<td>th th</td>
<td>td td</td>
</tr>
<tr>
<td>th th</td>
<td>td td</td>
</tr>
</table>
</body>
</html>[/html]

font-familyの指定を見直す

うちは普段コーディングする時、Firefoxを表示確認用のメインブラウザとしてCoda2を使っています。

先日、htmlで何かのテストをしてる時、久しぶりにfont-familyを指定して
safari(mac)で表示確認したら、指定したfontが全く効いてませんでした。

これが長い長いfont-family探しの旅の始まりでした。。。

続きを読む

html,body{height:100%}でブラウザー表示領域一杯まで広げたブロック要素に、余白やborderを含ませつつ100%におさめる方法

こんな感じのレイアウト

box-sizingでheight100%のブロック要素にラインを引く

tableを使わないと不可能だと思ってたけど普通にできちゃうんだねぇ
サンプル

css3のbox-sizingを使った

box-sizing-CSS3リファレンス
[css]
/*初期値 paddinもborderも含めない*/
box-sizing:content-box;

/*paddingとborderを含める*/
box-sizing:border-box;
[/css]

どっちにしろmarginは含ませる事は出来ないのでレイアウトによってはちょっとした工夫や無駄な要素が必要になるかも。

対応ブラウザ

firefox以外のモダンブラウザーには実装済みで
そのfirefoxもベンダープレフィックスをつければ使える。

ブラウザ 確認したバージョン ベンダープレフィックス
safari 5.1.2 不要
chrome 20.0.1132.52m 不要
firefox 13.0.1 必要(-moz-box-sizing: border-box;)
opera 11.64 不要
IE 9 不要
IE 8 不要

他の手段を使って同じように組む事も出来るのかな?

html5で隙間

sectionとarticleの違いがよく分からないまま
ちょいちょいhtml5でコーディングを始めた
そんなこんなで画像の下に隙間ができる。

firebugを見上がら、なんだっけなーこれって思ってたけど
reset.cssのimgの指定がこうなってた

[css classname=”css-sh”]
img{border:0;}
[/css]

なのでvertical-align:bottom;を追加してみたら隙間が消えた。
[css classname=”css-sh”]
img{border:0;vertical-align:bottom;}
[/css]

昔、vertical-align:bottom;を指定してたと思うのだけれど、
なんで今入ってないんだろう
何か理由があって削除したのかな?

思い出せない