• 締切済み

IEでは見れますが、FIREFOXでは異変が多々あります。。

私は今、ブログを持っているんですが 最近になって、よく報告を頂きます それは、IEでは問題ないのですが FIREFOXで見ると、真ん中のメニューがずれて サイドバーの文字も異常なほどに 文字が大きくなり、重なって見えなくなってしまいます。というものです。 CSSやトップページなどのデザインも 変えていないので、状況がよく分かりません。 今までIE基準でやってきたのでFIREFOXに 関しては、知らずにやって来たので 今頃になって、悩んでいます。 トップページのデザインでは <!--サイドメニュー右--> <div id="links2"> <$PluginList_B$> <div class="powered"> <a href="<$LDBlogUrl$>"><img src="<$LDBlogLogo$>" width="117" height="28" border="0" alt="livedoor Blog"></a> </div> <div class="syndicate"> <a href="<$RSSUrl$>">Syndicate this site (XML) </a> </div> </div> <!--サイドメニュー右ここまで--> のようになっています。 CSSではこのようになっています /* サイドメニュー右 */ #links2{ position:absolute; width:188px; top:140px; right: 5px; margin: 0; padding:0; } ここで数字をいじってしまうと IEのほうが次はずれてしまうんです。。 理由がよく分からなくて、このままだと せっかく集客しても、逃げてしまうので どうにかしたいです。 ご存知の方がいらっしゃたら ご教授いただければと思います。

  • rg250
  • お礼率35% (7/20)

みんなの回答

  • Muller3
  • ベストアンサー率81% (800/979)
回答No.4

XML宣言もDOCTYPE宣言もないのは最初からでしょうか? とりあえず、IEとFirefoxの表示の違いの多くは、IE6のCSSバグによるものです。 もしIE6をお使いでしたら、それを基準とすることがまず間違いです。IE6は利用者は多いですが、IE6に合わせれば、IE6でしかまともに見られないサイトになってしまいます。 Firefox基準で作成し、IE6の見栄えを調整するのが一般的です。 「IE6 CSSバグ」で検索してみてください山ほど出てきますので。その中から地道に原因を探っては。

  • nobrain
  • ベストアンサー率39% (29/73)
回答No.3

文字サイズがでかすぎるだけ。

  • butousan
  • ベストアンサー率0% (0/3)
回答No.2

Mozilla Firefox で見ました。 これも「情報商材レビュー&・・・・・」 への誘導の一方法でしょうか?

  • globef
  • ベストアンサー率17% (1306/7306)
回答No.1

 FIREFOX持っている人なら 「IEのプラグイン」入れているから見れると思いますが...

