ブログ(MovableType)のレイアウトが崩れて困っています。

特定のカテゴリーでのみ起こっているようです。
また、IE6、Firefoxで崩れる条件が違うようです。

http://blog.histyle.jp/

IE6では、
おしゃれカンケイというカテゴリーで右ブロックが左ブロックのずーっと下へ移動しています。
モブログ刑事というカテゴリーでは右ブロックが中央ブロックのずーっと下へ移動しています。

また、Firefoxでは、
モブログ刑事というカテゴリーでエラーが出て、なんだか変な表記になってしまいます。

お手数ですが、教えていただけると助かります。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:2006/08/01 07:24:02
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:uk999 No.4

回答回数4ベストアンサー獲得回数1

ポイント40pt

http://www.htmq.com/style/word-break.shtml

おそらくURLなどの"<a>"タグで囲まれた文章が本文の横幅をオーバーしていたのが原因だと思います。

エントリーを増やしていくうちに直るとは思いますが、問題の記事を表示すると同じように右のカラムが落ちてしまいます。

"word-break:break-all;"

これをCSSの"body"もしくは"a"の要素に追加してみてはいかがですか?

IEでのみ長い文章を強制的に折り返すようになるはずです。

firefoxのほうはちょっとわかんないっす。

その他の回答3件)

id:komorebi No.1

回答回数133ベストアンサー獲得回数8

ポイント20pt

レイアウトが崩れるのは、CSSの解釈がFirefoxとIEで違うからです。

IEのバージョンだけでも解釈がまったく違います。 

どちらかと言えば、IEのCSS解釈がおかし過ぎる、という方が伝わりますでしょうか。

正確には、余白である「margin」や「padding」と、横幅「width」との間で解釈が違うため、足した数字が変わってしまう原因です。

#基礎編2 ボックスモデルとDOCTYPEスイッチ

カテゴリーに崩れは、

の中に、以下のAとBが入っているようです。

A:

B:

AとBの横幅の合計が、

の横幅を超えていませんか?

それと、XHTMLの記述がHTMLになっている箇所があるようです。

まずは(X)HTMLの仕様から覚えた方はよろしいかもしれません。

id:histyle

回答ありがとうございます。

なるほど、参考になります。

もう少し、具体的にどこをどう直せばいいか教えていただけたら助かります。

他にも回答お待ちしております。

2006/07/26 23:42:41
id:takahiro_kihara No.2

回答回数833ベストアンサー獲得回数11

ポイント10pt

ポイントいらないっす。

ブログっちゅーのは、どうも、レイアウトにこだわるよりは、

更新しやすさに着目して使うのが良いんじゃないか、と個人的には感じています。

レイアウトに凝るんなら、Webページを作る方が、ずっと自分好みのを簡単に作れて、

良いと思いますけどね。

HPビルダーとかを使うんなら、そんなに難しい作業じゃないですよ。

ブログのレイアウトに凝る方が、ずっと難しいと思う。

http://www.imb.me-h.ne.jp/~kihara/

id:histyle

回答ありがとうございます。

それもそうなんですよね。

しかし、これだけ長く続けてきたらそれなりに思いいれもあるわけで・・・。

ちなみに、ブログのレイアウトに拘っている訳ではなく、なぜか突然崩れたので困っているのです。

2006/07/26 23:44:16
id:nana109 No.3

回答回数695ベストアンサー獲得回数13

ポイント20pt

ただいまIE6で見ました。

全く異常なしでしたが・・

どこがおかしいのでしょうか。

おっしゃるような症状は全然ありませんでしたよ。

http://blog.histyle.jp/

id:histyle

回答ありがとうございます。

おお!一時的なものだったのかと思い私も見ましたが、やはり症状がでます。

PCに依存するのかと、他のPCでも見ましたが、やはり症状がでます。

カテゴリーを選んだ場合に出るのです。

TOPページは大丈夫なのです。

2006/07/27 07:41:44
id:uk999 No.4

回答回数4ベストアンサー獲得回数1ここでベストアンサー

ポイント40pt

http://www.htmq.com/style/word-break.shtml

おそらくURLなどの"<a>"タグで囲まれた文章が本文の横幅をオーバーしていたのが原因だと思います。

エントリーを増やしていくうちに直るとは思いますが、問題の記事を表示すると同じように右のカラムが落ちてしまいます。

"word-break:break-all;"

これをCSSの"body"もしくは"a"の要素に追加してみてはいかがですか?

IEでのみ長い文章を強制的に折り返すようになるはずです。

firefoxのほうはちょっとわかんないっす。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません