Problem with an image next to a list with custom bullets

programming web dev
1

Hi ppl,

I’m creating a site which features lists with custom bullets. I have an image aligned to the left with the text wrapped around it. Problem is: when the text is a list, the bullets disappear. I’ve tried to fix it with margins but it doesnt work.

Example

The CSS I’m using:


.imageleft
	{
		float: left;
		margin-right: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
		border: 2px #4471A6 solid
	}
	
ul
	{
		margin: 0px 0px 0px 15px;
		padding: 0px;
		list-style: none;
	}

li
	{
		padding-left: 10px;
		background-image: url(bullet.gif);
		background-repeat: no-repeat;
		background-position: 0 5px;
	}

And the HTML:


<body>
	<b>XBox 360</b><br><br>
	<img src="xbox360.jpg" alt="Test" height="100" width="100" class="imageleft">
	<ul>
		<li>Listitem 1</li>		
		<li>Listitem 2</li>
		<li>Listitem 3</li>
		<li>Listitem 4</li>			
	</ul><br>	
	<b>Xbox 360</b><br><br>
	<ul>
		<li>Listitem 1</li>		
		<li>Listitem 2</li>
		<li>Listitem 3</li>
		<li>Listitem 4</li>			
	</ul>
</body>