Lists and CSS and Web Browsers
Getting Lists to Look the Same in IE and Firefox
Standard List
<ul>
<li><a href="">List item 1</a></li>
<li><a href="">Item in the list #2</a></li>
<li><a href="">And the final list element</a></li>
</ul>
Return to Lists and CSS Article
Use an Image as the Bullet
Fake an Internet Explorer bullet:
Fake a Firefox bullet:
#ie li {
list-style-image: url(bullet_ie.gif);
}
#ff li {
list-style-image: url(bullet_ff.gif);
}
Return to Lists and CSS Article
Remove List Bullets and Use an Image Background
#heart {
margin: 1.3em;
padding: 0;
}
#heart li {
list-style: none;
background: url(16-heart-red-xxs.png) no-repeat left center ;
padding-left: 1.2em;
}
Return to Lists and CSS Article
Turn the List into Buttons
#button li {Jennifer Kyrnin
list-style: none;
margin: 0.5em;
}
#button li a {
color: #000;
text-decoration: none;
display: block;
border-top: #ccc solid 3px;
border-left: #ccc solid 3px;
border-bottom: #000 solid 3px;
border-right: #000 solid 3px;
width: 10em;
background: #eee;
text-align: center;
}
#button li a:hover {
border-top: #000 solid 3px;
border-left: #000 solid 3px;
border-bottom: #ccc solid 3px;
border-right: #ccc solid 3px;
background: #666;
color: #fff;
}
