Firefoxだとズレてしまう

質問

<h1 class="text">タイトル</h1><p class="navi"><a href="#">↑上↑</a></p>

h1.text {
width:69%;
float:left;
font-size: 10pt;
color:black;
background-color:white;
border-color:black;
border-width:1px 0px 1px 5px;
border-style:solid;
padding:0px 0px 0px 4px;}

.navi {
width:29%;
float:left;
text-align:right;
font-size: 10pt;
color:black;
background-color:white;
border-color:black;
border-width:1px 1px 1px 0px;
border-style:solid;
padding:0px 2px 0px 0px;}

このようにしたいのですけど、firefoxで見ると表示がズレてしまうので困っています（Explorerでも、ちょっと思ったよりも短くなってしまうけれども、一応表示される）。何かよい方法はないでしょうか。

回答No.3

asadome · ベストアンサー

＃２のasadomeです。
ああ、余計ややこしくしてしまったようで；＾＾

そこを直したい、というだけならh1.textと.naviだけに設定するのもアリかと思います。

でも、全体をリセットする癖がついていると、今回のような上下ズレや諸々のCSSバグがあまり起きなくなるので入れるようにはしています。

pの行間については、このリセットの後でp全体にline-heightを設定しています。ここら辺はHTMLでのpの使い方にもよりますが…。
一行だけの場合、行間を設定しても関係ないのでp全体に行間を設定してもいいんじゃないかな、と思いますが。

また、このリセットは必ず全部入れなくてはいけないということではなく、
ズレ回避させるだけであれば{margin:0;padding0;}の部分だけで十分だったりします。
必要ないリセット項目（strongの字体やpの行間など）があればそこだけ削除しても構わないですし。

お礼

リセットしたほうが、確かに、画面全体もしまって、いいかんじにフィットしたので
リセットしたほうがよいのかな、と思ってきました。

line-heightは、main部分の全部にline-height120%か何かをあてはめています。ただ、<p>と打つと普通なら、<br>のように一行あいて改行されるのにリセットすると改行されなくて、h2のあとの改行はいらなくて、すぐ下にピタッと文章が来るようになって（少しすき間が空くくらい。でも改行のようにたくさんあかない）、その方が見やすくなってよかったのですが、今度は文中に<p>しても改行しなくなったので、あれれ、どうしようかと思ったのです。

<P>したら改行するように設定するか、<P>はリセットしないか、したらいいのですね。でもリセットしなければ今度はh2の下が空くのです。そこは空かないほうがキュッとしまっていいのです。だからh2など、見出しの下のすき間はあまりなくて、普段、<P>するときだけ空くように設定したいのです。

リセットせずにもー改行は<br>にしてもいいのだけど<br>はあまり使わないほうがいいと聞いたので悩むところですが、こうしたことは質問とだいぶズレてきたし（質問がFireFoxだとズレてしまうだけに）Pの使い方は人によって違うようなのでこの辺で締め切ったほうがいいのでしょうか。何度も回答ありがとうございました。

回答No.2

asadome

h1とpの上部マージンの差ですね。

CSSデザインの際には、各タグのmargin,paddingをゼロに設定してリセットをかけてからmargin,paddingを新たに設定すると上手くいきますよ。

CSSの先頭に、
h1,p{
margin:0;
padding:0;
}
を追加するとよいです。
※ホントはbody,div,dl,dt,dd,ul,ol,li,h1,h2,～といった風にブロックライン要素のタグ全部につけてやると後の設定がやりやすくなります。
Yahoo!のHTMLソースのスタイルシートを見てみると、同じようなものが入ってます。

これを追加したソースを、IE,firefox,opera,safariでそれぞれ試してみましたが問題なさそうです。

お礼

はい、全体的にリセットすると綺麗に表示されました。ありがとうございます。

strongなどもリセットされると太字にはならないのですね。なんか太字じゃないほうが綺麗でシンプルに見えてよく思えるという発見がありました。が、しかし、リセットすると、またリストなども、いろいろごちゃごちゃになって、また設定しなおさなくてはいけないのですね。

でも、なんというか、全体じゃなく、部分部分、リセットしてもいいのでしょうけど、全体にやっておいたほうがいいのでしょうか。頭がこんがらがってきました。

でも確かに、デザインも、大きさにズレがあったりしましたが、キュッとしまったように思えます。でもこれからまた一個一個手直ししていくのかと思うと、うーむ、なかんじですが、皆さんは、最初にリセットしているものなのでしょうか？また、リセットしておいたほうがやっぱりよいのでしょうか？

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

回答No.1

notnot

ブラウザにより、各タグのデフォルトスタイルが違うためです。
<h1> と <p> と異なるタグを使わず、両方同じタグを使うか(この場合だと<span>がいいです)、デフォルトスタイルが影響を与えないように、全部の属性を指定するか。

この場合だと、最小限の変更としては、
.navi のほうに、margin-top: 0px; を追加すれば合うようです。
(safariやoperaなどはまた違うかも)

「デフォルトスタイル」で検索するといろいろ情報が得られるでしょう。

お礼

デフォルトスタイルをリセットっていうのを今まで知らなかったのでさっそくやってみると、確かに綺麗に表示されました。ありがとうございます。

けれども、当たり前ですが、リセットすると、他の部分が、たとえばpの行間が空かなくなったりしました（リストもちゃんと表示されません）。

何もしていない状態だと、今までh2の下が空くのがどうも嫌だったのでよかったですが、一つ目のpは、いいですが、二つ目以降pしても行間があいてくれないのでずっしり詰まってしまいます。

だとすると、pにいちいちclassを記して、二つ目以降、行間が空くように設定するものなのでしょうか。皆さんは、pはどのように設定、表示されてますか？