人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: moriamko44728
●カテゴリ:インターネット ウェブ制作
✍キーワード:background-color background-image CSS GIF padding
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● tezcello
●35ポイント

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

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


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

◎質問者からの返答

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

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

}

を指定しています。


2 ● tezcello
●50ポイント ベストアンサー

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

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


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

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

URLはダミーです

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

◎質問者からの返答

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

助かりました?

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