- 締切済み
winのIEで正しく表示させたい
一行に、画像3つを左寄せ、画像2つを右寄せに表示しようとしています。 macのIE5、NN7、winのNN7での確認では、なんとか思うとように表示できたのですが、winのIEではどうにもなりません。 ソースは以下のように作っております。 <html> <div class="icon"> <img A> <img B> <img C> </div> <div class="inquiry"> <img D> <img E> </div> </html> ......... CSS .icon { margin-left: 140px; font-size: 12px; color: #333399; float: left; vertical-align: middle; white-space: nowrap; } .inquiry { margin-right: 30px; float: right; vertical-align: middle; white-space: nowrap; } ちなみに長くなるので省きましたが、右寄せの2つの画像はジャバスクリプトでカーソルが乗ると変わるようにしてあります。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- goldfox
- ベストアンサー率49% (123/249)
tableに入れているのなら、セルで左右に分けたほうが簡単ではありませんか？ あと、floatを使うときはwidth指定も必要と聞きましたが。 <table width="800" border="0" cellpadding="0" cellspacing="0" class="head_2"> <!--メイン--> <tr> <td align="left" class="icon"><img A> <img B> <img C> アイコンの説明</td> <td align="right" class="inquiry"><img D> <img E></td> </tr> </table> <!--cssのfloat:○○; は外す--> もしくは<div>で.iconと.inquiryにwidth:○○;を付け足す。 tableがwidth="800"なので、480pxと280pxとかちょっと減らすといいかも。
【white-space】はWin IEでは表示がおかしくなることがあるらしいです。
補足
ご指摘ありがとうございます。 これから試してみます。
- Manuel
- ベストアンサー率43% (43/98)
試してみたんですが、他のブラウザと変わらないんですけど。 どう、どうにもならないんですか？
補足
すいませんでした。省略しすぎました。 テーブルで全体を真ん中に表示するようにしています。その中に入れ子のテーブルを入れ、そこに内容を書いています。 また、右寄り表示の画像のとなりに短い文を入れています。 <table class="position" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table class="main" width="892" border="0" cellpadding="0" cellspacing="0"> <tr> <td rowspan="4" class="shadowleft"><img src="../images/spacer.gif" width="46"></td> <td> <table width="800" border="0" cellpadding="0" cellspacing="0" class="head_2"> <!--メイン--> <tr> <td><div class="icon"><img A> <img B> <img C> アイコンの説明</div> <div class="inquiry"><img D> <img E></div> </td> </table> </td> <td rowspan="4" class="shadowright"><img src="../images/spacer.gif" width="46"></td> </tr> </table></td> </tr> </table> ......... CSS .position { width: 100%; margin-left: auto; margin-right: auto; background: url(../123.gif); } .main { margin-left: auto; margin-right: auto; margin-top: 0px; background-color:white; } .icon { margin-left: 140px; font-size: 12px; color: #333399; float: left; vertical-align: middle; white-space: nowrap; } .inquiry { margin-right: 30px; float: right; vertical-align: middle; white-space: nowrap; } winIEの見え方は右寄りの3つの画像が指定より大分左に表示され、それによって左よりの画像が改行されてしまいます。
お礼
floatはwidthとセットで使用した方がいいのですね。 助かりました。ありがとうございます。 解決策が見つからなければtableできる予定でした。