Bullet Points Image Bullet Tests

by TheFiddler

HTML

<h3>Default UL (should look like this)</h3>

<ul>
    <li>
         <h1>Headline inside list item!</h1><span>Span on second line</span>

    </li>
    <li>
         <h3>Bullet is next to this line</h3>

        <p>Second sentence displays below first</p>
    </li>
    <li><span>Text in span</span>

    </li>
</ul>

<h3>Background Image on li</h3>

<ul class="bg-img">
    <li>
         <h1>Bullet is does not line up with Headline</h1><span>Span on second line</span>

    </li>
    <li>
         <h3>Bullet should be next to this line</h3>

        <p>Any content can go in here</p>
    </li>
    <li><span>Bullet should look like default UL</span>

    </li>
</ul>

<h3>List-style-image</h3>

<ul class="basic">
    <li>
         <h1>Headline inside list item!</h1><span>Span on second line</span>

    </li>
    <li>
         <h3>Bullet should be next to this line</h3>

        <p>Second line should be closer to first line</p>
    </li>
    <li><span>Text in span</span>

    </li>
</ul>

CSS

ul.basic {
    list-style: none;
    list-style-image: url(http://placehold.it/8x8);
    margin: 0 0 0 0;
}
ul.basic li {
    margin: 1.00em 0 0 0;
    padding: 0 0 0 0;
}
ul.bg-img {
    list-style: none;
    margin: 0 0 0 0;
}
ul.bg-img li *:first-child {
    background-image: url(http://placehold.it/100x100);
    background-size: 8px 8px;
    background-repeat: no-repeat;
    background-position: 10px center;
    margin: 1.00em 0 0 -30px;
    padding: 0 0 0 30px;
}
span {
    font-size: 32px;
}