HPのFirefoxとIEでの画像表示に問題があります

2023/08/07 18:34

このQ&Aのポイント

HPのFirefoxでは画像表示に問題がありませんが、IEでは画像の間に空白ができます。
DreamWeaver8を使用してHPを作成していますが、IE6で表示すると、TOPページの画像と画像の間に空白ができます。
HPの画像表示に問題があるため解決方法を探しています。CSSやタグについて学習中ですが、まだまだ理解が不十分です。

ベストアンサー

HPがFirefoxでは問題ないのに、IEだと画像に空白ができます。

2008/01/31 00:53

DreamWeaver8を使いHPをさわってるんですが、IE6で見ると、TOPページの画像と画像の間に空白ができて見えます。DreamWeaver上でもFirefoxでも問題なく表示されるんですが、原因がわかりません。（当方初心者で、このHPももともと業者さんが作ったものを、途中から簡単な更新等のみを知人からお願いされてしておりますので、CSSやらタグやら勉強中で、まだまだよく解ってないような感じです。そんな人間がHPを触るな！という意見がごもっともだとは思いますが、知人も周りに頼めるような人間もなく私にお願いしてきておりますので、なんとか綺麗に見えるようにしたいのです。）これだけの説明では解りにくいと思いますので、以下におかしいと思われる個所を載せます。 <div class="top-h-left"></div> <div class="top-h-right"> <div class="t-sub-navi"> <ul> <li class="h-home"><a href="../index.html"><img src="../img/top_h_home.jpg" alt="HOME" width="53" height="20" class="imgover" /></a></li> <li class="h-inquiry"><a href="../info/inquiry.html"><img src="../img/top_h_inquiry.jpg" alt="お問い合わせ" width="81" height="20" class="imgover" /></a></li> <li><a href="../info/sitemap.html"><img src="../img/top_h_sitemap.jpg" alt="サイトマップ" width="82" height="20" class="imgover" /></a></li></ul><br clear="all" class="partition" /></div><img src="../img/top_img1.jpg" alt="○○○」" width="410" height="160" /></div> <span class="top-h-left"><a href="http://www./○○○"><img src="../img/logo_top.jpg" alt="○○○" width="340" height="180" /></a></span><br clear="all" class="partition" /> <img src="../img/top_img2.jpg" alt="" width="340" height="209" /><img src="../img/top_img3.jpg" alt="" width="410" height="209" /><br /> <div class="top-global-navi"> この画像のimg1とimg3の間に空白が現れてしまいます。（○の部分はHPのアドレスや店名等が表示されていましたので、略させて頂きました）

rescue2106
お礼率100% (1/1)

ホームページ作成ソフト
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

leap_day
ベストアンサー率60% (338/561)

2008/01/31 11:26 回答No.1

こんにちはタグだけのソース文ではどのように表示されているのか分かりませんこういった場合にはスタイルシート部も必要になりますので併せて載せて下さい　ｍ（－－）ｍ class名が分かりやすいので大方の予想はつきますが・・・ ┌────────┐┌──────────────┐ ├────────││　　　　　　　　　　　　　　　　　　　　　　│ │　　　　　　　　　　　　　││　　　　　　　　　　　　　　　　　　　　　│ │　　　　　　　　　　　　　│└──────────────┘ ├────────┤┌──────────────┐ │　　　　　　　　　　　　　││　　　　　　　　　　　　　　　　　　　　　│ └────────┘└──────────────┘ こういう状態になってるわけです・・・よね？ (上の部分左側） <div class="top-h-left"></div> 空白行1行分 logo_top.jpg height:180 (上の部分右側) <div class="t-sub-navi"> height:20 top_img1.jpg height:160 となりますので<div class="top-h-left"></div>の分だけ左のほうがheightが多くなりますそのため画像間に空白ができているわけです <div class="top-h-left"></div>に何も入れないのであれば削除してください逆に言えばこれに何か入れれば入れるほど空白部分は増えていくか、最悪（height:180を越すと）レイアウトが崩れます

質問者

お礼 2008/02/07 23:46

お礼遅くなり大変申し訳ありませんでした。スタイルシート部というのが、どの部分を指しているのかわかりませんでしたが（勉強不足ですみません...）　<div class="top-h-left"></div>ｎの部分は必要なさそうなので、削除しました。しかし右の画像間の空白は消えませんでした...もう少し自分でも頑張ってみます。説明不足の初心者の質問に丁寧に答えていただいて、どうもありがとうございました。

関連するQ&A

ＣＳＳレイアウトの配置ずれについて
本を見ながらＨＴＭＬとＣＳＳを作成したのですが、どのブラウザで見てもclass指定した"slideItems"の位置が右にズレてしまいます。解決方法わかる方、教えてください。以下、htmlとcssです。 html↓ <body> <div id="newBook"> <div class="item"> <ul id="slideItems"> <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li>  <li><a href="#"/><img src="img/IMG_0162.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム1</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0135.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム2</h4> <p>コメント2</p> </li> <li><a href="#"/><img src="img/IMG_0164.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム3</h4> <p>コメント3</p> </li> <li><a href="#"/><img src="img/IMG_0140.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム4</h4> <p>コメント1</p> </li> <li><a href="#"/><img src="img/IMG_0171.jpg" alt="サンプル画像" width="50" height="63" /> <h4>サンプルアイテム5</h4> <p>コメント1</p> </li> </ul> </div> <div class="leftBtn"> <a href="javascript:startmove('left');"><img src="img/prev.gif" alt="左へ" width="25" height"25" border="0" /></a></div> <div class="rightBtn"> <a href="javascript:startmove('right');"><img src="img/prev_r.gif" alt="左へ" width="25" height"25" border="0" /></a> </div> </div> </body> css↓ #newBook { margin: 30px; position: relative; } .item { height: 115px; width: 500px; padding: 10px 0px; overflow: hidden; position: absolute; left: 40px; top: 0px; } .leftBtn,.rightBtn { text-align: left; width: 40px; position: absolute; top: 0px; } .leftBtn { text-align: left; left: 0px; } .rightBtn { text-align: right; left: 540px; } .item ul { width: 1500px; position: absolute; left: 0px; top: 0px; } .item li { background-color: #999999; height: 100px; width: 100px; list-style-type: none; padding: 10px 0px 5px; float: left; text-align: center; } #slideItems { position: absolute; left: 0px; top: 0px; }
- 締切済み
- その他([技術者向] コンピューター)
IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると画像と画像の間にスペースが出来てしまいます。他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
フルスライドの画像上に文字を入れたい
すみません、初心者です。 htmlは、 <div id="container"> <div class="fullSlideShow"> <ul> <li><a href="#1"><img src="img/photo01.jpg" alt=""></a></li> <li><a href="#2"><img src="img/photo02.jpg" alt=""></a></li> <li><a href="#3"><img src="img/photo03.jpg" alt=""></a></li> <li><a href="#4"><img src="img/photo04.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo05.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo06.jpg" alt=""></a></li> </ul> </div> <div class="helo"> <h1>site title</h1> <p>abcdefg</p> </div> と書いてみました。CSSですが、 .fullSlideShow h1 { position: absolute; z-index:500; left: 40px; top: 40px; padding-right: 40px; font-size: 2em; line-height: 1.20; } .fullSlideShow h1 a.textlink { color: white; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-decoration: none; } としてみましたが表示されません。まだサイズや位置は気にせず表示されるように試してみているのですが、どうも文字が画面上に現れてくれません。とりあえず、h1とpだけでも表示させたいのですが、教えて頂けないでしょうか。どうぞ宜しくお願いします。
- ベストアンサー
- CSS
IE６だと動かない　マウスオーバーで画像の入れ替え
以下のように書いてみました。 IE6以外では期待した動作が得られます。 ※imgファイルは適当です。実際に動かす場合は、適当に直して下さい。 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/> <meta http-equiv='Content-Style-Type' content='text/css'> <style> img{ border: 0px; } #itmImg{ width: 240px; float: left; position: relative; } #itmImg img{ display:block; } #itmImg a span{ display: none; } #itmImg a:hover span{ display:block; position:absolute; top:0; left:0; } #itmImg ul { margin: 0; padding: 0; } #itmImg li{ float:left; list-style:none; } </style> </head> <body> <div id="itmImg"> <img src="hoge1.jpg" width="240" height="240" alt=""> <ul> <li> <a href="javascript:void(0);"> <img src="hoge2.jpg" width="80" height="80" alt=""> <span><img src="hoge2.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge3.jpg" width="80" height="80" alt=""> <span><img src="hoge3.jpg" width="240" height="240" alt=""></span> </a> </li> <li> <a href="javascript:void(0);"> <img src="hoge4.jpg" width="80" height="80" alt=""> <span><img src="hoge4.jpg" width="240" height="240" alt=""></span> </a> </li> </ul> </div> </body> </html> IE6でも動くようにするにはどうしたら良いでしょうか？ご指導の程、宜しくお願いいたします。
- 締切済み
- CSS
IE6、7で途切れてしまう画像
分からない部分が出た際にいつもお世話になっております。今回もどなたかご回答頂けますと幸いです。グローバルナビゲーションを中央揃えにして表示させようとしているのですが、 IE6と7で確認したときになぜか下部分が途切れてしまいます（1pxくらい？）高さは指定している筈なのですが… 【html】 <div id="global-nav"> <ul> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="191" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト"　width="192" height="43" /></a></li> <li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="193" height="43" /></a></li> </ul> </div> 【css】 div#global-nav { position:relative; height: 43px; background:url(../common/navi_bg.jpg) repeat-x center bottom; overflow:hidden; } div#global-nav ul { position:relative; left:50%; float:left; list-style-type:none; } div#global-nav li { position:relative; left:-50%; float:left; } 宜しくお願いします。
- 締切済み
- HTML
【CSS】右側エリアがずれ込む
CSS初心者で、会社のサイトの変更をしています。現状メイン画像1枚のレイアウトだったところを差換えでjavascriptで画像を切り替え、リンク先も変更できるようにしました。はめ込んだところ、右側のボタンがずれ込みます。何をどうしたら解決できるかわかりません。どうしたら修正できますでしょうか。よろしくお願い申し上げます。 ≪修正前のレイアウト≫ □□□□□□□□□　■■■■■ □□メイン画像□□　■ボタン■ □□□□□□□□□　■■■■■ 【HTML】 <div id="keySpace"> <p> <a href="shopping/index.html"><img src="img/key.jpg" border="0" /></a></p> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS外部】 #keySpace { width: 860px; margin: 0px auto; padding: 0px 0px 7px; background: #FFF; } #keySpace p { width: 643px; margin: 0px 12px 0px 0px; float: left; display: inline; } #keySpace ul { width: 205px; float: right; } #keySpace ul li { margin: 0px 0px 3px; } ≪修正後のレイアウト≫ □□□□□□□□□ □□メイン画像□□ □□□□□□□□□ ■■■■■ ■ボタン■ ■■■■■ 【HTML】 <div id="keySpace"> <p> <div id="link1"> <a href="index.html"><img border="0" src="img/top_01.jpg" /></a></div> <div id="link2" class="banner"><a href="shopping/index.html"><img border="0" src="img/top_02.jpg" /></a></div> </p> <ul> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS】上記に追加 <style type="text/css"> .banner { display:none; } </style>
- ベストアンサー
- HTML
IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）
こんにちは、質問させて下さい。現在　li　タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。どうぞご回答お願いいたします。以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。
- ベストアンサー
- HTML
FireFoxで確認するとliがずれます
webページを作成していてリスト部分が下にずれてしまうのに困っています。添付図のようにIEで見るとちゃんと置きたい位置に収まってくれるのですが、 firefoxでは収まってくれません。ご教授頂けたら幸いです。タグ <div id="header"> <h1><a href="index.html"><img src="images/buyoon_syoukai_web_site.jpg" alt="ブヨーン商会WEBSITE" width="180" height="50" /></a></h1> <div id="gNavi"> <ul> <li><a href="information.html"><img src="images/information.jpg" alt="information" width="120" height="50" /></a></li> <li><a href="profile.html"><img src="images/profile.jpg" alt="profile" width="120" height="50" /></a></li> <li><a href="photograph.html"><img src="images/photograph.jpg" alt="photograph" width="120" height="50" /></a></li> <li><a href="bbs.html"><img src="images/bbs.jpg" alt="bbs" width="120" height="50" /></a></li> </ul> </div> </div> スタイルシート #header { width: 740px; height: 50px; margin: 0px; padding: 0px; } #header h1 { width: 180px; height: 50px; margin-top: 0px; margin-right: px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: left; position: absolute; } #gNavi { list-style-type: none; width: 560px; height: 50px; margin-top: 0px; margin-right: 0px; margin-left: 220px; margin-bottom: 0px; float: right; position: absolute; } #gNavi li { list-style-type: none; margin: 0px; padding: 0px; float: left; } 素人作成のため乱雑の作成内容で恐縮ですが、アドバイス頂けると幸いです。
- ベストアンサー
- HTML
CSS画像・文字混在縦メニュー
画像と文字使った縦メニューを作成しています。レイアウトがズレたり隙間ができたりでどうしてもうまくいきません。どうぞお知恵をお貸しください。よろしくお願いいたします。【CSS】 @charset "utf-8"; /* CSS Document */ /* ナビ設定 */ #navi1 { margin: 0px; padding: 0px; position: relative; right: 10px; width: 200px; float: right; } #navi1 li { margin: 0px; padding: 0px; position: relative; width: 200px; float: right; } #navi1 #navi1_title { width: 200px; position: relative; } .sub_menu { width: 190px; position: relative; float: right; left: 5px; } .sub_menu ul { list-style: none; border-top: 1px solid #CCCCCC; width: 190px; position: relative; } .sub_menu li { border-bottom: 1px dashed #CCCCCC; background: #F3F0EA url(img/xx.jpg) no-repeat left center; width: 190px; } .sub_menu a { display: block; /*Windows IE対策のため、ボックス幅を指定 */ width /**/: 180px; /*Window IE5用の値を指定 */ color: #666; text-decoration: none; font-size: 11px; padding-top: 4px; padding-right: 4px; padding-bottom: 4px; padding-left: 10px; background-color: #F3F0EA; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; left: 3px; } .sub_menu a:hover { color: #666; width: 180px; background-color: #E4DECF; background-image: url(img/xx.jpg); background-repeat: no-repeat; background-position: left center; } 【HTML】 <div id="navi1"> <h2><img src="img/menu1_title.png" width="200" height="50" alt="qqq" /></h2> <ul> <li><img src="img/menu_y.png" width="200" height="32" alt="zzz" /></li> </ul> <ul class="sub_menu"> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> <li><a href="#">yyy</a></li> </ul> <ul> <li><a href="#"><img src="img/menu_a.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_b.jpg" width="200" height="32" alt=xxx" /></a></li> <li><a href="#"><img src="img/menu_c.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_d.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_e.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_f.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_g.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_h.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_i.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_j.jpg" width="200" height="32" alt="xxx" /></a></li> <li><a href="#"><img src="img/menu_k.jpg" width="200" height="32" alt="xxx" /></a></li> </ul> </div>
- ベストアンサー
- HTML
アップロードするとレイアウトが崩れる
前にも質問させていただいたのですが、まだ解決していません。 FC２でアップロードはできたのですが、HTMLがデスクトップ上ではちゃんとみれたのに、サーバーにアップしたら表示されません。 FFFTPでアップロードする際になにか作業をしないといけないことがあるのかわからないのですが・・・。HTMLのどこを変えたら他の方からもホームページが見れるのかわからないので、 HTMLの中身を一部追記するので、どの部分を変えたらいいのか教えて下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="root/css/top.css" rel="stylesheet type="text/css"> <title>パーティ専門アイス本舗</title> </head> <body link="#61503e" vlink="#61503e" alink="#aaaa"> <div id="wrapper"> <div id="header"> <p>パーティ専門アイス本舗は、パーティや記念日などに便利な2リットルサイズの業務用アイスを販売しています。数あるフレーバーからお好きなセットをお選びください。</p> <h1><img src="root/images/logo_ice.gif" width="450" height="60" /></h1> <p id="kaimono"><a href="#"><img src="root/images/idx_btn_cart.gif" width="180" height="30" alt="kaimono" /></a></p> <ul id="menu_navi"> <li><img src="root/images/gnavi_btn01.jpg" width="158" height="25" alt="home" /></li> <li><img src="root/images/gnavi_btn02.jpg" width="158" height="25" alt="syouhin" /></li> <li><img src="root/images/gnavi_btn03.jpg" width="159" height="25" alt="kaimono" /></li> <li><img src="root/images/gnavi_btn04.jpg" width="159" height="25" alt="shiharai" /></li> <li><img src="root/images/gnavi_btn05.jpg" width="158" height="25" alt="faq" /></li> <li><img src="root/images/gnavi_btn06.jpg" width="158" height="25" alt="mailmagazine" /></li> </ul> </div> <div id="page_body"> <div id="side"> <div id="kensaku"> <form method="post" action="http://test.com/text.cgi"> <p>商品名や種類で検索</p> <p><input type="text" name="kensaku" size=20"></p> <p id="kensaku_form"><input type="submit" value="検索"></p> </form> </div> <p id="tokushu"><a href="#"><img src="root/images/Untitled-5_03_03.jpg" width="180" height="120" alt="tokushu" /></a></p> <div id="prodact_side"> <div class="section1"> <p><img src="root/images/idx_menu_ph01.jpg" width="63" height="35" alt="apple" /></p> <p class="right"><a href="#"> ストロベリー</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph02.jpg" width="63" height="35" alt="ugi" /></p> <p class="right"><a href="#"> 宇治抹茶</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph03jpg.jpg" width="63" height="35" alt="chocoship" /></p> <p class="right"><a href="#"> チョコチップ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph04.jpg" width="63" height="35" alt="berugi" /></p> <p class="right"><a href="#"> ベルギーチョコ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph05.jpg" width="63" height="35" alt="cookie" /></p> <p class="right"><a href="#"> キャラメルクッキー</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph06.jpg" width="63" height="35" alt="banira" /></p> <p class="right"><a href="#"> バニラ</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph07.jpg" width="63" height="35" alt="pain" /></p> <p class="right"><a href="#"> パイナップル</a></p> </div> <div class="section1"> <p><img src="root/images/idx_menu_ph08.jpg" width="63" height="35" alt="apple" /></p> <p class="right"><a href="#"> アップル</a></p> </div> <div class="section1"> <
- 締切済み
- HTML

HPのFirefoxとIEでの画像表示に問題があります

HPがFirefoxでは問題ないのに、IEだと画像に空白ができます。

質問者が選んだベストアンサー

お礼 2008/02/07 23:46

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

HPのFirefoxとIEでの画像表示に問題があります

HPがFirefoxでは問題ないのに、IEだと画像に空白ができます。

質問者が選んだベストアンサー

お礼 2008/02/07 23:46

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録