Ul li issues with IE

HTML & CSS
1

Hello,

Another issue I am having with ul li and IE. :x:x:x:x:x:mad::mad:

I have an unordered list with a bullet point. All looks fine in Chrome and Firefox, but in IE the bullets have a left indent that is not supposed to be there and there is no gap between the bullet and the text.

Code:

}
.content ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
.content ul li {
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 4px;
	list-style-image: url(../images/bullet.gif);
	padding: 0px;
	list-style-position: inside;
}
2

Each browser sets its own defaults, so unless you override them, they still apply. You can easily get rid of all defaults with something like this:

ul, li {margin: 0; padding: 0;}
3

Hello ralph.m

I did that. You gave me the CSS reset a couple of days ago that I have applied.

4

Ah, right, I should have looked at your code more closely. We’d really need to see a live link to get a sense of what’s happening here.

5

Yeah, I realise that I am limiting myself with getting help from you guys by not having a live site. This is a website for the company I am working, it is not live yet, and not to be uploaded/launched until it is all ready.
I have found a way around this. I have removed the bullet points, the actual bullet image and the list is rendered OK on IE and have just manually inserted a dash…

6

Hm, an alternative is to make up a test page that includes the error and post it here. All you need is the relevant CSS and HTML—but make sure to test the sample first to ensure that it demostrates the problem. E.g. post your code here like this:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Page</title>
	
<style media="all">
[I][COLOR="#FF0000"]relevant styles here[/COLOR][/I]
</style>
	
</head>
<body>

[I][COLOR="#FF0000"]relevant HTML here[/COLOR][/I]

</body>

</html>