1252585689 私のはてなダイアリー(http://d.hatena.ne.jp/en-do/)のCSSについての質問です。

ブラウザによって、本文の左端が切れて表示される事が有るのですが、原因が分かりません。
古いバージョンのブラウザで見ると、このような表示になるようです。
知り合いに「本文の左が消えて読めない」と言われたり、ネットカフェに行った時に消えてるのを確認しています。
ソースを見て頂いて、間違っている部分を教えて下さい。
または、本文の左端に余白を入れる方法を教えて下さい。
※画像はイメージです。

回答の条件
  • 1人1回まで
  • 登録:2009/09/10 21:28:12
  • 終了:2009/09/13 00:35:14

回答(3件)

id:Reiaru No.1

Reiaru回答回数152ベストアンサー獲得回数382009/09/10 21:45:50

ポイント27pt
.section P.sectionheader {
	BORDER-RIGHT: #ff46c2 12px solid; 
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 5px; 
	FONT-SIZE: 80%; 
	PADDING-BOTTOM: 2px; 
	MARGIN: 0px 0px 12px; 
	BORDER-LEFT: #ff46c2 12px solid; 
	LINE-HEIGHT: 1.2; PADDING-TOP: 0px; 
	TEXT-ALIGN: left
}

             ↓

.section P.sectionheader {
	BORDER-RIGHT: #ff46c2 12px solid; 
	PADDING-RIGHT: 0px; 
	PADDING-LEFT: 5px; 
	FONT-SIZE: 80%; 
	PADDING-BOTTOM: 2px; 
	MARGIN: 0px 0px 12px; 
	BORDER-LEFT: #ff46c2 0px solid; 
	LINE-HEIGHT: 1.2; PADDING-TOP: 0px; 
	TEXT-ALIGN: left
}

ダイアリーはよく分からないのですが、これで良いと思いますよ。

(Internet Explorer 6 で確認)

id:kjkdfsi73 No.2

kjkdfsi73回答回数5ベストアンサー獲得回数02009/09/10 21:54:31

ポイント27pt

余白は、「padding-left」プロパティでできると思います。

左が消えることがあることの原因は私の知識ではよくはわかりません。

古いブラウザの対応していないタグを使っているとか?では。


padding-leftの説明

http://www.htmq.com/style/padding-left.shtml

id:en-do

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

2009/09/11 22:45:35
id:chrono1742 No.3

chrono1742回答回数91ベストアンサー獲得回数132009/09/10 21:59:20

ポイント26pt

見出し行のすぐ下にある

<p class="sectionheader"></p>

が悪さをしています。

表示上は無意味だと思うので、削除した方がいいと思います。

  • id:kn1967
    sectionの所で
    margin ではなく padding 使ってみてくださいな。

    以上、検証してないのでコメントで・・・。
  • id:chrono1742
    ↑なぜ検証していないのに padding を使うと良いといえるのですか?
  • id:en-do
    ¥・ω・do 2009/09/11 22:39:33
    .day{
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    position: relative;
    top: 0;
    left: 0;
    _width: 100%;
    background: #ccffff url("http://img.f.hatena.ne.jp/images/fotolife/e/en-do/20090531/20090531005128.gif");
    }


    このように設定し
    会社の古いブラウザのパソコンで見てみましたが
    余白が出来るだけで
    本文の左端は切れたままでした^^;
  • id:en-do
    ¥・ω・do 2009/09/11 22:43:40
    http://loda.jp/pink/?id=256.png

    古いブラウザで見ると
    このようになります^^;
  • id:Reiaru
    何故解決していないのかが分からないのですが、要するにこういうお話です。
    そこに値を持った border-left が存在する限り、以前の Internet Explorer ではデザインが崩れます。

    ウノウラボ Unoh Labs: IE6 + CSS 『border-leftとpadding-bottom』の謎
    http://labs.unoh.net/2007/04/ie6_css_border-left_padding-bot.html

    ですので、それを回避する為に CSS を書き換えなくてはいけません。
    「詳細デザイン設定 - スタイルシート」で定義できますよね?
    <div> が二重になっている以上、このままの定義では回避する事ができません。

    私が回答した様に 0px にするか、chrono1742 様がおっしゃっている様にその定義ごと削除するか、それを用いている箇所を削除して下さい。

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません