スーパーpre記法を使ったとき,hatena_ryukyuテーマだとIEで表示がおかしい
ideatesterの日記をIEで見ると,内容がセンタリングされていなくて,みんさ柄(?)から左にはみ出てしまっています.(以下はサイドバーを非表示にしたときのスクリーンショット)
ぼくが普段使っているfirefoxだと,ちゃんとセンタリングされています.これはなぜだろうと思ったのですが,どうやら4/5の日記にあるスーパーpreが幅をとってしまっているのが原因のようです.その分<div class="hatena-body">の左端が左にいってしまい,結果的に内容が左寄りに表示されます.
もう少しスタイルシートを詳細に見てみると,
body{ margin:0px; padding:0px; text-align:center; width:auto; (略)
ということで,bodyでまずセンタリングが指定されています.bodyの下にはヘッダ部分,タイトルがきたあと,<div class="hatena-body">があります.これは
div.hatena-body{ width:740px; margin:0 auto; padding:0px; text-align:left; position:relative; }
ということで,hatena-bodyは幅が740pxに固定されていて,中身は左寄せで表示されることになっています.問題は<pre>の中身が幅740pxに収まらない場合なのですが,これがブラウザによって違うということでしょう.
でも他のテーマでは問題なかったような…….ということで,cssを比較してみたところ,hatena_ryukyu-blackでは
div.section pre{ padding:5px; background:#FFFAEA; font-size:90%; border:1px solid #BC2904; }
となっているのに対し,hatena_tangoでは
div.section pre{ padding:5px; border:1px solid #B5B2A5; font-size:85%; background:#EDECE2; line-height:120%; margin:0 5px; word-wrap: break-word; white-space: -moz-pre-wrap; }
のようになっていて,preの中でも改行してdivの幅からはみ出すことがないようにしているんですね.他にもhatena_skyでも同様のcssになってました.これが「正しい」のかについては自信がありませんが,とにかくデザイン的にはhatena_ryukyuのpreの扱いには問題があるので,hatena_tangoみたいにpreの中でも改行するようにしてほしいです.
追記
idea:10059に登録しました
さらに追記
アイデアのコメント欄で
lovely 『preは「整形済みテキスト」なのですから、強制的に折り返すよりスクロールするようにしたほうがいいのではないでしょうか。』 (2006-04-27 12:03:07)
という指摘をいただきましたので,この日記ではスクロールするようにしてみました.スタイルシートに以下を設定しています.
div.section pre{ overflow: auto; width: 490px; }
widthを指定しないとIEでスクロールバーが出ません.しかしwidthはサイドバーの有無で変化するので,このままテーマのスタイルシートに組み込むわけにはいきません.あとはスタイルシートの偉い人にまかせよう……