Grow your CSS skills. Land your dream job.

List Style Image Issue

  • # October 9, 2012 at 5:19 pm

    I’ve used images in place of list style default icons before with no issue. For some reason, probably simple & dump, I can’t get this one to work properly. I’m wanting the text to show directly to the right of the new icon image. I have the code over @ [codepen](http://codepen.io/anon/full/Jktmh “Code @ Codepen”).

    HTML

    <ul>
    <li><a href="#"><h6>Test Item</h6><span>October 1</span></a></li>
    <li><a href="#"><h6>Test Item</h6><span>October 3</span></a></li>
    <li><a href="#"><h6>Test Item</h6><span>October 5</span></a></li>
    </ul>

    CSS

    li { list-style-image: url('http://cdn4.iconfinder.com/data/icons/cologne/32x32/calendar.png'); }
    li a { vertical-align: top; }
    li h6 { font-size: 14px; margin: 0px; }
    li span { font-size: 12px; }
    a { text-decoration: none; }

    # October 9, 2012 at 5:52 pm

    @Maddtechwf Someone might be able to improve this: http://codepen.io/anon/pen/gBLGs

    # October 9, 2012 at 6:40 pm

    @ChristopherBurton

    Looks good to me.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".