« 2008年09月 | メイン | 2008年12月 »
2008年10月10日
CSSとJavaScriptで本文HTMLをタブ切り替え
タブで切り替えて、同一HTML内のコンテンツを切り替える方法として、
たつをさんのページのスクリプト
≫ CSS と JavaScript でタブ切り替え
を参考に構築していたのですが、ページのフッターの下に謎の余白が・・・。
いろいろなサイトを見ていたら、コンテンツの表示・非表示にvisibilityを使っているのが原因のようだったので、下記の太線箇所を、displayに変更。
------------------------------------------
function seltab(bpref, hpref, id_max, selected) {
if (! document.getElementById) return;
for (i = 0; i <= id_max; i++) {
if (! document.getElementById(bpref + i)) continue;
if (i == selected) {
document.getElementById(bpref + i).style.display = "inline";
document.getElementById(bpref + i).style.position = "";
document.getElementById(hpref + i).className = "open";
} else {
document.getElementById(bpref + i).style.display = "none";
document.getElementById(bpref + i).style.position = "absolute";
document.getElementById(hpref + i).className = "close";
}
}
}
--------------------------------------------------------------
とりあえず、IE6,7,FF3,Safari3で動作確認済み。
タブに使うul,liタグもCSSで画像化出来、ソースもあまり複雑でないので、使いまわしの利きそうな技です。
投稿者 yossy : 13:21 | コメント (0) | トラックバック
2008年10月01日
utf-8のMTBlogのcssがIE6で上手く読み込まれない
MovableTypeでutf-8の文字コードで作成したブログをIE6で見たら、上手くCSSが読み込まれない状態でした。
Firefox、IE7でも読み込めるのでIE6独自のバグのようです。
解決法は下記リンクから。
≫ なぜかウェブページの文字コードをUTF-8にするとIE6環境でアスキーアートが崩れます。