Styling Unordered Lists (Using Images instead of Bullets)

+1 Colm O'Neill · November 1, 2014
<!DOCTYPE html PUBIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
            <style type="text/css">
                   img {max-height:1px;
                   max-width:1px;}

               ul     {border: 1px solid blue;
                       list-style-image:url(check.png);
                       padding:300;}

            </style>
</head>
<body>
            <ul>
                      <li>apples</li>
                      <li>pies</li>
                      <li>dumplings</li>
            </ul>
</body>
</html>


image dimensions: 256x256 


Hi,

My problem is that I can't get the image to shrink to a usable size.
The list gets spaced out too much and I have to use square, circle or katakana instead.
Any help much appreciated.

Post a Reply

Replies

Oldest  Newest  Rating
+1 Samuel Oloruntoba · November 5, 2014
/images/forum/upload/2014-11-05/c74e6cf8f4d73c7f1fb01e2fe4f1fe35.JPG
0 Colm O'Neill · November 4, 2014
Thanks:) How do you post code like you did on the forums?
+1 Samuel Oloruntoba · November 2, 2014

ul {
    list-style-image: url('sqpurple.gif');
}
  • 1

HTML / CSS / Web Design

107,348 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators