Twitterフォローバッジの不具合について解決方法を探しています。

取るに足りない事柄で恐縮ですが、このバッジのソース入手先<http://www.go2web20.net/twitterFollowBadge/>に記載されている指示どおりに行いましたが、バッジが正常に表示されません。右側の上から130ピクセルの位置を指定したソースを取得し所定の位置に挿入したのですが、結果的に、バッジは左側の下部に固定されたままで、ページを最下部までスクロールしないと見えない状態です。私のブラウザはIE8、HTMLファイルはホームページビルダー14を使って作成しています。原因または解決方法をご存じの方、ぜひご伝授くださいませ!!

回答の条件
  • 1人10回まで
  • 登録:
  • 終了:2011/06/10 23:47:37

ベストアンサー

id:pacochi No.1

回答回数247ベストアンサー獲得回数113

IE の「互換モード」という表示モードではスタイルシートの position:fixed が利かないのが原因です。


互換モードで表示されるのを避けるためには、ソース先頭の

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

を、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

に変更するか、もしくは head 内に

<meta http-equiv="X-UA-Compatible" content="IE=edge">

という一行を付け足して下さい。

  • id:pamela007
    すみません。上記URLを訂正いたします。正しくは:http://www.go2web20.net/twitterFollowBadge/ です。
  • id:rouge_2008
    Twitterフォローバッジのコード取得ページでは正しく表示されていますか?
    作成したページのHTMLソースを提示した方が、問題の解決に繋がると思います。
    CSSを使用しているのでしたらそちらも・・・
  • id:pamela007
    rouge_2008様

    早速のご返答ありがとうございます。

    コード取得ページでは、文字も位置もすべて正しく表示されています。
    以下に作成中のHTMLソースを記載します。
    ※ちなみにこれは友人のために作っているページですが・・(^^;

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML lang="ja">
    <HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <META http-equiv="Content-Style-Type" content="text/css">
    <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 14.0.4.0 for Windows">
    <TITLE></TITLE>
    </HEAD>
    <BODY bgcolor="#ffcc99" text="#990000" link="#006600" vlink="#33cc33" alink="#cc33cc" background="imgs/o6b.gif">
    <P><BR>
    </P>
    <DIV align="center">
    <TABLE border="0">
    <TBODY>
    <TR>
    <TD><IMG src="imgs/ttl1.gif" width="780" height="200" border="0"></TD>
    </TR>
    <TR>
    <TD height="10"></TD>
    </TR>
    <TR>
    <TD bgcolor="#ffffff" align="center"><FONT size="4"><B><BR>
    <BR>
    栄養倶楽部のホームページはただいま準備中です<BR>
    <BR>
    もう少々お待ちくださいませ<BR>
    <BR>
    <BR>
    <BR>
    </B></FONT></TD>
    </TR>
    </TBODY>
    </TABLE>
    </DIV>
    <!-- twitter follow badge by go2web20 -->
    <script src='http://www.go2web20.net/twitterfollowbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
    tfb.account = 'eiyouclubbot';
    tfb.label = 'follow';
    tfb.color = '#35ccff';
    tfb.side = 'r';
    tfb.top = 130;
    tfb.showbadge();
    --></script>
    <!-- end of twitter follow badge -->
    </BODY>
    </HTML>
  • id:pamela007
    pacochi様
    ご返答ありがとうございます。

    ご指示くださったとおり、
    <meta http-equiv="X-UA-Compatible" content="IE=edge">を
    head内に埋め込んだところ、問題がきれいに解決しました!!

    本当にありがとうございました。感謝しています(o^-^o)

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません