CSSテクニックコミュのネスケとIEの表示の違い

最近cssを学び始めたのでcssは初心者に近いです。

で、今ある仕事で作ってるものがあるのですが、
IEだとタイトルが真ん中に来るのですが、
ネスケ、firefoxだと上の方にいってしまいます。
どこをいじってもうまくいかないので
教えていただけると幸いです。
また、IEとネスケの表示の違いはどうして
出てくるのか、その解決策など
わかる人がいましたら教えていただけると助かります。

(くだらない質問ですみません)

------------------------------------------------------
h1,h2,h3,h4 {
line-height: 150%;
}
.mainMenu {
margin-bottom: 10px;
background: url(../img/images/waku_02.gif);
}
.menu-top {
width:180px;
height:38px;
background: url(../img/images/waku_01.gif) no-repeat top ;
}

.menu-bottom {
width:180px;
height:11px;
background: url(../img/images/waku_03.gif) no-repeat bottom ;
}
.menu_title {
margin: 12px 0px 3px 20px;
padding: 0px 0px 3px 0px;
background-image: url(../img/icon2.gif);
background-repeat: no-repeat;
background-position: left center;
text-indent: 20px;
}

html
------------------------------------------------------
<div class="menu-top">
<h4 class="menu_title">プロフィール</h4>
</div>
<div id="menu_frame">
<ul>
<li class="contents">あいうえお。かきくけこ。</li>
<li class="blogid">ID：xxxxxxxx</li>
<li class="homepage"><a href="" target="_blank">さしすせそ</a></li>
　<li class="genre">たちつてと：[<a href="#" target="_blank">たちつてと</a>］</li>
</ul>
　　　　<p class="link_blog">[<a href="#" target="_blank">なにぬねの</a>]</p>
　　　</div>
　　　<div class="menu-bottom"></div>
</div>

コメント(9)

最初
全て
最新の40件

[1] mixiユーザー 03月25日 21:14

問題の部分は<h4 class="menu_title">プロフィール</h4>
の部分です。
こんな感じでネスケだと上に上がります。

[2] mixiユーザー 03月25日 21:40

h1,h2,h3,h4 {
line-height: 150%;
position: absolute;
}

[3] mixiユーザー 03月25日 21:48

文字サイズはピクセル。
line-heightは1em。

文字サイズ + パディング上下 = 背景画像の高さ。

画像の高さが30px、文字サイズ16pxの場合、
16 + 7 + 7 = 30。

[5] mixiユーザー 03月25日 21:53

実は私も今暗礁にのりあげています。
私の場合はcssを別ファイルから読み込んでます。
別ファイルでは
.t11-140 { font-size:11px; line-height:140%}
.t12-200 { font-size: 12px; line-height: 200%}
.t12-140 { font-size: 12px; line-height: 140%}
という風な感じで指定しています。
対象のhtmlで、spacer.gifを使って頭揃えをしてその後<font class="t11-140">
という風に指定しているのですが、ネスケ4.7(win,mac両方)では
うまく効いていないようなので回避策を探しています。
ネスケ4.7だと画像を一緒に使うと崩れるというバグがあるそうですが
どなたか回避策を知っている方いらっしゃいましたら教えて頂けると有り難いです。
ちなみにタグは
<img=src="spacer.gif" width="10" height="1" border="0"><FONT size="2" class="t11-140" color="#333333">もじ<br>もじ</font>
というふうな記述をしています。

質問に対しての答えではなく、さらなる質問ですみませんが宜しくお願いします。

[6] mixiユーザー 03月25日 22:43

はるまきさん>
すみません、何が問題なのかわからないのですが
line-heightと画像は4.7では恐らく無理です
頭揃えはほかの方法で

[7] mixiユーザー 03月26日 03:58

お疲れ様です！！
みなさんありがとうございます！！

＞ハッシャンさん
ばっちりビンゴでした！！
position: absolute; …まったく思い浮かびませんでした…
本当にありがとうございました！！

＞マッツさん
line-heightは1em…そんなことすら
知らなかったあたしは大ばか者です。
まだまだ勉強が必要ですね。
わかりやすい説明ありがとうござました！！！

＞与一さん
そうなんですよね～～
tableでできれば何も苦労はしなくていいのですが…
cssでという希望のようなので
初心者にはきつかったです。

＞はるまきさん
わ～～～あたしなんかとはまったくレベルの
違うところでなやんでいらっしゃる…
もっと勉強して出直します！

みなさん本当にありがとうございました！！！
みなさんのおかげで仕事がなんとか終わりそうですｗ

[8] mixiユーザー 03月26日 04:25

>ハッシャンさん
ありがとうございます。やはりline-heightと画像はネスケ4.7では無理ですかぁ。そうするとネスケ4.7で先頭の文字の頭を調整し（すみません。頭揃えと書きましたが、頭揃えじゃなかったです。）さらに行間をつけるのは無理なのでしょうか？テーブルを使ってできるそうな気がするのですが、それも試したのですが、うまくいきませんでした。

>にしがきさん
質問に質問を重ねてすみません。お互い頑張りましょう！

[9] mixiユーザー 03月26日 08:08

みなさん遅くまですごいですね（笑

はるまきさん＞
すみませんまだ意味がわからないのですが、
文字を一文字下げたいということですかね？
もみじ<br />もみじ

<span class="disk">■</span><span class="ｔ11">もみじ<br />もみじ

.disk {color:#FFFFF;}

やり方はたくさんあると思います、line-heightと画像がだめなだけです。

ログインすると、みんなのコメントがもっと見れるよ