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

Question

￥・ω・do

28

25もっと見る

80pt

はてなの使い方ウェブ制作

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

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

回答の条件

1人1回まで

登録：2009/09/10 21:28:12
終了：2009/09/13 00:35:14

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

kn1967 2009/09/10 21:50:25

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

以上、検証してないのでコメントで・・・。
chrono1742 2009/09/11 13:00:19

↑なぜ検証していないのに padding を使うと良いといえるのですか？
￥・ω・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");
}

このように設定し
会社の古いブラウザのパソコンで見てみましたが
余白が出来るだけで
本文の左端は切れたままでした＾＾；
￥・ω・do 2009/09/11 22:43:40

http://loda.jp/pink/?id=256.png

古いブラウザで見ると
このようになります＾＾；
Reiaru 2009/09/12 19:11:06

何故解決していないのかが分からないのですが、要するにこういうお話です。
そこに値を持った 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 様がおっしゃっている様にその定義ごと削除するか、それを用いている箇所を削除して下さい。

人力検索はてなコメント欄の使い方について教えて下さい。.. 2009-09-12 14:21:06

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

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

リクエスト送信済

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

Reiaru · Answer 1 · 2009-09-10T21:45:50+09:00

.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 で確認)

kjkdfsi73 · Answer 2 · 2009-09-10T21:54:31+09:00

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

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

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

padding-leftの説明

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

chrono1742 · Answer 3 · 2009-09-10T21:59:20+09:00

見出し行のすぐ下にある

が悪さをしています。

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

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

回答（3件）

Reiaru152382009/09/10 21:45:50

kjkdfsi73502009/09/10 21:54:31

chrono174291132009/09/10 21:59:20

コメント（5件)

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

トラックバック