赤い線の上下のアキを均等にしたい。

　ディバイダーとして使用している画像に”divider”というクラス名をつけて、cssで以下のように指定すると、Firefox、IE8、Safariでは上記の赤い線のように、上下のアキが均等になります。

img.divider{
width: 171px;
height: 2px;
padding: 0 10px;
}

でもIE7では、こんなカンジになっちゃうの…。

デバイダー画像の上のアキがスゴイ…

　前回のようにCSS部分にmargin:0を追加してもダメで、ソレはimgがインライン要素だからというのは理解できるのですが、インライン要素でline-heightが関係しているなら、別でちゃんと指定してるんだよね〜。しかもline-heightをいじっても、状況は変わらないし…。いずれにしてもIEではオカシナ状況になってしまうので、今回もimgにクラスを直接割り当てるのではなく、divタグで囲ってソレにスタイルを指定しました。解決です！

赤字部分の上下のアキを均等にしたい

　このようにタイトルがあって、写真が入り、右側には写真の人物の情報、フロートをクリアして「See all message fromホニャララ」があるわけです。赤字部分（ホントは赤字じゃないけど、分かりやすくするため）の上下のアキを均等にしたいのですね。写真から罫線までのコードはこんな感じにしました…

<div class="individuals">
	<div class="repName">
		<img src="img/picture.jpg">
		<p><span>Firstname Surname</span><br>Executive Editor<br>Company</p>
	</div>
	<p class="allDetails"><a href="#">&gt;&gt; See all messages form XXXXX</a></p>
</div>

.individuals{
width: 360px;
margin-top: 15px;
margin-bottom: 10px;
border-bottom: 1px dotted #ccc;
}
 
.repName{
width: 220px;
}
 
.repName img{
width: 60px;
height: 60px;
float: left;
margin-right: 10px;
}
 
.repName span{
font-weight: bold;
}
 
.repName p{
width: 100px;
margin-top: 0;
margin-bottom: 0;
float: left;
}
 
p.allDetails{
clear: both;
padding-top: 15px;
padding-bottom: 15px;
}

　実際にはもっと他にもフロートしている部分があるのですが、上記のコードでも同じ症状がでることを確認しました。ブラウザ間でどのようになるかというと、こんなカンジ。

Internet Exproper 7

IE8,Fairefos, Safari

「See all message fromホニャララ」の上下のアキ具合が、IE7とその他のブラウザでは異なっています。なんだよ〜よく分からないよ〜。でも一番はじめに見ていただいた【A】の画像のように、どのブラウザでも上下幅が均等ではありません。クラス名individualsに付けたマージンがあやしいので、「See all message fromホニャララ」を装飾しているクラス名p.allDetailsにmargin: 0;を追加してやると、どちらも見事に理想型【A】のようになります。

　実はその時は、p.allDetailsにmargin: 0;を追加したんじゃなくて、htmlを

<div class="allDetails"><a href="#">&gt;&gt; See all messages form XXXXX</a></div>

へ変更したのです。そうすると、p.allDetailsの時に追加したmargin: 0;がなくても、理想型【A】になるの…。ふ〜ん。

　さて、サイドバーにカレンダー・ウィジェットを追加したのですが、
このテーマにはカレンダーのスタイル指定がされていないらしく、こんな結果に…

Calendar with no style setting

　やっとスタイルシートに書き込めますわ。次の行を追加してみました！

#wp-calendar {width: 182px;}
#wp-calendar th, #wp-calendar td{
width: 24px;
margin-right: 2px;
text-align: center;
}
#wp-calendar a:link{color: #069DD5;}

ちょっとは良くなったでしょ？