香雪?GB日記 このページをアンテナに追加 RSSフィード

2004-05-10

[] テーマhatenaでのグループトップページIE6閲覧時レイアウト崩れの問題。スタイルシートと文字コード。 テーマhatenaのCSSエラー(はてなグループへの要望 テーマhatenaでのグループトップページIE6閲覧時レイアウト崩れの問題。スタイルシートと文字コード。 テーマhatenaのCSSエラー(はてなグループへの要望) - 香雪?GB日記 を含むブックマーク はてなブックマーク -  テーマhatenaでのグループトップページIE6閲覧時レイアウト崩れの問題。スタイルシートと文字コード。 テーマhatenaのCSSエラー(はてなグループへの要望) - 香雪?GB日記  テーマhatenaでのグループトップページIE6閲覧時レイアウト崩れの問題。スタイルシートと文字コード。 テーマhatenaのCSSエラー(はてなグループへの要望) - 香雪?GB日記 のブックマークコメント

テーマhatenaでのグループトップページIE6閲覧時レイアウト崩れの問題

わたしはいつもはWindows XPのOpera7.23かシグマリオン3の Internet Explorer 5.5 for Windows CEで見ているので崩れに気が付きませんでした(崩れは発生していませんでした)が、IE6で再現して見ると、なるほど崩れている。

当面の対処方法として、id:suikanさんご指摘の通り、グループの設定画面に

td.main {
  vertical-align : top;
}

を追加することで修正されますし(現在修正済み)、ローカルで試してみたところでは、はてな側のCGI出力テンプレートレベルの修正で左サイドメニュー用のセル

<td valign="top" class="sidebar">

にそろえてメインメニューのセルも

<td valign="top" class="main">

にしてやる(valign="top"を追加する)と崩れなくなるようです。スマートではないけれど。

はてなグループとテーマのスタイルシートの文字コードの相違が原因?

で、各グループのトップページ(ここだとhttp://beta.g.hatena.ne.jp/)は、はてなダイアリートップページ(http://d.hatena.ne.jp/)のHTMLテンプレートをならっている。各グループのトップページとはてなダイアリートップページの実質的な違いは先に述べた左サイドメニューのところが、ダイアリーでは

<td class="sidebar">

となっているだけ(valign="top" が入っていない)。スタイルシートはどちらもテーマhatena(http://d.hatena.ne.jp/theme/hatena/hatena.css)。

で、あれこれ試すうち、同じ条件にしたら、はてなダイアリートップページではレイアウトが崩れないのに、グループトップページでは崩れる、ということが生じる。そもそも既にhttp://d.hatena.ne.jp/theme/hatena/hatena.css

td.sidebar {
	width: 120px;
	padding: 10px 0px 0px 0px;
	vertical-align: top;
}

td.main {
	width: 100%;
	align: center;
	padding: 0px;
	vertical-align: top;
}

このように指定済みなのに、betaグループトップページのレイアウト崩れの防止で改めてtd.main { vertical-align: top;}を指定してやらなければならないのが、どうも変な気がする。もしかしたらこの指定が無効になっている、というかもしれない……?なんてふうに思いました。

そこで俄然気になったのが、id:hoshikuzuさんがhttp://beta.g.hatena.ne.jp/hoshikuzu/20040424で既に指摘しておられる点(上記のようなcharsetの輻輳をブラウザに正確に解釈するように期待することはあまりお勧めできません*、とも)。グループと、テーマのスタイルシートの文字コードの相違の問題です。はてなダイアリーのHTMLの文字コードはEUC-JP。元来ダイアリー用のテーマ(CSS)はEUC-JPで両者の文字コードは同じなのだけれど、はてなグループのHTMLの指定はcharset=UTF-8。この文字コードの相違により、(変換をかませているのでしょうけど)その際に解釈がうまくいかないブラウザがあるのではないか……現状ではIE6がうまくいっていないのでは?

実際にローカルで文字コードを変換して保存する方法で試してみたところ、

いずれの方法でも、元のままのテーマ適用で(対策のためにスタイルシート欄に追加せずとも)IE6でのレイアウト崩れは生じませんでした。

テーマhatenaのCSSエラー

さらに、http://d.hatena.ne.jp/theme/hatena/hatena.cssにはプロパティに些細なミスがあり、CSS Validatorにかけると

行番号: 0 コンテキスト : table.calendar 

プロパティ align は存在しません : center 
行番号: 0 コンテキスト : td.main 

プロパティ align は存在しません : center

という結果になる。alignというプロパティはCSSに存在しないのです。そこで、これはまったく確証など何もないのですが、もしかしたら今回のレイアウト崩れは、td.mainで指定してある「align: center;」ももしかしたら悪い影響を与えているということもあり得るかもしれないとも思います。いずれにせよ、テーマhatenaのこのプロパティ指定エラーは修正して頂きたく思います。

なんだかうまくまとめられませんでしたし、素人考えでもしかしたら的はずれかもしれませんが…HTMLとスタイルシートの文字コードの相違の問題について、いまいちどご検討を、必要なら対処等考えて頂きたく思います。>g:hatena:id:hatenagroup

※このグループのトップページのレイアウト崩れはbetaグループの問題というよりはてなグループ全体の問題だと思います。

※MacIEのテキストエリア文字化け対策(http://beta.g.hatena.ne.jp/nobody/20040510#1084178896)も、当面は一グループ・個人で対策をするにしても、いずれはてなグループ全体で初期スタイルシート指定に追加して頂くなどの対策が必要な問題ではないかと思います。

[] グループbook  グループbook - 香雪?GB日記 を含むブックマーク はてなブックマーク -  グループbook - 香雪?GB日記  グループbook - 香雪?GB日記 のブックマークコメント

参加考え中です。

はてなグループを利用して、一愛読者レベルのアガサ・クリスティー作品の読書メモを(個人か、どなたか仲間を募って)作っていこうと考え中なのです。ただの愛読者として、えーと、クリスティー文庫か何かを底本にして、作品名や人物等々をキーワードに。この作品の登場人物は次の○○にも登場する…何ページ目に初登場、なんてすぐわかると面白いかなと。そんな程度のメモですが、自分で欲しいので。

bookに入れてもらうとキーワードが煩雑になりそうなのでやはり単独でグループ作るほうがよさそうかな…とは思ってます。

作成できるグループはベータ期間中、1ユーザーにつき1グループとさせて頂きます。*この縛りがきつい……試しに作ったグループを削除したいよ~(/_;)

suikansuikan2004/05/10 23:041日1回くらい、「ポイント払うからフライングでもう一つ作らせてくれ」と思うことがあります。

adramineadramine2004/05/11 12:04とりあえず参加してみますか?

yukattiyukatti2004/05/12 15:04わたしの場合は自分も悪くて、テストだと思って自分が正式(?)に使う分には到底つけないグループIDにしちゃったのです。意味不明すぎて永続的には到底使えません…。

yukattiyukatti2004/05/12 15:07adramineさん そうですね、「とりあえず」で申し訳ないのですがまずはとりあえず参加させてみて頂けるとうれしいです。よろしくお願いします。

yukattiyukatti2004/05/12 15:08ジャンル限定とかは特にはないのかな…。