PDA

Click to See Complete Forum and Search --> : CSS images and links

difrad76
11-22-2005, 10:51 AM
What I am trying to do is to have a background image for the list that you can click on and to have my own image instead of a standard bullet.

This is how I am trying to achieve this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
.BodyBox {
background: #feffed;
width: 90%;
height: 6em;
text-align: left;
border: 1px solid silver;
margin: 1em;
padding: 0 0 0 0.5em ;
}
ul.mktree .bullet { cursor: pointer; background: url(/images/mktree_minus.gif) center left no-repeat; }
ul.mktree .bullet { cursor: pointer; background: url(/images/mktree_plus.gif) center left no-repeat; }
ul.mktree .bullet { cursor: default; background: url(/images/mktree_bullet.gif) center left no-repeat; }
ul.mktree li { list-style: none; color: blue; }
ul.mktree ul { color: black; padding-left: 10px; }
</style>
</head>

<body>
<div class="BodyBox">
<ul class="mktree">
<li><a href="#" onClick="return false;">
First Button</a></li>
<ul id="menu1" style="display:none" type="square">
<li>First Option</li>
<li>Second Option</li>
</ul>
<li><img src="images/mktree_plus.gif" border="0">Second Button</li>
</ul>
</div>
</body>
</html>

For some reason I don't have my image. What am I doing wrong?
radiks
11-22-2005, 04:39 PM
Try

ul { list-style-image: url("/images/mktree_minus.gif"); }

That is the property you are looking for.