Sat, 2004-01-17 22:35
Using a images to replace bullets
ul { list-style-image: url("arrow.gif"); }
...but the images do not lined up vertically with the text--in IE the images are slightly higher than center, in NN the images appear centered.
Is there a way to vertically center these bulleted images? Or a better way to replace the standard bullets with images?
Sun, 2004-01-18 00:53
#1
CSS images for bullets
try vertical-align: middle;
Regards
Day
Sun, 2004-01-18 08:22
#2
CSS images for bullets
thanks for the suggestion, but that does not appear to change the alignment.
Sun, 2004-01-18 13:54
#3
CSS images for bullets
hmmm I found that MOZ should not have a problem but IE does.
have a look at this link they use an alternative. http://www.bigbaer.com/css_tutorials/unordered.list.item.marker.styles.htm
Regards
Day
Tue, 2004-02-17 19:54
#4
CSS images for bullets
Try something like this:
#maincontent ol, #maincontent ul {
margin: 0.5em;
padding-left: 10px;
margin-left: 10px;
}
#maincontent li {
line-height: 1.4;
margin-bottom: 10px;
padding-left: 5px;
margin-left: 5px;
list-style: disc url(../images/i/list.gif) inside;
vertical-align: top;
}
#maincontent ul ul li {
margin-top: 10px;
list-style: disc url(../images/i/inner.gif) inside;
vertical-align: top;
}
#maincontent ol.coder {
font-family: "Courier New", Courier, monospace;
margin-top: 10px;
list-style-image: none !important;
list-style: decimal outside !important;
padding-left: 1em !important;
margin-left: 1em !important;
vertical-align: top;
}
.coder li {
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
margin-bottom: 0 !important;
padding: 2px !important;
margin-left: 0 !important;
list-style-image: none !important;
list-style: decimal outside !important;
vertical-align: top;
}
.coder li.two {
background-color: #eee;
}
#maincontent ul.inlinelist {
padding: 0;
margin: 0;
}
#maincontent .inlinelist li {
display: inline;
padding: 0 5px 0 0;
margin: 0;
border: 0;
}