- 締切済み
ブラウザ別のマージン解消は？
画像を使って複数個の<A>タグを設置しています。 IEでは理想のデザインになっているんですが、サファリ、クロームでは画像同士がくっついたデザインになっています。 CSSを使っています。 これってマージンが認識されていないのですかね？ 今は、サファリ等にあわせて<IMG src="1 .JPG" style="margin-top:10px;">等とし画像の上下間隔を取っていますが、 そうするとIEでは、ものすごく間隔が大きくなってしまいます。 見た感じでは、サファリ等の１０PXは、IEでは３０～４０PXに成っているように感じます。 解消する方法はないのでしょうか？ 精通されている方が居られましたら、宜しくご指導願います。
- kfjbgut
- お礼率49% (2515/5075)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
はい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> とURLまで書かないとなりません。 ⇒DOCTYPEスイッチ－HTMLの基本( http://www.htmq.com/htmlkihon/302.shtml ) 1999年のHTML4.01の勧告以来 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 著者 HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Conformance: requirements and recommendations (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )］より なのですから、15年経ちました。そろそろstrictにしましょう。それ以後のXHTML1.1、XHTML2.0(中止)、HTML5(昨年勧告)では、strictしかないのですから・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
基本的なことが理解できていないようです。 A要素は非置換インライン要素で画像は置換インライン要素ですから、 ⇒10.6 高さとマージンの計算( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#Computing_heights_and_margins ) IEの互換モードは、とても多くのバグ--ウェブ標準と異なる解釈をする--を持っていますから、IEを基準にサイトを作ろうとするとすると失敗します。IEで作成する場合はDOCTYPE宣言を標準モードで動作するように書いておきます。 HTML4.01でしたら、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> または、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 前者はHTML4.01移行型、後者は厳密型になります。 いずれのHTMLを使われているか分かりませんが、それでIEも他のブラウザと同じになる事が多いです。 ここはA要素は関係ないでしょう。 [例] <div class="nav"> <ol> <li><a href=""><img src="" width="" height="" alt="トップ"></a></li> <li><a href=""><img src="" width="" height="" alt="新製品"></a></li> <li><a href=""><img src="" width="" height="" alt="マニュアル"></a></li> <li><a href=""><img src="" width="" height="" alt="問合せ"></a></li> </ol> </div> というナビゲーションリストがあったとします。 スタイルシートで、 div.nav{width:20%;position:relative;} div.nav ol,div.nav ol li{list-style-type:none;margin:0;padding:0;} div.nav ol li+li{margin-top:10px;} div.nav ol li img{display:block;width:100%;height:auto;} とするだけでウィンドウ巾の20%で二つ目の画像以降は10px隙間が空くはずです。 <div class="nav"> <ol> <li><a href=""><img src="" width="" height="" alt="トップ"></a></li> <li><a href=""><img src="" width="" height="" alt="新製品"></a></li> <li><a href=""><img src="" width="" height="" alt="マニュアル"></a></li> <li><a href=""><img src="" width="" height="" alt="問合せ"></a></li> </ol> </div> ⇒ナビゲーションリストを様々にデザインしてみよう。( http://ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) なお、使われているとは思いますがウェブサイト作られているのでしたら、開発者向けツール( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )の豊富なfirefoxが便利です。特に Firebug( https://addons.mozilla.jp/firefox/details/1843 )は欠かせません。マージンやパディングの関わりがすぐ分かる。
補足
私は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> と記述していますが相談のような誤差がありますよね・・
関連するQ&A
- リストの画像をくっつけたい！
教えてください。 <ul> <li><img src="../img/link_a.gif" /></li> <li><img src="../img/link_b.gif" /></li> <li><img src="../img/link_c.gif" /></li> </ul> と画像をリストにした場合、画像と画像の間にblankができてしまうのですが、これは仕方がないのでしょうか？ CSSでマージンを0pxにしても画像と画像がくっつきません。 #contentMenu li { width: 160px; height: 25px; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; } 教えてください。 よろしくお願いいたします。
- ベストアンサー
- XML
- Firefoxでネガティブマージンが効かない
はじめまして。CSS＋XHTMLでサイトを制作していて行き詰ってしまいました。 IE6,7,Safari3では有効となるネガティブマージンがFirefox3で有効になりません。 テストであげました。 http://www.raki-suta.net/beauty/ フッターの部分にマイナスマージンを指定したのですが、Firefoxだけ効いていないようです。 [html] <div id="footer"> <div id="footer_inner"> <address> Copyright(C) <a href="/">キレカワナビ☆</a> All Rights Reserved. </address> </div> </div> [css] #footer_inner { background: url(../img/top_28.jpg) no-repeat; height: 51px; padding-top: 250px; } #footer { background: url(../img/top_30.jpg) repeat-x 0 178px; height: 301px; text-align: center; clear: both; margin-top: -200px; } 何が悪いのでしょうか。 アドバイスお願いします。
- 締切済み
- HTML
- ie6 でリストが横に並ばず縦に並んでしまう
ie6のコーディングでノイローゼになりそうです。5時間くらいいろいろ試行錯誤しましたが、解決できません。 <div class="pic0"> <ul> <li class="pic1"><img src="images/pic1.jpg"/></li> <li class="pic1"><img src="images/pic2.jpg" /></li> <li class="pic1"><img src="images/pic3.jpg" /></li> <li class="pic1"><img src="images/pic4.jpg"/></li> <li class="pic1"><img src="images/pic5.jpg"/></li> </ul></div> .pic0{ width: 250px; height:40px; float: left; display:inline; padding-top: 10px; padding-bottom: 10px; overflow:hidden; } .pic1 li { float: left; height: 47px; width: 36px; display:block; margin-left:3px; margin-right:3px; } ie6のみ縦に並んでしまいます。 疑ったもの ・haslayout *{ zoom:1; } {line-height:0;} ・marginが倍になるバグ widthの指定 ・cssが効いていない ・ ネガティブマージン など ie6のcssを読み込ませるなど、何でもいいので、ie6のリストが横にさせる方法はないでしょうか。 雑文ですが、どうかお願いします。助けてください。
- ベストアンサー
- CSS
- css firefox IE 画像を中央揃えにしたいです
初心者です。よろしくお願い致します。 cssでホームページを作っています。 index.htmlに画像を中央に貼り付けたいのですが、 firefoxでは中央揃えに、IEでは左側に表示されます。 下にタグを書くので、ご回答いただけましたら幸いです。 よろしくお願い致します。 -------------------------------------------------- <html> <head> <title>○○○</title> <link href="design/index.css" rel="stylesheet" type="text/css"> </head> <body> <div class="contents"> <img src="img/tobira.jpg"> </div> </body> </html> -------------------------------------------------- /*ページのレイアウト用css*/ body{ margin:0px; padding:0px; background-color:#FFFFFF; } body a img{ border: none; align:center; } .contents{ width:800px; margin:0px auto; margin-top:100px; } h1{ color: #FFFFFF; }
- ベストアンサー
- HTML
- IE7にのみ有効なCSSソース
お世話になっております。 写真を縦に４枚並べているのですが、間が4pxあけたいのに、8px空いてしまいます。IEのみ有効のCSSソース「アンダーバー」を使用すると、IE6では、有効ですが、IE7では、有効となりません。いい方法はありますか。 （CSSソース) #left img{ margin:0 4px 4px 4px; _margin:0 4px 0px 4px; /* IE のみ有効 */ padding:0px; } (Ｈｔｍｌソース） <div id="left"> <h2>取扱商品（一例）</h2> <img src="ephoto/truck1.jpg" width="112" height="83" alt="トラック1" /> <img src="ephoto/truck2.jpg" width="112" height="83" alt="トラック2" /> <img src="ephoto/truck3.jpg" width="112" height="83" alt="トラック3" /> <img src="ephoto/truck4.jpg" width="112" height="83" alt="トラック4" /> <img src="ephoto/truck5.jpg" width="112" height="83" alt="トラック5" /> </div><!-- reft の終了タグ-->
- ベストアンサー
- その他（インターネット・Webサービス）
- tbody要素に削除出来ないマージンが入る
table要素の thead要素及びtbody要素についてですが この2つの要素は内部的に margin: 2px; が指定されたような感じになっています。(firebugなどで確認) つまり、上下左右にマージンが2px自動的に入ってます。 もちろん、table要素とtbody要素には、margin及びpadding及びborderは0を設定しています。 このマージンのようなものを取り去りたいのですが margin : 0px;などとしてもこのマージンのようなものを取り去ることは出来ませんでした。（ツールでみると、マージン及びパッディングは０なので当たり前ですが） table要素を使う限り、この2pxというものは自動的に挿入され、CSSでは取り去ることは無理なのでしょうか？ 回避策としては、margin: -2px;で回避することは可能みたいなのですが そもそもどうしても2pxが入ってしまうのか、またそれがなぜCSSで設定出来ないようになっているのか 疑問に思っています。 これは、firefox3.6(firebug) 及び ie8(開発ツール)で確認しました。 分かりにくい説明かもしれませんが宜しくお願いします。
- ベストアンサー
- HTML
- divによるボックスの意図しないマージンについて
divによるボックスの意図しないマージンについて質問致します。 よろしくお願いしますm(_ _)m 現在cssによるデザインを勉強中なのですが、「div」によるボックスを作り、センター揃えにして上下に並べようとしたら画像の矢印のような意図しないマージンができてしまいました。 divへのcssの適用の仕方がまだしっかりとわからず手探り状態で、調べてもよくわからなかったです・・・。 margin-bottom:0pxなどでもダメでした・・・。 どうか原因がわかる方がいましたらよろしくお願いします(>_<) この場合に適用しているcssは ・width:○○ ・margin-left:auto; ・margin-right:auto; だけです。 どうかよろしくお願いしますm(_ _)m
- ベストアンサー
- CSS
- Firefoxでの画像の縦の隙間をなくしたい
現在Dreamweaver8でサイトを作成中の初心者です。 画像を縦に並べて表示したいのですが、<br>のタグを入れてないところはIE6,7だと隙間なく表示されるのですが、Firefoxだとどうも隙間が出来てしまいます。 ネットや本で自分なりに調べて試したつもりですが、どうにも解決できませんので、お手数ですがどなたかご協力頂けますようよろしくお願いいたします。 参考までにhtmlとcssです。 html部分 <div id="sidenavi"> <p><a href="jjj/index.html"><img src="image/xxx.jpg" width="245" height="79" border="0"></a></p> <p><a href="jjj/index.html"><img src="image/yyy.jpg" width="245" height="79" border="0"></a></p> <br> <p><img src="image/zzz.jpg" width="245" height="40"></p> <p><img src="image/aaa.jpg" width="245" height="80"></p><br> <p><img src="image/aaa.jpg" width="245" height="106"></p> </div> css部分 #contents #sidenavi { padding: 0px; height: 450px; width: 245px; float: right; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 0px; } #sidenavi p { margin-top : 0; margin-bottom : 0; padding-top: 0px; }
- ベストアンサー
- CSS
- CSSのみでのデザインについて
CSSのみでデザインを勉強中です。 その際にわからないことがありましたので、すみませんが、ご教授下さいませ。 ▼HTMLの方の記述 <div id="banner"> <ul> <li><img src="./img/entry.jpg" width="240" height="55" /></li> <li><img src="./img/entry.jpg" width="240" height="55" /></li> </ul> </div> ▼CSSの記述 #banner { float:left; width:240px; margin:0 0 0 17px; display: inline; } #banner ul li { margin-bottom:0px; } 上記の様に記述しています。画像を縦に２つ空白を入れずに並べたいのですが、WIN IE6.0にて、2mm程の空白が空いてしまいます。NN7.1では4mm程空白ができます。operaは意図している通りに表示されます。 何か原因が有るのでしょうか？ どうぞ宜しくお願い致します。
- ベストアンサー
- CSS
補足
駄目ですね。記述が自動削除されます。受け付けてくれません。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">－－－(1) ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">－－－(2) ↓ 上書き保存 ↓ (1)に戻ります。