MSIE list-style-image & list-style-position issues

Forum Moderators: not2easy

Message Too Old, No Replies

MSIE list-style-image & list-style-position issues

The li image is shown too close to the text

lotus_anima

9:32 pm on Apr 2, 2005 (gmt 0)

I'd be grateful if someone could take a look at the navigation list item images on ... in Internet Explorer 6 and then in an alternate browser (Opera, Firefox, etc.)

<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

Is there a way to solve this spacing issue of the list item images being too close to the text itself?

[edited by: tedster at 8:48 am (utc) on April 4, 2005]

lotus_anima

11:35 pm on Apr 2, 2005 (gmt 0)

Here is simplified code of what I'm referring to...


<html>
<head>
<title>Example</title>
<style type="text/css">
ul{
 list-style-type: none;
 list-style-position: inside;
 list-style-image: url("http://radio.ataensic.net/img/arrow.gif");
}
</style>
</head>
<body>
<h1>Internet Explorer...</h1>
<ul>
<li>Sucks</li>
<li>Should be sued</li>
<li>Doesn't conform</li>
</ul>
</body>
</html>

noodleman

1:35 am on Apr 3, 2005 (gmt 0)

Shouldn't that be:

li {/stuff/} instead of ul{/stuff/}?

eljaykay

5:19 am on Apr 3, 2005 (gmt 0)

Hi -
There are loads of resources on this issue available out there - try Site Point's CSS forum or a search for 'browser bugs' and you'll hit a bevy of them.
It seems that browsers interpret things differently, and IE being the most notorious [and cantankerous]...

One thing that usually does the trick is to set the ul with NO margins or padding - unless it's a simple margin:0 auto; if it needs to be centered.

Then, you can either add any necessary padding to the li's or the img used to space things the way you want them to be. [Beware, though that IE will often cut-off images that are left-aligned unless you do some tweaking!]

Good luck,
El