CSSについて教えてください。

ソースコード
<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だけ余白が消えません。
余白があるため要素が上に上がってこないのです。(フォロートさせた要素の横に来ない)どなたか詳しい方、教えていただけませんでしょうか?

回答の条件
  • 1人10回まで
  • 登録:
  • 終了:2007/11/08 22:15:23
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:tezcello No.2

回答回数460ベストアンサー獲得回数69

ポイント50pt

回答受付中でもコメントがつけられるようにしていただけませんか?

直接の回答ではないのにポイントを使わせてしまうのは心苦しいです。


スタンドアローンのIE5.5を落として見てみましたが、十分な横幅があればチャンと2段組で表示されました。5.5と6とで要素の幅の計算で違った答えを出しているのかも知れませんね。

< IE5.5では、li要素に「・」が付きますが、IE6では付きませんでした。 #topCONT ul{ width: 195px; ... } の width を削除すると表示されますので、幅の計算の所に違いがあるのかも >

URLはダミーです

http://www.mozilla.gr.jp/standards/index.html

id:moriamko44728

ありがとうございます。横幅を指定をはずすとちゃんと表示されました。

助かりました~

でも、IE5.5と6のボックスモデルの違い把握してましたが、何かのバグって事ですかね。

私の計算間違いではないと思うのですが、とにかくありがとうございました。

2007/11/08 22:13:29

その他の回答1件)

id:tezcello No.1

回答回数460ベストアンサー獲得回数69

ポイント35pt

floatBOX, to_right のクラスで何を指定しているのかわからないのと、IE5.5を持っていないので動作確認をしていないのですが...

リスト要素はデフォルトの左マージンが設定されているようです。(ブラウザによって異なるみたいです)これが悪さをしていませんか?


http://q.hatena.ne.jp/1194453468

id:moriamko44728

回答ありがとうございます。

リストの左マージンは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;

}

を指定しています。

2007/11/08 13:18:15
id:tezcello No.2

回答回数460ベストアンサー獲得回数69ここでベストアンサー

ポイント50pt

回答受付中でもコメントがつけられるようにしていただけませんか?

直接の回答ではないのにポイントを使わせてしまうのは心苦しいです。


スタンドアローンのIE5.5を落として見てみましたが、十分な横幅があればチャンと2段組で表示されました。5.5と6とで要素の幅の計算で違った答えを出しているのかも知れませんね。

< IE5.5では、li要素に「・」が付きますが、IE6では付きませんでした。 #topCONT ul{ width: 195px; ... } の width を削除すると表示されますので、幅の計算の所に違いがあるのかも >

URLはダミーです

http://www.mozilla.gr.jp/standards/index.html

id:moriamko44728

ありがとうございます。横幅を指定をはずすとちゃんと表示されました。

助かりました~

でも、IE5.5と6のボックスモデルの違い把握してましたが、何かのバグって事ですかね。

私の計算間違いではないと思うのですが、とにかくありがとうございました。

2007/11/08 22:13:29

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません