てんぽ : [bbs]の擬似フレーム修正版

共有テンプレート[bbs]のoverflow擬似フレームには（ブラウザの）不具合が多いので、背景画像でフレームっぽい見た目にするためのCSSを用意しました。 フレームのような機能はなくなりますが、一部のブラウザにおける以下の不具合が解消されます。

• Home、End、PgUp、PgDnでページ内移動できない
• マウスホイールによるスクロールが効かない
• ページ内リンクが効かない
• オートスクロールが効かない
• ページ内リンクで飛んだあとに「戻る」を押しても以前の位置に戻らない
• [admin]が閲覧領域より少し外側にずれる

変更したい人はCSSの以下の部分を探して書き換えてください。

overflow擬似フレーム（デフォルト）

/* レイアウト（擬似フレーム） */
body{
	line-height:1.3;
	padding:0;
	margin:0;
	_overflow:auto; /* 指定しないとIEで余計な縦スクロール。
	                   指定するとOperaとNetscapeで表示されない。
	                   よってIEのみに有効なアンダースコアハックorz */
}

#main{
	background:url(http://blog-imgs-27.fc2.com/m/b/m/mb/back.gif);
	background-color:#d2b48c;
	width:87%;
	height:100%;
	position:absolute;
	left:13%;
	top:0;
	overflow:auto;
}

#menu{
	background:#ffffff;
	width:13%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	overflow:scroll;
}

/* IEでh1ボックスのセンタリング */
（以下略）

background似非フレーム（変更後）

/* レイアウト（似非フレーム） */
body{
	background-image:url(http://blog-imgs-27.fc2.com/m/b/m/mb/back2000.png); /* 背景画像でフレームっぽく */
	background-repeat: repeat-y;
	line-height:1.3;
	padding:0;
	margin:0;
}

#main{
	margin-left:104px;
}

#menu{
	width:82px;
	position:absolute;
	left:0; 
	top:0;
}

h1#blog-title{
	position:relative !important;
	top:-120px !important;/* 画像の高さにマイナス */
	margin-bottom:-120px !important;/* 画像の高さにマイナス */
	z-index:1 !important;
}

ul#admin{
	position:relative !important;
	z-index:2 !important;
}

/* IEでh1ボックスのセンタリング */
（以下略）

「IEでh1ボックスのセンタリング」以降を変更する必要はありません。 それ以降に出現するh1#blog-titleおよびul#adminの変更箇所は「レイアウト（似非フレーム）」部分の最重要規則（!important）で上書きされます。

本来なら後ろのほうの!important群を使わずとも#mainにposition:relativeを指定するだけで済むはずでしたが、何故かIEでおかしなことになるのでこうしました。 この解決法を見つけるまでにずいぶん時間がかかってしまった。