関連するQ&A

  • ネスケとIEを同じ表示にしたい

    文字をborderで囲ったものを二列に6つずつ並べて、サイトのメニューとして 使っています。 HTMLを以下のように記し、↓ <div> <span class="menu"><a href="#">AAA</a></span> <span class="menu"><a href="#">BBB</a></span> …… </div> <div> <span class="menu"><a href="#">CCC</a></span> <span class="menu"><a href="#">DDD</a></span> …… </div> これをcssで以下のようにしているのですが、ネスケで上手く表示されません 。 .menu { font-size: 13px; text-align: center; margin: 2px; border:1px solid gray; width: 97px; height: 15px; color: #808080; } どうも、marginとwidth、heightが反映されていないようなのですが、これを ネスケでも反映させるにはどうしたらいいでしょうか。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 背景画像へのリンク

    CSSで背景画像をリンクさせているのですが 文字が出てきて困っています。 ソースは以下の通りです。 文字が出ないようにするにはどうしたらいいのでしょうか。 <div id="side"> <div class="menu_content"> <ul class="menu"> <li class="menu_top"><a href="index.html">トップページ</a></li></ul> </div> </div> .menu_content li{display:block; text-indent:-9999px; font-size:0px; width:206px;height:68px; text-indent:-9999px;} li.menu_top a{display:block; width:406px;height:128px; text-indent: -9999px; background:url("css/menu_top.gif") bottom left no-repeat;}

  • CSSでの横位置指定:IE6の表示について

    初心者です。宜しくお願い致します。 テーブルを使わず、画像の下にテキストが入った2つのboxを、中央に表示させたいのですが、IE6だけうまくいきません。 ソースは以下です。 ■HTML ---------------------------------- <div id="list"> <div class="list_top"> <div class="list_title">タイトル</div> </div> <div class="list_cont"> <div class="list_photo"> <img src="g"width="130" height="150" border="0" /></a> <a href="">AAAAAAAA</a> </div> <div class="list_photo"> <img src="g"width="130" height="150" border="0" /></a> <a href="">AAAAAAAA</a> </div> </div> </div> ■CSS ---------------------------------- #list { FLOAT: right; MARGIN: 5px 4px 5px 6px; WIDTH: 315px; HEIGHT: 300px; BORDER: #000000 1px solid; } .list_top { PADDING-RIGHT: 0px; PADDING-LEFT: 5px; BACKGROUND: url() left top; PADDING-BOTTOM: 0px; PADDING-TOP: 9px; HEIGHT: 24px; } .list_cont { padding:0px 0px 0px 25px; BACKGROUND: url() left top; } .list_photo { FLOAT: left; MARGIN: 7px; WIDTH: 130px; } 以上です。 CSS側の 【.list_cont { padding:0px 0px 0px 25px;】 上記の指定で、Firefoxと、IE7では中央に表示できるのですが、 IE6のみずれてしまいます。 長くなり申し訳ありません。宜しくお願い申し上げます。

    • ベストアンサー
    • HTML
  • IEとFireFoxでの指定位置のズレに困っています。

    IEとFireFoxでの指定位置のズレに困っています。 cssでポップアップを施した部分についてなんですが、IEだと思った通りの位置に出てくるんですけど、FireFoxだと全然違った位置に出てきてしまいます。 ネットで色々調べて、知る限りの事を全てやってみましたが、結局一週間も無駄に過ごしています。だれか助けてください(ΩДΩ) ちなみに以下がそのcssとhtmlです ■css■ .popup img.pop { display:block; top:-10000px; left:-10000px; position:absolute; } .popup a:hover { position:relative; } .popup a:hover img.pop { top: -290px; left: -68px; } ■html■ <DIV class="popup" align="center"><SPAN><a href=""><img class="pop" width="260" height="243" src="1.gif"/><IMG width="103" height="111" src="image1.jpg" border="0"></a></SPAN></DIV> 何をどう書き足したらFireFoxでもきちんとした場所に出てくるようになるんでしょうか? どうぞよろしくお願いしますm(。-_-。)m

    • ベストアンサー
    • HTML
  • CSSでIEとFirefoxでの表示の違い

    IE6とFirefox2.0で試しています。 次のように、naviでborderを使うとIE6では普通に表示されるのですが、 Firefoxだと右側にborderのサイズの2倍分くらいはみ出てしまいます・・・ 両方に正常(希望通り)に表示されるようにするには どのような記述にすれば良いのでしょうか? 「sample.css」 .wrapper { background-color: #ccffcc; margin: auto; width: 600px; height: 100%; } .navi { background-color: #aaffaa; border: 3px solid #ff4500; width: 600px; height: 150px; position: relative; } 「a.html」 <html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <div class="wrapper"> <div class="navi"> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • CSSとHTMLのページ。IEとFirefoxでデザインが崩れてしまいます;;

    Firefoxだと、右上のフォーム部分がバナーの隣に来るのですが IEだとなぜかフォーム部分が下に来てしまいます。原因と対処法を教えてください。 FirefoxはCSSに厳格だと聞いたのですが、IEが曖昧なためになってしまったのでしょうか? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <link rel=stylesheet type="text/css" href="1.css"> <link rel="shortcut icon" href="favicon.ico"> <title>aaaaa</title> </head> <body> <div class="box"> <div class="top1"> <img src="aaa.jpg" width="468" height="60" alt="バナー"> </div> <div class="top2"> ああ <form method="get" action="あああ" style="margin-top:0em; margin-bottom:1em"> <input type="text" name="word" size=40 value=""><input type="submit" value="検索"><input type="hidden" name="line" value="10"> <input type="hidden" name="indi" value="0"><input type="hidden" name="act" value="search"></form> </div><div class="end"></div> <div class="bar"> <div class ="menu"><a href="./">HOME</a></div> <div class ="menu"><a href="about.htm">ABOUT</a></div> <div class="end"></div></div><div class="end"></div> <div class="side"> サイド </div> <div class="main"> メイン </div><div class="end"></div> </div></body> </html> 以下CSS @charset "utf-8"; /* ------------------------------ 基礎設定 ------------------------------ */ body {font-size:0.875em; margin:0; padding:0; line-height:1.4; color:#c0c0c0; background:#000000; background-image: url("back.jpg"); background-repeat: no -repeat; background-position: 99% 95%; background-attachment:fixed; text-align:center; margin:0 auto 0 auto;} img {border:0;} address {font-style:normal;} /* ------------------------------ ページ枠組み設定 ------------------------------ */ .box {width:800; margin:0 auto 0 auto; text-align:left;} .main {width:80%; float:left; text-align:left; font-size:0.875em;} .side {width:20%; float:left; text-align:left; font-size:0.875em;} .top1 {width:50%; float:left; text-align:left; font-size:0.875em;} .top2 {width:50%; float:left; text-align:right; font-size:0.875em;} .bar {width:100%; height:41; text-align:center;} /* ------------------------------ クリアの設定 ------------------------------ */ .end {clear:both;} .end hr {display:none;} /* ------------------------------ メニューの設定 ------------------------------ */ .menu a{display:block; width:96px; color:#c0c0c0; background:url(menu-img/menu1.jpg) no-repeat; height:41px; line-height:43px; text-decoration:none; text- align:center; font-size:0.9em; font-weight: bold; float:left; font-family:verdana,arial,sans-serif;} .menu a:hover{color:#e9e9e9; background:url(menu-img/menu2.jpg) no-repeat;}

    • ベストアンサー
    • HTML
  • IE6/ブロック要素のliで入れ子がある場合に改行のような余計なマージンが入る

    タイトルの通りなのですが、 左側サイドにタブメニューを設置しようとしているのですが、 IE6のみ、余計な改行のようなマージンが入ってしまいます。 色々と調べたのですが、どうしても解決できなかったので、お知恵をお貸しいただければと思います。 HTMLは以下のように書いています。 ==== <div id="menu"> <ul id="navi-block"> <li><a href="#" onmouseover="MM_showHideLayers('p0','','show')" onmouseout="MM_showHideLayers('p0','','hide')">メニュー名</a> <div id="p0" class="set"> <ul> <li><a href="#">メニュー名</a></li> <li><a href="#">メニュー名</a></li> </ul> </div> </li> <li><a href="#" onmouseover="MM_showHideLayers('p1','','show')" onmouseout="MM_showHideLayers('p1','','hide')">メニュー名</a> <div id="p1" class="set"> <ul> <li><a href="#">メニュー名</a></li> <li><a href="#">メニュー名</a></li> </ul> </div> </li> </div> ==== CSSは以下のように書いています。 ==== #menu { width:218px; position:relative; z-index:2;} ul#navi-block {list-style:none;} ul#navi-block li a {display:block;width:175px; height:30px;margin:0;padding:0.75em 25px 0 20px;background: url(../images/marker_square_gray_navi.gif) right center no-repeat;border-top:#CCCCCC 1px solid;} div#p0 {left:220px; top:0;} div#p1 {left:220px; top:0;} .set { width:220px; position: absolute; visibility: hidden; z-index:3;} ====

    • ベストアンサー
    • CSS
  • FireFoxでvisitedの表示不具合について

    HTMLやCSSに知識がなく困っています。 質問をよろしくお願いいたします。 メニューバーには8つのボタンがあるのですが FireFoxでは、visitedが表示されず IEはページの行き来でメニューボタンが消失します。 何か解決法はありませんでしょうか? よろしくお願いいたします。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン7つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul>  <li><a href="../new/top.html" target="main" class="c"></a></li>  <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>

  • 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
  • CSSの左右よせのマージン、IEとFirefoxで表示が違う

    CSSの左右よせのマージンについて、どうしても原因が分からない事があるので質問します。 下記ファイル(マージンが分かるようにボーダー設定してます) -----------htmlファイル-------------- <html> <head> <title>CSSテスト</title> <link href="test1.css" rel="stylesheet" type="text/css"> </head> <body> <div class="sotowaku"> <div class="main_l"> 左側の写真です。 </div><!--end main_l--> <div class="main_r"> 右側の本文です。 </div><!--end main_r--> <div class="clear"><br></div><!--clear--> フッター </div><!--end sotowaku--> </body> </html> ------------------------------------- -------------cssファイル------------- body { text-align: center; margin: 0px; } .sotowaku { width: 700px; margin: 0 auto; border: solid 1px #999999; } .main_l { width: 150px; float: left; margin-top: 0px; margin-left: 25px; border: solid 1px #999999; } .main_r { width: 490px; float: right; margin-top: 0px; margin-right: 10px; border: solid 1px #999999; } .clear { clear: both; } ------------------------------------- をIEとFirefoxでプレビューすると 中央700pxの幅の中に |25px|写真150px|25px|本文490px|10px| となるはずなのに、 IE6では左25pxと右10pxのマージンが大きく(倍くらいになってます)、左右のメインが重なってしまいます。 Firefoxではちゃんと表示されます。 どこか記述がおかしいのでしょうか。 マージン設定はしないほうがいいのでしょうか。 どうすればIEでもちゃんと表示されるようになるでしょうか。 いろいろいじりましたが分からないので、お教えいただければありがたいです。よろしくお願いします。

    • ベストアンサー
    • HTML