スタイルシート

昨日の続きでレイアウトが崩れる話。
昨年のカントリーサインの旅ネタでも崩れてたので、なんとか直さなきゃーと、じたばたしてみた。

Firefoxで文字サイズちっさくしてウィンドウ幅広げたりすると、会話文と画像が並ぶような位置関係のときに会話文が崩れることがあった。
会話の部分はDL使ってて、DTとDDをfloatで横並びにしてたんだけれども、floatやめてネガティブマージンで並べてみたっけ、崩れなくなった。

右寄せの画像は何枚か縦に並べられるような箱的なものを定義していて、それにfloatを指定して右寄せしてて、clearも同じとこに指定してた。
でもこのclearがFirefoxではうまくいってなかったっぽい。
この画像んとこからこの文章が始まってほしい、っていうのがことごとくズレてた。
このへんはそうなる理由みたいなものがよくわかんなくて不安なんだけど、画像を入れる箱的な定義の中でfloatと一緒にclear指定するのをやめて、その外側にもういっこclear用の箱を作ってみたら、希望どおりの表示になった。

したら今度はIEの方で画像のツールチップがおかしくなった。
画像にカーソル重ねても、ツールチップが出る画像と出ない画像がある。
画像の上で右クリックしてみたっけ、画像だとも認識されてないっぽい。
いろいろ試してみたら、また会話文と並ぶような位置関係のときだとわかり、試しに会話部分の設定をfloatに戻してみたら、うまくいった。

もともとFirefoxで崩れてた会話文は、右寄せ画像でclearされるようにしたことで問題はないみたい。
つーわけでこれでよしってことにしちゃって、昨年のカントリーサインの旅ネタも修正しておいた。

…って、よくわかんないよね。私も書いててわかりづらいと思う(^^;

floatは…できるだけ使わないのが吉だね…