取るに足りない事柄で恐縮ですが、このバッジのソース入手先<http://www.go2web20.net/twitterFollowBadge/>に記載されている指示どおりに行いましたが、バッジが正常に表示されません。右側の上から130ピクセルの位置を指定したソースを取得し所定の位置に挿入したのですが、結果的に、バッジは左側の下部に固定されたままで、ページを最下部までスクロールしないと見えない状態です。私のブラウザはIE8、HTMLファイルはホームページビルダー14を使って作成しています。原因または解決方法をご存じの方、ぜひご伝授くださいませ!!
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">
という一行を付け足して下さい。
コメント(4件)
作成したページのHTMLソースを提示した方が、問題の解決に繋がると思います。
CSSを使用しているのでしたらそちらも・・・
早速のご返答ありがとうございます。
コード取得ページでは、文字も位置もすべて正しく表示されています。
以下に作成中の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>
ご返答ありがとうございます。
ご指示くださったとおり、
<meta http-equiv="X-UA-Compatible" content="IE=edge">を
head内に埋め込んだところ、問題がきれいに解決しました!!
本当にありがとうございました。感謝しています(o^-^o)