Forum Moderators: not2easy
have a small issue with a ul li. I am trying to set up two styles, one with a graphic bullet and one without.
CSS
#fulltext ul {
margin-left:40px;
padding-bottom:1em;
}
#fulltext ul li {
list-style: url(../images/bp.png) inside;
}
#fulltext ul li.nobullet {
list-style: none;
}
HTML
<ul>
<li class="nobullet">Sustainable</li>
<li class="nobullet">Moderation</li>
</ul>
This works fine Opera and firefox, but does not work in IE (6 or 7) where it displays the graphic. Any ideas what is wrong?
to
#fulltext ul li.nobullet {
list-style-image: none; list-style-type: none;
}
The first piece removes the image, the second piece removes the default marker. It isn't enough to just go with list-style: or list-style-type:
<body>
<head>
<style>
#fulltext ul {
margin-left:40px;
padding-bottom:1em;
}#fulltext ul li {
list-style: url(bullet-ball.gif) inside;
}#fulltext ul li.nobullet {
list-style-image: none; list-style-type: none;
}
</head>
</style>
<body>
<div id="fulltext">
<ul>
<li>Sustainable</li>
<li class="nobullet">Moderation</li>
</ul>
</div>
<!--
have a small issue with a ul li. I am trying to set up two styles, one with a graphic bullet and one without.This works fine Opera and firefox, but does not work in IE (6 or 7) where it displays the graphic. Any ideas what is
wrong?
-->
</body>
</html>
You could do something like:
#fulltext ul li.bullet {
list-style-image: url(../images/bp.png);
list-style-position: inside;
}
#fulltext ul li.nobullet {
list-style-type: none;
}
There are several choices. It depends upon what will be used most and least. The configuration used most should be set for the simplest call for the declaration.
