ol要素で思い通りに表示できないです。

質問

ol要素で思い通りに表示できないです。　

皆様はじめまして。こんにちわ。

ホームページを作っているのですが解決できない問題があり、解決方法を知りたく
投稿させていただきました。
下記の内容についてご存知の方のお力をお借りできればと思います。

質問は下記の２点です。

１．Google ChromeとFirefoxで画像の通り、右コンテンツの<ol>要素で、番号と文字との間に空白が出来ます。　　　IE、Operaでは空白はできません。空白をなくす方法があれば教えていただきたいです。

２．ol要素内のリストの文字なのですが、幅が足りない場合自動改行されますが、
　　改行された２行目の文字が一行目の文字よりも左側に表示されてしまいます。
　　これを画像にある赤い矢印の通りに一行目の文字と同じ位置で自動改行されるように
　　したいのですが方法がわかりません。方法があれば教えていただきたいです。

以上です。

ホームページの初心者なため、情報が足りなければ申し訳ございません。その場合必要に応じて情報を追加させていただければと思います。

回答No.2

mitoneko · ベストアンサー

ＣＳＳを何も指定しなくても、とりあえず、適当な余白で適当な行間で適当なフォントサイズで表示されますよね。
　この「適当」はブラウザによって違います。
　このため、ＣＳＳで、ちゃんとレイアウトをするためには、とりあえず、このデフォルトの指定をちゃんと自分でやってあげるのが基本です。
　結構な量のＣＳＳを指定する必要がありますが、次のページにあるｒｅｓｅｔ．ｃｓｓを最初に指定してください。少なくとも、ブラウザのデフォルト指定による差は吸収できます。自分の好みがあるなら、これをベースに修正して、何はともあれ最初に指定するようにすると良いでしょう。

　http://developer.yahoo.com/yui/reset/

　ダウンロードのリンクで落としたファイルのbuildフォルダーの中にresetフォルダーがあります。ここに入っています。

お礼

早速のご回答をありがとうございます。

なるほど！
私は自分でreset.cssを作っていました。
このリンク先でダウンロードできるreset.cssは、様々なブラウザの差がなくなるように
あらかじめ設定されているリセットのスタイルシートということですよね。

ありがとうございました。早速使ってみたいと思います！

補足

度々のコメントで申し訳ございません。

上記方法を試した所、表示が変わらなかったため再びお力を借りたく
再度コメントさせていただきました。

＜実行した事＞
上記ホームページからダウンロードし、resetフォルダにある
「reset.css」と「reset-min.css」の両方をアップロードし、
A.htmlファイル(上記画像のhtmlファイル)にて2つのcssファイルの
アドレスを指定しました。

するとリストの番号がresetされて消えてしまったため、
A.htmlファイル専用のA.cssのliに「list-style-type: decimal;」を指定しました。

すると再びリストの番号は表示されたのですが、上記の画像と同じ位置に
また表示されてしまいました。

他にどういった原因が考えられるのでしょうか？

回答No.3

tracer

この質問内容は非常によく耳にすることですが、同時にとても深いお話です。
reset.cssについては一理ありますが、それ以外にも、どのブラウザで、どのバージョンで、ドキュメントスイッチは何を使っていて、htmlのバージョンが何か・・・とか面倒な話になります。それぞれに指定方法が異なるのです。

ひとまず、質問される前に検索サイトやリファレンスで調べられましたか？
私の一見したところ、Googleで「css ol」を検索すると、まんまの答えがたくさん出てきますよ。
調べた結果、わからない箇所だけを質問されたほうが、回答がつきやすいと思いますし、ご自身の学習にも役立つと思います。

お礼

お礼が遅れまして申し訳ございませんでした。

調べた上で質問させていただいたのですが、調べが足りなかったと反省しております。
もう一度しっかり調べなおしてみたいと思います。

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

補足

お世話になっております。

list-style-positionをinsideに指定する事によってブラウザ間の差がなくなりました。

この度は色々と知恵をお貸しいただきありがとうございました。

回答No.1

noname#120742

ブラウザによって、デフォルトのマージンなどが異なるために
そのようなことが常に発生済ます。

その対策としては、CSSのリセットを最初に入れて、
から、位置調整します。

基本的事項です。

/*すべてに適用すべきリセット*/
* {
margin:0;
padding:0;
}
/*位置調整*/
ol {
padding:xxxpx;
}

ようにしていますか？

お礼

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

reset.cssは本で読んだとおりに下記のように設定していました。
---------------------------------
@charset "utf-8";

html,body,div,h1,h2,h3,h4,h5,h6,
p,address,ul,ol,li,dl,dt,dd,
table,th,td,form {
margin: 0;
padding: 0;
border: 0;
}

---------------------------------
今回のご指摘どおりにするために上記内容を下記に変更を
しましたが、表示に変化はありませんでした。
----------------------------------------
/*すべてに適用すべきリセット*/
* {
margin: 0;
padding: 0;
}
/*位置調整*/
ol {
margin: 0px;
padding: 0px;
}

li {
margin: 0px;
padding: 0px;
}
-----------------------------------------
marginとpaddingをマイナスにしたり増やしたりしましたが変化はありませんでした。
何か他に原因があるのでしょうか？