• 締切済み

FC2ブログの表示がIEとFirefoxで異なる

FC2ブログの表示がIEとFirefoxで異なる プラグイン2(記事右側)にフリースペースを設置、 そしてそのフリースペースにRSSフィードを設置したところ、 IEではスペース内に中央表示されるのですが、 FirefoxやOperaでは中央より少し左側にずれて表示されてしまいます。 (ずれて表示されるのはココだけ) ちなみにこのRSSフィードのHTMLはこちらのサイト http://www.seotaisaku.com/smoplus/rssplus.html からコピペしたものをフリーエリアにそのまま貼り付けました。 参考までにHTMLとスタイルシートを記載させていただきます。 【HTML】 <div id="right"> <!--plugin--> <!--plugin_second--> <div class="plugin2_outline"> <div class="plugin2_title ta_<%plugin_second_talign>"><%plugin_second_title></div> <div class="plugin2_body ta_<%plugin_second_align>"> <!--plugin_second_description--> <div class="p2u_description ta_<%plugin_second_ialign>"><%plugin_second_description></div> <!--/plugin_second_description--> <%plugin_second_content> <!--plugin_second_description2--> <div class="p2d_description ta_<%plugin_second_ialign>"><%plugin_second_description2></div> <!--/plugin_second_description2--> </div><!--/plugin2_body--> </div><!--/plugin2_outline--> <!--/plugin_second--> <!--/plugin--> 【スタイルシート】 .plugin2_outline { border-top: #f6f6f6 0px solid; border-right: #f6f6f6 0px solid; border-bottom:#f6f6f6 0px solid; border-left: #f6f6f6 0px solid; margin-bottom:10px; } .plugin2_title { font-size:10pt; font-weight:normal; color:#000000; background-color:#f6f6f6; border: #d3d3d3 1px solid; padding:2px 15px; } .plugin2_body { font-size:10pt; color:#000000; background-color:#f6f6f6; border-top: #f6f6f6 1px solid; border-left: #d3d3d3 1px solid; border-right: #d3d3d3 1px solid; border-bottom:#d3d3d3 1px solid; padding:5px 5px 5px 5px; line-height:1; } .p2u_description { margin-bottom:7px; } .p2d_description { margin-top:7px; } 以上になります。 長文になりましたが最後まで読んでいただきありがとうございます。 解決策が解る方がいらっしゃいましたら、ご回答の程よろしくお願いいたします。 HTMLなどの知識が浅いので解りやすく回答していただけたら大変助かります。

みんなの回答

noname#140925
noname#140925
回答No.1

IEは、ちゃんとIE8を使用していますか? もしIE8よりも前の古い物は、スタイルシート規格を無視して独自解釈しています。 なので、規格の標準仕様通りに解釈するIE8やFirefoxやOpera等で表示するのと、古いIEで表示するのでは見え方が異なりますが、間違えているのは古いIEの方なので、標準仕様に合わせて作成してください。 全世界的に古いIEを排除する方向で動いていますので、もし古いIEを使用しているのなら、さっさとIE8にアップグレードしましょう。

hippelaphos
質問者

補足

skyfang様ご回答まことにありがとうございます。 IEのバージョンを確認しましたところバージョンはIE8でした。

関連するQ&A

  • CSSでページ作成、Firefoxでうまく表示できません

    ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート(左:メニュー、右:内容)のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header"> ヘッダー </div> <div class="left"> メニュー </div> <div class="right"> 内容 </div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • FirefoxとNetscapeについて

    こんにちは。 HTMLとCSSでホームページ作成をしています。 タイトルの部分に画像を挿入し、その下に<p>で文を入れて、背景色を指定したところ、IEではきちんと画像が表示されたのですが、 FirefoxとNetscapeでは、<p>で指定した背景色によってタイトルの画像が消されてしまいます。(画像はまったく見えない状態です) 色々考えてみたのですが、解決できませんので、 ご存知の方がいらっしゃいましたら教えていただけませんか? よろしくお願いします。 スタイルシート div.title { width: 700px; border-bottom: 1px solid #d3d3d3; margin: 0px; padding: 0px; float: left; } p.gomikuzu { text-align: left; background-color: #0033cc; color: #ffffff; font-size: 80%; padding: 2px 15px; margin: 0px; position: relative; } HTML <div class="title"><img src="title1.png" width="700" height="80" alt=""></div> <p class="gomikuzu"> HOME</p>

  • CSS 左右違う大きさのボックスでheightを合わせたい

    外部CSSでHPを作成しています。 基本的なことかと思いますが、調べてもどうしてもうまくいかないので 皆さまのお力をお貸しください。 左右にボックス(で良いのでしょうか?)を置き、その中にテキストを入れています。 それぞれ文字数が違うためheightのサイズがばらばらのため、現在指定していません。 固定すれば解決しそうですが、縦には数十個のボックスを並べているのでできません。 どのようにしたら文字数の少ないボックスを、文字数の多いボックスに合わせられるのでしょうか? また、テキストを何も入れていない状態で、左右のheightがずれているのはなぜなのでしょうか? どうぞご教授ください。 よろしくお願い致します。 /*CSSファイルの記述*/ .waku1{ border : solid 1px #999999; border-bottom: none; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku2{ border : solid 1px #999999; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .waku3{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; width :150px; float : left; background-color : #e8e8e8; line-height: 160%; } .waku4{ border : none; border-bottom: solid #999999 1px; border-top: solid #999999 1px; border-left: none; border-bottom: none; width :335px; line-height: 160%; word-break: break-all; } .clear{ clear : left; } /*HTMLファイルの記述*/ <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku1"></div> <div class="waku2"></div> <div class="clear"></div> <div class="waku3"></div> <div class="waku4"></div> <div class="clear"></div>

    • ベストアンサー
    • HTML
  • ieとfirefoxでdiv枠に2pxのズレ

    宜しくお願い致します。 現在下記のHTMLを作成致しましたが、CSSにてfirefoxとchomeに合わせると ieではdiv枠が2px程左右にズレが生じてしまいます。ieに合わせると逆の現象が生じます。 何が原因なのか判りません。宜しくご教示下さい。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <style type="text/css"> .clear {clear:both; } .clear hr {display:none;height:0px;font-size:0pt; } #wrap {width:810px; text-align:center; margin:0px auto;} #header{font-size:70%;color:green;margin-top:5px;text-align:center;} #menu {width:200px;height:auto; float:left;margin:0;position: relative;} #goods {width:600px;height:auto; float:right;margin:0;position: relative;} #top-title { width:200px;height:70px; float:left; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} #top-menu { width:600px;height:70px; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #336600;position: relative;} /* position: relative削除したり widthの値を%にしたり色々試してみましたが??? */ .col_01_l{width:295px;height:310px;position: relative; float:left; margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_01_r{width:295px;height:310px;position: relative; float:right;margin-bottom: 5px;background-color:#ffffee;border:solid 1px #336600;} .col_05 {width:200px;height:auto; float:left; margin-bottom: 8px;background-color:#ffffee; border:solid 1px #336600;} .col_06a {width:600px;height:auto; float:right; margin-bottom: 10px;background-color:#ffffee; border:solid 1px #000000;position: relative;} </style> </head> <body> <div id="wrap"> <div id="header"> </div><!-- /header --> <div id="goods"> <div id="top-menu"> </div><!-- /top-menu --> <br style="clear:both;"> <div class="col_06a"> <br><br> </div> <br style="clear:both;"> <div class="col_01_l"> <p>ブラウザieではずれませんが、 chrome、firefoxで、この枠が 右に2pxにずれる。 どのように直せば良いか具体的にご教示下さい。</p> </div> <div class="col_01_r"> <br> </div> <br style="clear:both;"> </div><!-- /goods --> <!-- ################################################################################## --> <div id="menu"> <div id="top-title"> <br> </div> <br style="clear:both;"> <div class="col_05"> <br><br> <br><br><br><br> <br><br><br><br> <br><br><br><br> <br><br> </div><!-- /col_05 --> <br style="clear:both;"> </div><!-- /menu --> <br style="clear:both;"> <!-- ################################################################################## --> </div><!-- /wrap --> </body> </html>

    • ベストアンサー
    • CSS
  • Firefoxで表示できるgifファイルがIEでは表示されません。

    http://www.f-morys.com のトップページのwhat's newの下の部分なのですが、 Firefoxで表示できるgifファイル(矢印)がIEでは表示されません。 ぜひご教授ください。 ちなみに テンプレートは <div id="entry01"> <h3>What's new</h3> <div class="entry-inner"> <MTTopLevelCategories> <h4 class="redcc3300"> <$MTCategoryLabel pmhc=""$></h4> <ul> <MTEntries with Subcategories lastn="3"> <li> <$MTEntryDate$>&nbsp;<a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>詳細ページへ"><$MTEntryTitle$></a></li> </MTEntries with Subcategories> </ul> </MTTopLevelCategories> </div> </div> CSS部分は /* ---------- entry ---------- */ div#entry01 { width:92%; margin-left:23px; margin-bottom:0px; } div#entry01 h3 { font-size:12px; text-indent:0px; color:#333333; background:#FFCCCC; height:15px; margin-bottom:0px; } div.entry-inner { color:#000000; background-color:#ffffff; padding-top: 5px; padding-left: 3px; padding-right: 5px; padding-bottom: 8px; } div.entry-inner ul { list-style-type:none; } div.entry-inner li { padding:7px 5px 3px 25px; margin-bottom:3px; font-size:80%; font-weight:normal; text-align:left; color:#000000; background:#ffffff url(<$MTBlogURL$>images/ya.gif) no-repeat 10px 7px; border-bottom:1px solid #efefef; } です。

  • ホームページビルダーでスタイルシートを使ったのですが?

    今、ホームページビルダーで簡単な2カラム(右メニュー)のテンプレートを作っています。 質問ですが、メニューバー(サイドバー)に色を付けたくて、画像を使う事にしました。 <div class="main">に画像(background.gif)を入れ属性で繰り返す(垂直方向)にチェックをいれたのですが、IEやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか? よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにh1</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }

  • floatとclearを使ったレイアウト作成について

    http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Web</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。

    • ベストアンサー
    • HTML
  • liタグのナビボタンがFirefoxで二重に表示。

    liタグでナビボタンを縦に3つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは2段めから2つずつ表示してしまい5つのナビボタンになってしまいます。どのように記述すれば良いのでしょう? <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }

    • ベストアンサー
    • CSS
  • 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
  • IE6 と IE7 のmargin幅が違い、とても困っております。

    お分かりになる方 どなたか助けてほしいです。 2点ございます。 (1) こちらをご覧ください。 http://pandeiro.jp/suda/index.html 靴の画像が9つ並んでいるのですが、 IE7だと、靴の上のマージンは、2px なのですが、 IE6だとなぜか5pxくらい空いてしまいます。 (2) http://pandeiro.jp/suda/shoes/spring/index.html 右上の小さな4つのメニューですが、 <div id="menu2"></div>で4つを囲っておりまして、 border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #000000; で黒いボーダーを引いているのですが、 IE7だと上の4つの画像とくっついているのですが、 IE6だと相変わらず 3PXほどの空白が生じてます。 どうか、よろしくお願いいたします。