ソースコード
<div id="topCONT" class="floatBOX">
<div class="to_right"><img src="images/top_img.jpg" alt="" width="505" height="196" /></div>
<ul>
<li class="navi01"><a href="#" title="ああああ">ああああ</a></li>
<li class="navi02"><a href="#" title="いいいい">いいいい</a></li>
<li class="navi03"><a href="#" title="うううう">うううう</a></li>
</ul>
</div>
CSSコード
#topCONT ul{
width: 195px;
background-color: Fuchsia;
padding: 0px;
list-style-position: outside;
}
#topCONT ul li a{
display: block;
text-indent: -6000px;
background-image: url(../images/main_menu.gif);
}
と指定しています。画像の要素をフロートさせて右によせ、リスト要素と横並びで表示させたいのですが、IE5.5の場合だけ左に余分なマージンが表示されてしまいます。
リストマーカー分の余白と判断してlist-style-position: outside;
を指定しているのですが、IE5.5だけ余白が消えません。
余白があるため要素が上に上がってこないのです。(フォロートさせた要素の横に来ない)どなたか詳しい方、教えていただけませんでしょうか?
回答受付中でもコメントがつけられるようにしていただけませんか?
直接の回答ではないのにポイントを使わせてしまうのは心苦しいです。
スタンドアローンのIE5.5を落として見てみましたが、十分な横幅があればチャンと2段組で表示されました。5.5と6とで要素の幅の計算で違った答えを出しているのかも知れませんね。
< IE5.5では、li要素に「・」が付きますが、IE6では付きませんでした。 #topCONT ul{ width: 195px; ... } の width を削除すると表示されますので、幅の計算の所に違いがあるのかも >URLはダミーです
floatBOX, to_right のクラスで何を指定しているのかわからないのと、IE5.5を持っていないので動作確認をしていないのですが...
リスト要素はデフォルトの左マージンが設定されているようです。(ブラウザによって異なるみたいです)これが悪さをしていませんか?
回答ありがとうございます。
リストの左マージンは0にしてあります。floatBOX, to_right のクラスは
.floatBOX:after{
content:",";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.floatBOX{
display: inline-block;
}
/*hide IE mac\*/
*html.floatBOX{
height: 1%;
}
.floatBOX{
display: block;
}
/*END hide IE mac*/
.to_right{
float: right;
}
を指定しています。
回答受付中でもコメントがつけられるようにしていただけませんか?
直接の回答ではないのにポイントを使わせてしまうのは心苦しいです。
スタンドアローンのIE5.5を落として見てみましたが、十分な横幅があればチャンと2段組で表示されました。5.5と6とで要素の幅の計算で違った答えを出しているのかも知れませんね。
< IE5.5では、li要素に「・」が付きますが、IE6では付きませんでした。 #topCONT ul{ width: 195px; ... } の width を削除すると表示されますので、幅の計算の所に違いがあるのかも >URLはダミーです
ありがとうございます。横幅を指定をはずすとちゃんと表示されました。
助かりました~
でも、IE5.5と6のボックスモデルの違い把握してましたが、何かのバグって事ですかね。
私の計算間違いではないと思うのですが、とにかくありがとうございました。
ありがとうございます。横幅を指定をはずすとちゃんと表示されました。
助かりました~
でも、IE5.5と6のボックスモデルの違い把握してましたが、何かのバグって事ですかね。
私の計算間違いではないと思うのですが、とにかくありがとうございました。