list-styleの変更がうまくできない

質問

せっかく画像も用意したのに、画像も表示されたのに、
http://hiromitsu.s220.xrea.com/basket.jpg
でも、表示されたら、なんか画像が変形してるんです。
http://hiromitsu.s220.xrea.com/index.html
（リンク先はまだ作ってません。）
なんでこんなことが起こるんですか？
なにが悪いですか？
よろしくお願いします。
sources
[css]

font-family: "MS Pゴシック";
font-style: nomal;
font-size:14pt;
line-hight: 150px;
background-image : url(basket.jpg) ;
background-position : left ; /* 位置は左端の真ん中 */
background-repeat : no-repeat ; /* 背景だけど繰り返し表示しない */
padding-left : 100px ; /* 「画像の横幅+マーカーとの距離」を左方向に空ける */
}

[html]
<dl>
<dt>
<ul>
<li><a href="xxx.html">理念</a></li>
<li><a href="yyy.html">製品</a></li>
<li><a href="zzz.html">プラン</a></li>
<li><a href="aaa.html">ご相談</a></li>
<li><a href="bbb.html">Q＆A</a></li>
<li><a href="index.html">home</a></li>
</ul>
</dt>
<dd>
...
</dd>
</dl>

回答No.2

u2122

［原因］
高さが指定されていない為に、画像の上のみしか表示されていないからだと思います。

あとsousisouai 様はリストの左側に画像を付けたいんですよね？
でしたら、このCSSではリストではなく、背景（background）に画像がくる設定になっています。

［CSS］
body{
font-family: "MS Pゴシック";
font-style: nomal;
font-size:14pt;
line-hight: 150px;
}
ul{
list-style:none;
margin-left:100px;
}
li{
background-image:url(./basket.jpg);
height:67px;/* 画像の高さを指定→これで画像が全部表示されます */
background-repeat:no-repeat;/* 画像の繰り返しを防止 */
padding-left:70px;/* 画像横幅分右に移動するので、画像と文字が重なり合うのを防止します */
}

としてみてはいかがでしょうか？