リストに指定したマークの位置がずれてしまいます
特定のブラウザでリストで指定したマークの位置がずれてしまい困っています。
safari,firefoxは大丈夫なのですが、IE7,operaだと文字に対してより過ぎて、さらに文字半個分、左斜め上に表示されてしまいます。
リストマークのサイズは20×20です。
マークをlist-style-type: square;などにすると普通に表示されます。
非常に困っています。宜しくお願いします。
<style type="text/css">
<!--
body {
background-color: #333333;
background-image: url(images/left_background.jpg);
background-repeat: repeat-y;
width: 150px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FF6600;
text-decoration: none;
}
a:hover {
color: #FFCC00;
text-decoration: underline;
}
a:active {
color: #990000;
text-decoration: none;
}
-->
</style>
<style type="text/css">
<!--
ul {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
line-height: 40px;
font-size: large;
font-weight: bold;
list-style-image: url(images/arrow.gif);
list-style-position: outside;
}
#base {
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
padding-top: 20px;
padding-left: 20px;
}
-->
</style>
<link rel="shortcut icon"href="/images/favicon.ico" />
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
.style24 {font-size: x-large}
-->
</style>
</head>
<body>
<div id="base">
<ul>
<li> <a href="main.html" target="mainFrame">Home</a></li>
<li> <a href="image.html" target="mainFrame">Image</a></li>
<li> <a href="flash.html" target="mainFrame" >Flash</a></li>
<li> <a href="logic.html" target="mainFrame" >Music</a></li>
<li> <a href="link.html" target="mainFrame"> Link</a></li>
</ul>
</div>
</body>
お礼
ありがとうございます。試してみたところうまくいきました。