- 締切済み
IEでの表示のバグの修正
IEでの表示のバグの修正 サイト構築をしているのですが、インターネットエクスプロラーで見ると、 ・table の margin:0 auto が効かない。 ・左の table セルの li と li の間にマージンかパディングができている。 ・中央の table セルの li の位置指定が効いていない。 その他にもいろいろバグがみられると思います。 どのように対処したらいいでしょうか。
- y-sira
- お礼率60% (6/10)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- JidousyaGaisya
- ベストアンサー率23% (45/189)
関連するQ&A
- ページ全体を中央に表示したい
ページ全体を中央に表示したいので http://www.1uphp.com/con2/layout/bodycenter.html の通りにコードを張り付けたのですが、全体が若干左に寄ります。 どこを修正すればいいのでしょうか？ body { margin:0px; /* ページ全体のmargin */ padding:0px; /* ページ全体のpadding */ text-align:center; /* 下記のautoに未対応用のセンタリング */ } #main { margin-left:auto; /* 左側マージンを自動的に空ける */ margin-right:auto; /* 右側マージンを自動的に空ける */ text-align:left; /* 中身を左側表示に戻す */ width:650px; /* 幅を決定する */ } この通り貼り付けました。
- ベストアンサー
- HTML
- IE6の背景がずれる。
IE6で 外枠の#containerにmargin:0 auto;を指定して ブラウザを最大表示すると 1pxほど左にずれて右にホワイトスペースができてしまいます、、 firefoxやoperaではちゃんとセンタリングされたのですが IE6&7ではズレてしまいます。 これってIEのバグなんでしょうか？ 対処の仕方を教えていただきたいです。 よろしくお願いします。
- 締切済み
- HTML
- CSSでの中央揃え
CSSでの中央揃え googleで表示させる為にCSSでページレイアウトとしているのですが、ページ全体（云わばbody）が左寄りのままであり、画面中央に配置することができません。 様々な質問を見ていると「text-align:center」はIEのバグでIEでしか表示されないとの事で・・・ マージンを変更し、左から右のみに動かしていましたがそれではウィンドウを縮小させたときに右側のマージンを変えていないので、間隔のあいた左側が出てしまいスクロールするはめになります（しかも右側はピッタリレイアウト面がウインドウ端についている） 右側のマージンの値も変更はしてみましたが、左側のようにいかずに命令自体スルーされます width:700px; margin-right:auto; margin-left:auto; } ↑コレとか 説明があやふやすぎて分かりにくい事は謝罪しますが、心当たりがある方がいましたらご教授お願いします
- 締切済み
- CSS
- 【IE6にて】あるはずのない文字が表示されてしまいます。
タイトル通り、HTMLに記述してい以上の文字が表示されてしまいます。 以下がHTMLの記述の一部です。 <ul> <li><a href="http://…">●●●●●●</a></li> <li><a href="http://…">●●◆◆</a></li> </ul> この箇所のCSSは文字サイズとmarginを設定しています。 そして上記の内容をサイト上で見ると下のように表示されてしまいます。 サ| |サ イ| |イ ト| |ト 左| ●●●●●● |右 端| ●●◆◆ |端 | ◆◆ | | | 上のように右端の◆◆部分だけが左下にさらに表示されます。 試しにこの◆◆の上にマウスカーソルを置いてみると ひとつ前に出てきた●●◆◆と◆◆が１つのリンクであると認識されます。 firefox、opera、IE7,8では通常通り表示されるので、IE6のバグだとは思うのですが…。 長くなりましたが解決策があればよろしくお願いします。
- ベストアンサー
- HTML
- 文字を中央表示にしたいのですが
文字を中央表示にしたいのですが、真ん中より右側にずれてしまいます。 タグのどこが悪いのかわかりませんので、教えていただけませんでしょうか。 ＜HTMLタグ＞--------------------------------- <table cellpadding="0" cellspacing="0" id="image"><tr><td valign="bottom"> <ul> <li><a href="home.html">ホーム</a></li> <li><a href="access.html">アクセス</a></li> <li><a href="info.html">お問い合わせ</a></li> </ul> </td></tr></table> -------------------------------------------------- ＜cssタグ＞-------------------------------------- #image{ border:none; background:url('img/bannar.bmp') no-repeat left top; margin-left: auto; margin-right: auto; width:600px; height:258px; text-align: center; } #image td{ margin:auto; } #image ul{ list-style-type:none; } #image li{ width:150px; margin:10px; padding:0; background-color:#fff; font-size: 14px; text-align:center; text-decoration:underline; } ----------------------------------------
- ベストアンサー
- HTML
- IE８ではtext-align: center;でdivタグが中央にならない。改善策は？
IE８ではtext-align: center;でdivタグ又はbodyが中央にならなくなってしまったので、修正方法を探していたところ、以下の質問・回答履歴を見つけました。 http://oshiete1.watch.impress.co.jp/qa4989799.html 上記の回答履歴では最終的にNo.6さんの以下の回答で問題が解決されています。 CSSでは以下のように記述： div.center { width: 80%; margin-right: auto; margin-left: auto; } HTMLではセンタリングさせたいdiv要素を以下のように記述： <div class="center">文章等<div> ＜質問1＞ ここで私の質問ですが、なぜ上記の回答では<div class="center">文章等<div> を中央に表示するためにCSSにwidth: 80%;が必要なのでしょうか（width: 80%はdivタグのセンタリングには特に必要ないのですか？なぜ、width: 80%が記述されているのか分かりません。）？この80%という値はどこから導き出されたのでしょうか（なぜ、例えば60%、70%等ではだめなのですか？）？ また、bodyタグをセンタリングしたい場合は、どうですか？CSSにwidth: 80%;が必要なのでしょうか？ ＜質問２＞ 「margin-right: auto;とmargin-left: auto;」以外にもmargin:0 autoという方法が他のサイトで紹介されていましたが、「margin-right: auto;とmargin-left: auto;」を使用した場合とmargin:0 autoを使用した場合の表示結果は全く同じなのでしょうか？margin:0 autoの場合、上下のマージンも0（無し）となるので、その点で上下のマージンを指定していない「margin-right: auto;とmargin-left: auto;」と異なるように思いますが？「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoを使用する場合、他方を使用することに比べてメリット及びデメリットはあるのでしょうか？ また、もしも、「margin-right: auto;とmargin-left: auto;」の代わりにmargin:0 autoを使用する場合、記述は以下で正しいのでしょうか？ ＜divタグをセンタリングしたい場合＞ CSSでは以下のように記述： div.center { width: 80%; margin:0 auto } 上記の記述で div.center { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？ ＜bodyタグをセンタリングしたい場合＞ CSSでは以下のように記述： body { width: 80%; margin:0 auto } 上記の記述で body { width: 80%; margin-right: auto; margin-left: auto; } と全く同じ表示になるのでしょうか？ ＜質問3＞ IE6又はそれ以前のIEは、「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoではDivタグをセンタリングできず、text-align: center;を使用する必要あったような記憶があります。IE7/8に加えてIE6又はそれ以前のIEにおいても<div class="center">文章等<div>をセンタリングしたい場合、どのような記述となりますか？ 以下のように「margin-right: auto;とmargin-left: auto;」又はmargin:0 autoをtext-align: center;と同じ場所に記述する方法はうまくいかないようですが。私の記述方法が悪いだけですか？ { text-align: center; margin-right: auto; margin-left: auto; } 又は { text-align: center; margin:0 auto; } 関連サイト等あれば、そちらも教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- ＷordPress バグなのかな？
ＷordPressのバグですか？ 外観 / テーマ編集 / スタイルシートで繰り返しスタイルを変更していました。 すると、ブラウザ（IE8）にCSSが適用されなくなりました。 Firefoxでは適用されています。 /*-- 効かなくなったスタイルは以下になっています。 --*/ div#container { margin: 0 auto; } 以上、よろしくお願いします。
- ベストアンサー
- CSS
- 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
- IE6とFirefoxの表示の違い
どうか教えてください。 IE6とFirefoxでの表示結果が違うのですが、同じにするには どうすればいいのですか？ Firefoxでは文字の背景色の赤が上下にでてるし、IE6は左のボックスが 下にくっついているし、それと、A Bにかけた margin:10px;なのですが、10pxマージンとれてますかね？ よろしければ教えてください。 【html】 <body> <div id="container"> <div id="A"> <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p> </div> <div id="B"> <p>ああああああああああああああああああああああああああああああ</p> </div> </div> </body> 【CSS】 body{ font-size:20px; } #container{ background:#000; width:600px; overflow:auto; } #A{ float:left; width:200px; background:#ff0000; margin:10px; } #B{ width:200px; float:right; background: #ff0000; margin:10px; }
- 締切済み
- CSS
お礼
どうしようもないですか・・・。 MSなんて・・・。 がんばります。