-Sun&Moon Blog-
catsmoon.exblog.jp
エキサイトブログスキン配布 (Mac OS10.5 Leopard・Safari) ★基本的にコメントにレスしません
by catsmoon
プロフィールを見る
画像一覧
Top | Out
久しぶりの苦労
2006年 05月 04日 |
現在作成中の新作スキンに思わぬところで大苦労してますorz

今回、色の使い回しが自由にきくテーブル枠素材を使って、3種類のスキンを作ろうとしたのです。
どういうことかというと、記事やサイドメニューの右側と下に影がつくようなデザインで、素材は影の部分だけなので本分部分は好きな色や背景画像にできるというものです。

で、CSSの指定を楽にし、かつ無駄な余白を作らないためにも、最初、テーブルにcolspanとrowspanの指定をいれて作ったんです。
(HTMLがわからない方には何のことやらだと思いますが(^^;)

ところが、まずFFで確認して愕然。
素材が入るだけのセルには、スペースだけいれてたんですが、何故かその部分の影が出てない。
そこで内容を半角スペースから全角に変え、セルサイズを超えないようフォントサイズやライン高の指定までいれて漸くできた、と思ったら。
今度はOperaとIEで確認してやっぱり愕然。
それでも影が出てない!

これが同じテーブル枠を使ったスキンでも、藤スキンなどは綺麗に見えているので、要するにcolspanとrowspanに問題がある、というか、つまりこれをやってると、セルの幅指定が全く効いてないということが判明。
やむをえないので、もう一度半角スペースに戻した後、colspanとrowspanを外して、無駄な余白セルになるのはわかってましたが、テーブルを組み直し。
そして、一見、そこも本分部分に入って見えるように、背景の色や枠線の指定、果ては中身のmarginとpaddingの指定まで全部やり直し。
えっらい無駄な指定の多いスキンになってしまいましたorz
(しかも、その余白セルに指定した枠線が、どうやってもOperaでは色指定が有効にならずに枠が見えないことが判明。もう諦めた)

今回、SafariとFF、NN、IE、Operaと、それぞれが全く異なる挙動をしてくれたので、acid2クリアしているSafariだけが正しくて(中身やcolspan、rowspanに関わらず、ちゃんと各セルの幅指定や背景画像指定を効かせてくれたのは、確かにSafariだけだった)、残りのブラウザが全て問題ありなのか、あるいは、たまたまSafariが上手くいっただけで、私のしようとした指定の仕方がそもそも無茶だったのかはわからず仕舞い。

結局、素材を使い回して、好きな色にカスタマイズできるスキンという予定だったのだけど、この余白セルのお陰で、それをするには結構面倒なCSSの修正をしないと変えられないスキンということになってしまいました。

最近は、もう大抵のブラウザで崩れないソースを書けるようになってた心算だったのですが、本当に久しぶりにHTMLとCSSで苦労しました。
とりあえず、もう少しチェックしてから公開します。
[PR]
<< Black Yellowスキン配布 PageTop 新緑スキン配布 >>
XML | ATOM

個人情報保護
情報取得について
免責事項
Blue Paper Skin by Sun&Moon