CSSテクニックコミュの質問です。borderのずれについて

いつも、お世話になっております。
boxにborderを指定して、囲みをつけているのですが、
IEとoperaでは、右端がどうしても、ずれてしまいます。

一応、IEのbox幅の解釈の違いなのかとも思い、IE用のバグを記述
してみたものの、うまくいきません。。。

後、floatしたboxに対して<div></div>を親boxに入れて、
背景色を入れたいのですが、高さを指定すると、背景色がつくのですが、高さを指定しないと背景色がつきません、
<div class="areabwhn2">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
の所は、文字が増える事を想定しておりますので、高さは指定出来ません。この場合についても、アドバイスを頂けたらと思います。

皆様、お忙しいとは思いますが、アドバイスの方何卒、
宜しくお願い致します。

-----html-----------------------


<div id="areab">
<img src="img/00300_tiwhn.gif" alt="What's New" width="480" height="28">
<div class="areabbox">

<div class="areabzone">
<div class="areabwhn1">2006.08.08</div>
<div class="areabwhn2">
<a href="#">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></div>

<div class="areabzone2">
<a href="#"><img src="img/00300_btnall.gif" alt="一覧" width="37" height="12" border="0"></a></div>
</div>

</div>
</div>

-----------css------------------------

#areab {
width: 480px;
margin-top: 20px;
}

#areab .areabbox {
width:482px;
voice-family:"?"}?"";
voice-family:inherit;
width: 478px;
border-top: solid 1px #FFFFFF;
border-right: solid 1px #A98B49;
border-bottom: solid 1px #A98B49;
border-left: solid 1px #A98B49;
margin-top: 0px;
padding-top:10px;
}

#areab .areabbox2 {
width: 480px;
border-top: solid 1px #FFFFFF;
border-right: solid 1px #A98B49;
border-bottom: solid 1px #A98B49;
border-left: solid 1px #A98B49;
margin-top: 0px;
}

#areab .areabzone {
width: 440px;
margin-top: 5px;
margin-left: 20px;
}

#areab .areabzone2 {
width: 440px;
margin-bottom: 5px;
text-align: right;
clear: both;
}
---------------------------------------------

コメント(5)

最初
全て
最新の40件

[1] mixiユーザー 05月15日 23:46

#areab .areabboxのborderを

voice-family:"\"}\"";
voice-family:inherit;

の前に記述してみてもダメですか？

あと、voice-family:"?"}?""; ではなく voice-family:"\"}\""; です。

[2] mixiユーザー 05月16日 02:06

中身を全部 float させると、float した要素は文字通り浮き上がっているので(いや、適当な表現です)、FF、NN などのブラウザでは、親要素は「中身がない」という判断をして、高さがなくなるです。

なので、高さが大きくなるであろう、areabwhn2 は float させず、例えば、左に必要な分の margin をとり、そのスペースに、areabwhn1 を float させるなり、position:absolute; で配置するなどしたらいかがでしょうか？

すいません、border のほうは良くわかりません^^;

[3] mixiユーザー 05月16日 11:23

背景に関しては↓
http://www.akatsukinishisu.net/itazuragaki/css/i20050614.html

[4] mixiユーザー 05月16日 12:12

borderの方---
このソースでWindowsのIE6.0 とOpera8.5で試した所、borderはズレていないようです。

Firefoxならズレてましたが、これは
　--IEは、WIDTHの値の内側にBORDER
　--Firefoxは、WIDTHの値の外側にBORDER
の仕様でズレます。

もしかして、確認環境がMacIE5.5とMacOpera6.0だったりしますか？

[5] mixiユーザー 05月17日 10:55

>CHOU-FLEUR
有り難うございます。
すいません、voice-family:"?"}?"";です。
ハックの記述を、borderの前に書いたのですが、ききませんでした。operaがずれてしまうので、opera用のハックを記述したのですが、きかないので、違う記述でためしてみます。

>拳骨斎
有り難うございます。
floatに関して、よく左右がずれる現象におちいります。。。
>FF、NN などのブラウザでは、親要素は「中身がない」という判断をして、高さがなくなるです。
↑有り難うございます。参考にさせて頂けます。

>あおい→↓?
有り難うございます。参考になりました。

>ゅぇ
有り難うございます。
確認環境が、Macになります。。。
winでの、borderの環境がブラウザによって違うんですね。
参考になります。

ログインすると、みんなのコメントがもっと見れるよ