- 締切済み
ブラウザ別の余白誤差って解消できないの？
IEとSAFARIでは画像を横一列に配置するとIEで最後に余白が生じます。これって解消できないのですか？ WEB幅は８５０PXです、画像幅１４０ＰＸの画像を横一列に６枚並べるとSAFARI画面では、殆ど余白が無く並ぶのですが、IE8画面では右に実寸で３センチ程度の余白が発生します。 例えば、この６枚の画像を決定してIEとSAFARIとも余白無しに均等に配置するCSS等はないのでしょうか？ そんな都合のいいものはないですかね？ ネットで検索しますが、全く見つかりません。ＣＳＳハックとかがそうなんでしょうか・・ 知って居られる方いませでしょうか？
- gfkdfs
- お礼率26% (37/139)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- naokita
- ベストアンサー率57% (1008/1745)
関連するQ&A
- ブラウザ別のマージン解消は？
画像を使って複数個の<A>タグを設置しています。 IEでは理想のデザインになっているんですが、サファリ、クロームでは画像同士がくっついたデザインになっています。 CSSを使っています。 これってマージンが認識されていないのですかね？ 今は、サファリ等にあわせて<IMG src="1 .JPG" style="margin-top:10px;">等とし画像の上下間隔を取っていますが、 そうするとIEでは、ものすごく間隔が大きくなってしまいます。 見た感じでは、サファリ等の１０PXは、IEでは３０～４０PXに成っているように感じます。 解消する方法はないのでしょうか？ 精通されている方が居られましたら、宜しくご指導願います。
- 締切済み
- その他([技術者向] コンピューター)
- webのナビメニューで、どうしても解決しません！
例えば次のジェトロさんのナビメニューですが http://www.jetro.go.jp/indexj.html 「ホーム、海外ビジネス情報、引き合い・・等々」とどのブラウザを使っても上手く表示されています。 ところが私のナビメニューは、IE8に合わして作製すると、Chrome、Firefox 、 Safariでは右端のメニューが一段改行されてしまいます。 逆にChrome、Firefox 、 Safariに合わせて作製するとIE8では右端に実寸２ｃｍ程度の余白ができます。 記述はＣＳＳを使ってボタン画像を<A Hhref="****.shtml">○○○</A>を６つ並べているだけです。 画面幅が８５０ＰＸなので６つのボタンが上手くはまるように各ボタンの幅を％で指定しています。（約８４０ＰＸ程度） ジョエトロさんのソースはリストでしたので同じようにしましたが結果は同じでした。 何が悪いのでしょうか？ きずいたことは、IEはChrome、Firefox 、 Safariに比べると全ての表記が多少、縮小されていると思います。 教えて下さい。
- ベストアンサー
- その他([技術者向] コンピューター)
- Win IE5.5～6.0での余白に関するバグ
最近やっと完全スタイルシートによりコーディングをマスターする為に勉強を始め何とかある程度形になるまでコーディングが出来たのですが Win IE5.5と6.0でバグが発生してしまいました。 幅532pxのボックス内に532pxの画像を配置した所右側に1px～2pxの無駄な余白が出来てしまうのです 他のモダンブラウザーでは全て平気なのですがIE5.5と6.0でこの現象が発生してしまいます。画像を添付しましたので症状を見てください。 それと下記アドレスに現在製作中のHTMLファイルとCSSファイルをアップしてありますのでお暇な時にでも覗いていただきアドバイスいただきたくおもいます。 宜しくお願いします ■HTML http://sangoclip.web.fc2.com/test/ ■CSS(レイアウト用) http://sangoclip.web.fc2.com/test/shared/css/default.css ■CSS(デフォルトCSSクリアー用) http://sangoclip.web.fc2.com/test/shared/css/reset.css
- ベストアンサー
- CSS
- リストの左右の余白を調整したい
こんばんは 作成中サイトにて各ページへのリンクを メニューボタンをつくり一列に配置しました ですが marginやpaddingをゼロにしても余白がついてしまい・・・ どうしたら解消できますか？
- ベストアンサー
- HTML
- blogのwrapperの上下に余白が10pxほど空いていますが、つめるにはどうしたらいいでしょうか？
wordpressを使用してブログを作成していますが、wrapperの上下の部分に、10pxほど余白ができてしまっています。 IE5 IE6 FireFoxのいずれでも、余白があるのですが、この余白をつめるには、どうしたらいいのでしょうか？ cssの定義は以下の通りなのですが、これは、cssでは、余白を埋めることはできないのでしょうか？ .wrapper { background: url(images/wrapper.png) repeat-y; position:relative; width:1000px; margin:0px auto 0px auto;
- ベストアンサー
- HTML
- やはり理解出来ません！ブラウザによって変る！
添付画像は、サイトの同一ページの同一部分を実寸大でコピーしたものです。 ナビの部分だけがブラウザによって、どうしてもデザインが変ります。大きくなります。何れもサイトの幅は８５０ＰＸ。 写真画像は問題なく表示されます。 《概要》 ナビ部 ・ＣＳＳでボタンを作製。 ・float:left;を使って横一列。 写真画像 ・JPGファイルを横に並べているだけ。 （特徴） ・特徴としては、文字の両サイドの余裕が大きいです。 ・<LI>にしても結果は同じです。 （添付画像） 上段はナビ部分の貼り付けです。下段は写真画像の貼り付けです。 何れも（上）Chrome、Firefox 、 Safari、（下）IE8 どこが悪いのでしょうか？可也精通された経験者でないと分からないかもしれませんがご指導願います。名と ナビのＣＳＳとソースは次の通りです。 div.navi a{ font-size :12px; border:outset #33ffff 4px; background-color: #3399ff; color:white; margin:0px 0px 0px 0px;/*間隔１*/ padding:0.25em; display:block; width:15%; float:left; } div.navi a:hover{ border:inset #33ffff 4px; } <DIV class="navi a" align="center"> <A href="purchase.shtml">商品の購入方法</A><A href="torihiki.shtml">特定商取引事項</A><A href="question.shtml">ご質問</A><A href="company.shtml">会社概要</A><A href="sightmap.shtml">サイトマップ</A><A href="andlink.shtml">その他リンク集</A> </div> 尚、ORUKA1951さんににおかれましては、以前の見解と違った場合のみご回答願います。成りすましもご遠慮下さいませ。
- ベストアンサー
- その他([技術者向] コンピューター)
- relativeでtop:0pxで配置したのですが、どうしても上に余白ができます。
cssでレイアウトをしていますが、bodyの上にブロックをひとつrelativeでtop:0pxで配置したのですが、どうしても上に余白ができます。 absoluteなら余白はできませんが、中央に配置する方法がわかりません。 よろしくお願い致します。
- 締切済み
- HTML
- ＨＰ作成時の上部の余白について
html+cssを本で勉強している超初心者です。HTML/XHTML&cssという本で指示どうりソースを入力しているのですが、プラウザの画面の上部から約20px程余白が出ます。本の指示でプラウザの画面と 接する形で { margin: 0; } を入力しても移動せず{ margin: -20px margin-left: 0px; }と入力するとプラウザ画面と接します。何が原因か何方か教えて頂けませんか？ よろしくお願いいたします。（IE8です）
- 締切済み
- ブラウザ
- フロートした場合にできる空きを揃えたいのですが。
フロートした場合にできる空きを揃えたいのですが。 見づらいかもわかりませんが、 画像を用意いたしました。 画像の「A」をfloat:left; 「B」をfloat:right;とし、 「C」を下に配置したいと思います。 画像では「C」の横幅は「A」と「B」を合わせた幅と同じになっていますが、 実際には「A」の約半分ですので画像の「C」の約1/4となります。 まず２パターンあるのですが、 「A」「B」「C」のそれぞれの間隔は10pxとしたいということと、 「A」と「B」の間隔は10pxで画像の赤い部分は50pxにしたい場合の2パターンです。 しかしFFとIEで確認すると画像の赤い部分の空きが異なります。 これをそれぞれのブラウザで見た場合に統一させたいのですが、 CSSハックを使用せずに実現できるのでしょうか？ CSSハックを使用しないと不可能なのでしょうか？ この場合に必要なのかどうか分かりませんが、 「C」にclear:both;を記述してみたりしましたが 結果は変わらず各ブラウザで異なりました。 CSSを勉強し始めたばかりでよく分からなくなりましたので 質問させていただきました。 宜しくお願いいたします。
- ベストアンサー
- HTML
お礼
テーブルで囲ってみます
補足
background-color:red 赤にする必要ありますか