Announcement

**Excavator** · Apr 10, 2009, 04:40 PM

Hello kuvik,
I've always had better luck replacing bullets by putting the image as a background of the li.
Like this - http://nopeople.com/CSS/li_image/index.html

Could try this too -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>tests</title>
	<style type="text/css">
html, body {
		font-size: 12px;
		font-family: Verdana, Helvetica, sans-serif;
		color: #222;
		line-height: 20px;
	}
	
	* {
		padding: 0px;
		margin: 0px;
	}
	
	.sidebar-box {
	}
	
	ul.sidebar-box {
		list-style-type: none;
		width: 200px;
	}

	.sidebar-box li {
		background-color: #DDDDDD;
		margin-bottom: 1px;
	}
	
	.sidebar-box li * {
vertical-align: middle;
		margin-right: 6px;
	}

	</style>
</head>

<body>
	<ul class="sidebar-box">

                <li><img src="folder.png" alt="" /><a href="">Link 1</a></li>
				<li><img src="folder.png" alt="" /><a href="">Link 2</a></li>
				<li><img src="folder.png" alt="" /><a href="">Link 3</a></li>
				<li><img src="folder.png" alt="" /><a href="">Link 4</a></li>
				<li><img src="folder.png" alt="" /><a href="">Link 5</a></li>
				<li><img src="folder.png" alt="" /><a href="">Link 6</a></li>

			</ul>
</body>

</html>

Announcement

Problem with LI height and vertical-align (Firefox)

Problem with LI height and vertical-align (Firefox)

Comment