Hatena::Groupcss

つみきスタイル このページをアンテナに追加 RSSフィード

2007.1.27

[]nnとアンテナと分熊とRSSと私 09:12 nnとアンテナと分熊とRSSと私 - つみきスタイル を含むブックマーク はてなブックマーク - nnとアンテナと分熊とRSSと私 - つみきスタイル nnとアンテナと分熊とRSSと私 - つみきスタイル のブックマークコメント

いいかげんnnに飽きてはいるんですが、せっかくIE7が出てきて公開できたんだから(nn完成させようと思ったのはIE7が目立ってきてたから)、アンテナやブックマーク、出来ればRSSリーダのほうもnnとおんなじやつを作りたいなぁと思いつつ。やりたいとめんどくさいがこう、ね。

nnはデザイン寄りのテーマだからどうも機能重視のアンテナやブックマークと相性が悪い気がしてならない。便利なものを不便にするデザインは避けたいところです。

[][]今日見たIE7のバグに関連すること 00:14 今日見たIE7のバグに関連すること - つみきスタイル を含むブックマーク はてなブックマーク - 今日見たIE7のバグに関連すること - つみきスタイル 今日見たIE7のバグに関連すること - つみきスタイル のブックマークコメント

[][]nnに重大なバグが 00:14 nnに重大なバグが - つみきスタイル を含むブックマーク はてなブックマーク - nnに重大なバグが - つみきスタイル nnに重大なバグが - つみきスタイル のブックマークコメント

d:id:asukabさんに不具合のご報告を頂きました。見限ったりせずに教えていただけたのは本当にありがたいことです。

内容は、登録した画像の幅の分タイトル(h3要素)が左へずれる。原因は、

で、このバグが空のエントリー用に高さを指定してあったdiv.sectionに適用されて表示が崩れていたようです。ちなみにこのバグ、IE7正式版でも修正されてないようです。IE7StandaloneをRC1から正式版に変えてチェックしてみましたが、ばっちりずれました。IE7ではmin-heightが実装されたので、そっちでもこのバグが適用されました。

あぁ、思い出した。半年前の自分はこのために高さを指定しなかったのだな。じゃあどっかに書いとけよ!! 何ヶ月かにいっぺん思い出したかのように更新してたのが悪いですけど!!

と、これの修正のためにheightとmin-heightを0にしたのですが、今度はasin-detailのfloatで表示が崩れまくり。これはwidthを指定して解決しました。こうなることは分かっていたのに面倒くさがって指定してなかったのがまずかった。今のところ崩れてないからいいやってのはだめですね。

ついでなので、ほかにも公開してから気になってた部分を2つ3つ修正。AA記法が出来る前からちまちまと書いてたのでAA表示用のクラスがあったのですが、それをAA記法のdiv.ascii-artに対応させました。これでAA記法を使ってもきちんと表示されるはずです。もうひとつは原因が分かっていながらも修正箇所が多くて見なかったことにしてた左右ボーダーとパディングを設置した要素に後続する部分がずれるバグの対応。paddingと左右borderを同時に指定している部分に透明なborder-bottomを指定して、さらにIE6用にborder-bottom-colorを指定。border繋がりで、blockquoteにも使えるようにしてた見出し要素をpreにも使えるようにしました。あと、色違いごとに特別な指定をしたくないと言う理由で放っておいたnn yellowの見出し要素のキーワードリンクがIEで目立つ問題も修正しておきました。

以上の修正で気になってた部分は大体直せたのですが、div.sectionに高さを指定できなくなったので、IEで空のエントリーのタイトルが確実に重なるようになりました。これはもうどうしようもないという事にしておきます。CSSだけでheightを指定せずにfloatに隣接したブロックの高さを確保する方法は僕にはborderを指定するしか思い浮かびませんが、5emのborderを指定する根性はありませんのでやっぱ無理じゃないかと思いました。その旨も公開デザインの説明に書いて、つみきスタイルのURLを貼って置いたので、警告はしました、もうnnいいよね…?(一年以上nnと付き合ってるような気分だ)

そんなこんなで公開デザインにあるnnシリーズの更新をしましたので、nnを使用してくださっている方はインポートのやり直しをお願いします。CSSしか直してないのでスタイルシートの部分をコピペするだけでも問題ないです。お手数をおかけします。

keyword

はてなダイアリーの構造

■ はてなダイアリーの構造 はてなダイアリーのデザインの参考にしてください。 ダイアリーの構造 ヘッダの構造 カスタマイズに関するメモ ■ ブックマーク...

box-sizing

■ 注意 Opera8.0enで実装されていることを確認しました。CSS3草稿の先行実装と思われます。 実験的なものなので将来削除される可能性があります。 ■ 用語の簡単な解説 &#...

はてなブックマークの構造

■ はてなブックマークの構造 はてなブックマークのデザインの参考にしてください。 ブックマークページの構造 タグリスト絞り込みの構造 コメント直接編集機能の構...

はてなアンテナの構造

はてなアンテナの構造です 基本の構造 アンテナモード シンプルモード 詳細モード ■ 基本の構造 html body table tbody ...

はてなグループの構造::日記::日記を書くの構造

■ /css.g.hatena.ne.jp/UserID/edit ←はてなグループの構造←はてなグループの構造::日記の構造 ■ ページの構造 html body table //はてなヘッダ h1 div#ha...