Forum Moderators: not2easy
I only want white space between the items on the list - I don't want whitespace between lines of text that are part of the same item.
Check it out (this is an html file which will show the problem):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#list_benefits li {
line-height: 2.2em;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<ul id="list_benefits" >
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdf</li>
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdf</li>
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdf</li>
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdf</li>
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdfdfgdfggfgdgfdfgfg dfg d df dfgd fggd fgdgfd ffd gdfgdff ggf df gdfgdfgdgfddggfdg dfgdfg dgf dfgddf gdgf dfgdgdfgd fgd fgd g d fg d fd fg dg df dfg dg d fgd fgd fgd fgd fg dfg dg fd d gd fg dg dfg fdg dg df dg df</li>
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdf</li>
</ul>
</body>
</html>
I have just one more issue. When I use an image as the bulletpoint, the image always centres itself vertically on a bulletpoint, if the text for that bulletpoint has more than one line. I would prefer it if the bulletpoint image was always next to the *1st* line of text in a bulletpoint. Is there a way to do this?
Here is my code (note: you will need an image in this location /images/tick.gif):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#list_benefits li {
list-style-type: none;
background-image: url(/images/tick.gif);
background-repeat: no-repeat;
padding-left: 3.4em;
margin-bottom: 15px;
background-position: 2em;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<ul id="list_benefits" >
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdf</li>
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdf</li>
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdf</li>
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdf</li>
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdfdfgdfggfgdgfdfgfg dfg d df dfgd fggd fgdgfd ffd gdfgdff ggf df gdfgdfgdgfddggfdg dfgdfg dgf dfgddf gdgf dfgdgdfgd fgd fgd g d fg d fd fg dg df dfg dg d fgd fgd fgd fgd fg dfg dg fd d gd fg dg dfg fdg dg df dg df</li>
<li>Content sdsf sdfsdfsddfsdf sdfs fdfsf sdf</li>
</ul>
</body>
</html>
list-style-image: url(images/tick.gif);
Marshall
The following validates (HTML 4.01 Transitional, loose) and looks v similar in FF2, IE7 and Opera9
--------
<style type="text/css">
UL.myUL{
list-style-image: url(images/favicon.ico);
padding-left:5em;
padding-bottom:0em;
}
LI.myLI{
padding-bottom:1em;
}
</style>
<ul class="myUL">
<li class="myLI">Nunc velit. Integer auctor, ante sit amet laoreet pulvinar, purus erat scelerisque enim,
ut convallis diam sapien eu nibh. Vestibulum mi ligula, euismod non, blandit nec, luctus eget, enim.
Vestibulum eu leo nec leo sagittis aliquet. Pellentesque habitant morbi tristique senectus et netus et
</li> <li class="myLI">Vestibulum mi ligula, euismod non, blandit nec, luctus eget, enim.
</li> <li class="myLI">Pellentesque habitant
</li>
</ul>
<p>
Curabitur tortor ligula, condimentum id, adipiscing at, faucibus vel, est. Quisque scelerisque nibh
vel libero. Nam suscipit ante in arcu. Proin non libero sit amet turpis cursus venenatis.
</p>
<ul class="myUL">
<li class="myLI">Nunc velit
</li> <li class="myLI">Nunc
</li>
</ul>
