クロスブラウザの実験場

「サイドメニューの折りたたみ」
http://www.koikikukan.com/archives/2005/08/24-235656.php​
これをFC2ブログでやるための補足。

「１．Ajax用JavaScriptライブラリのダウンロード」

ダウンロードすると、たくさんフォルダとファイルがあるけど、

controls.js
effects.js
prototype.js

使うのはこれだけ。これをファイルアップロードする。

「４．１ protptype.js を修正する」

「prototype.js」の記述が変わっている。

show: function(element) {
$(element).style.display = 'block';
return element;
},

とする。

「６．テンプレートの修正」
<$MTBlogURL$>部分は、ファイルアップロードしたファイルのパス（URL）に置き換える。

次にテンプレートに個別の属性idを使ってスクリプトを入れていく。
クリックする部分のタグに、属性「id="○○name"」※1
隠す部分のブロック要素のタグに、属性「id="○○list"」※2
そして、ブロック要素が終了した場所に、
<script type="text/javascript">
FoldNavigationSlowly('○○','on',false);
</script>
を入れる。※3

※1、※2、※3の○○には、同じ文字列を入れなければいけない。
また、○○に入れる文字列は、折りたたみたい項目ごとに個別のものを設定する。
例えば、「カテゴリ」だったら「cat」、月別アーカイブだったら「month」とか。項目毎に違っていれば何でもいい。


プラグインカテゴリを使っている場合、処理がループなので、個別の属性をどう設定するかなのだが。
単変数<%plugin_first(second,third)_no> - プラグインの通しNoを表示
を使えばよい。

<!--plugin_first-->
<h2 class="***" id="<%plugin_first_no>name"><%plugin_first_title></h2>
<div class="***" id="<%plugin_first_no>list">
プラグインの内容（隠す）部分
</div>
<script type="text/javascript">
FoldNavigationSlowly('<%plugin_first_no>','on',false);
</script>
<!--/plugin_first-->

こんな感じ。

いよいよIE6のバグ対策です。


この見え方を見ていると、イメージ部分の余白が他のブラウザよりも多い状態です。
もしかしたら、こちらで紹介されているバグかもしれません。

IEバグ：marginの値が指定値より大きくなる｜CSS HappyLife
今回の場合、borderがボックスに設定されているため、paddingでの代用はできません。とすると、ハックか、はたまた…


【“mono-simpleのクロスブラウザ対策4”の続きを読む】

それでは、Safariでちゃんと表示されるように、テンプレートを修正していきます。

現在の状態…(^^;

まず、背景色が効いていませんので、これを直します。
スタイルシートの
background: url() #000000;
どうやらこの記述に問題があるようです。カッコ内にURLの入っていない背景の指定を全て、
background-color: （色指定）;
に直します。

これで背景色の問題はなくなりました。
しかし、container部分にカーソルを持っていくと、なぜか全てのテキストに下線が入ってしまいます。どういうことでしょうか。

これについてもすぐにわかりました。
<div id="container">のすぐ下、
<a name="pagetop">が、閉じられていません(^^;

<a name="pagetop"></a>
に修正します。
これでSafariでもちゃんと見られるテンプレートになりました。
さあ、残るは最大の問題児、IE6です…

前回の続き。
とりあえずこれらの処置によるWinIE7での表示はOKのようです。
問題は、IE6での表示です。

左のサイドバーが下がっています。それに、イメージが左に寄りすぎています。
イメージが左に寄りすぎているのは、WinIE5.xでも確認できました。IE6ほどではありませんが。

※IE6は、CSSのバグが多いことで超有名です。テンプレートのカスタマイズをする際は、まずWeb標準準拠をうたっているFirefoxのようなブラウザで作り、それからIE6など他のブラウザでの見栄えを調整するのが基本と言われています。

というわけで、IE6はあとまわしにして、Safariでの見栄えを先に調整したいと思います。さて、何が原因になっているのでしょうか。

Tsukifuneさんのmono-simple、かっこいい〜と思って適用させていただいたところ。

MacFirefoxで見た画面

サイドメニューのリストの左側が妙にあいています。

これは、各ブラウザによって、タグが元々持っているスタイルが違うために起こります。ですので、そのスタイルを初期化します。この場合はulを初期化します。

ul {
margin-left: 20px;
list-style-type: square;
}

ここに、 padding: 0;を追加します。
すると、


あきすぎていた余白がなくなり、丁度良くなりました。

念のため、他のブラウザでも確認してみます。
まず、OperaはOKでした。

しかし、IE5.2

あれっ？

そしてSafari

え〜〜！？

これはちょっとまずいかもしれません…

とりあえず今は時間がないので、明日以降これらの対策を見つけたいと思います。

※追記
あまりにブログの説明文が長いので2列になったら、説明文の2行目がカレンダーと重なってしまいました。説明文が何行になってもいい方法

ブログタイトルとサブタイトルを一つのブロック要素でくくります。以下は例
<div class="site_title">
<div class="blog_title"><a href="<%url>"><%blog_name></a></div>
<div class="sub_title"><%introduction></div>
</div>
</div>

スタイルシートを編集します
#headerにposition: relative;を追加
.sub_titleにmargin-left: 200px;を追加
下記をまるごと追加
.site_title
{
position: absolute;
bottom: 0;
}

これをやったら、MacIEでも表示がちょっとマシになってきました。が、ブログのタイトルとサブタイトルが見えなくなりました。
.site_titleに高さを指定してみます。
*html .site_title{ height: 0%;}
※普通1％とするらしいのですが、なぜこれでちゃんとなるのか…（苦笑）
ちなみに、*htmlのあとにセレクタとスタイルを指示するこの方法は、MacIE5とWinIE6のみに適用するハックです。
とりあえずこれでMacIEでの見栄えはOKです。



WinIEでも見えているかどうかはこれから確認。