スタイルシートでのレイアウトの際に、border枠から文字がはみ出てしまう問題について

質問

まず、ソースです。
[html]
<ul id="greeting">
<li id="entrancephoto">
　写真
</li><!-- entrancephoto -->
<li id="word">
　言葉
</li><!-- word -->
<li id="news">
　ニュース
</li><!-- news -->
</ul><!-- greeting -->
[css]
ul#greeting{
clear:both;
display:block;
width:570px;
border-color:#D6757E;
border-width:1px;
border-style:solid;
padding:20px 0px 20px 0px;
list-style:none;
}
li#entrancephoto{
float:left;
width:210px;
vertical-align:middle;
padding:0px 20px 0px 20px;
}
li#word{
float:left;
width:320px;
}
li#news{
clear:both;
float:left;
width:530px;
padding:5px 0px 0px 20px;
margin:auto;
}
--ここまで--

このように、一番外をid:greetingで囲み、
borderを設定しています。
そしてその中に、3つの要素を<li>で書いています。
（上に段組2段、下に1段）
ですので、borderで全ての要素を囲みたいのですが、
id:greetingで囲んでいるはずが下の3つの要素を
囲むことは無く、高さ40pxの枠（padding分）に
なってしまい、文字量に関係無い設定になってしまいます。
（IEでは、文字量に合わせてheightが変わるのですが、　firefox、nsではできません）

いろいろ試してみたつもりですが解決できませんでした。
お分かりになる方、何卒よろしくお願いします。

回答No.3

ao_ · ベストアンサー

inline-tableはMacIEのためのもので、WinIEの値はホリーハック内にあるblockです。
WinIEの場合、高さを指定すれば解決します。それはWinIEのバグで、内容物によってheightを無視して表示するからです。しかしMacIEにはこういったバグはなく、heightを忠実に再現します。
詳しくは参考URLを参照ください。

参考URL：

http://www.positioniseverything.net/easyclearing.html

お礼

ご返信ありがとうございます。

基本的に理解することができました。
教えて頂いたページにて、勉強させて頂こうと
思います。

回答No.2

ao_

htmlに手を加えず、CSSだけで解決する方法です。

#greeting:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}

#greeting{
display: inline-table;}

/* Hides from IE-mac ?*/
* html #greeting {height: 1%;}
#greeting {display: block;}
/* End hide from IE-mac */

これをul#greetingのCSSの下に書き足せば解決します。
フロートした要素（li）の親要素（ul）はフロートした要素の高さを無視してしまいます。解決するには親要素の一番下にブロック要素を追加し、そのブロック要素にclearを指定します。ただそのためだけに空のブロック要素を追加するのは好ましくないので上記の方法をおすすめします。

補足

とてもとても勉強になりました。
非常にコンパクトで簡潔な説明ありがとうございました。
afterの使い道をいまいち理解できていなかったのですが、
このような使い方があることが理解できました。

ただ、理解できないところは、
#greetingのdisplay要素は、なぜblockではなく、
inline-tableになるのだろう・・・という所と、
（今回の場合、ie-mac　の場合だけになるのでしょうか？）
丁寧に教えて頂いた
　/* Hides from IE-mac */
の部分でie-macには適用しないように（？）
されているのかな・・・と思うのですが、
なぜそのようになるのかがわかりません。

もし、宜しければヒントだけもお願い致します。

回答No.1

koutarou504

<div id="test">
<ul id="greeting">
<li id="entrancephoto">　写真</li>
<li id="word">　言葉</li>
<li id="news">　ニュース</li>
</ul>
<div id="test2"> </div>
</div>

div#test{
width:570px;
border-color:#D6757E;
border-width:1px;
border-style:solid;
margin:0;
padding:0;
}
div#test2{
clear:both;
height:20px;
}
ul#greeting{
clear:both;
display:block;
width:570px;
margin:0;
padding:20px 0px 0px 0px;
list-style:none;
}
li#entrancephoto{
float:left;
width:210px;
vertical-align:middle;
padding:0px 20px 0px 20px;
}
li#word{
float:left;
width:320px;
}
li#news{
clear:both;
float:left;
width:530px;
padding:5px 0px 0px 20px;
margin:auto;
}

一応、上記で類似の事は出来そうですが・・・。
あまり綺麗なやり方ではないです。
何かを諦めないと無理みたいですね・・・。

とりあえずポイントは li 要素の float の指定の様です。
この為に li 要素が考慮されない様で・・・。
ちなみに、ol 要素の width の指定を外すと、IE でも高さが考慮されなくなります。
上記ではこの float の影響を回避する為に ol 要素の後に div 要素で clear:both; と指定し、その位置を考慮する様なその外側にさらに div 要素を用いてそこで外枠を書くように考えています。

上記以外に考えられる対応は、
１．高さを指定する。
２．枠線を諦める。
３．リスト要素を用いる事を諦めて、div や span 要素で代用する。
等が考えられます。
どれも何かを諦めるというか犠牲にしているというか
そういう事なので、作者自身なら他にもいろいろあるのではないかと思われますが・・・。
また、あまりお勧めではありませんが、li 要素を display:inline; と指定して float と width の指定をやめて、
width の指定の代わりに全角スペースなどを使う方法もあるにはありますが・・・。

お礼

いろいろな回避策ありがとうございました。
divで囲む際に、囲みの底に当たる部分に
div（test2)を用いて解決する方法を知りました。

問題については、ao様の方法で解決できました。
ありがとうございました。