CODEWITHSUNDEEP
htmlcsspaddingmarginhtml-lists
Doug Fir
Doug Fir

Reputation: 21212

unordered list spacing

I have an unordered list in the footer of my html doc. The first two lines of the list contain social media logos (img). The footer, containing element of the list, has a green background and I have selected the 1st two list items, the images, and given them a white background so as they stand out in this green "ribbon". The problem is that between the 2 images there is a strip of green. I have tried setting the padding and margin to zero on each of the following elements: img, a and li yet I cannot get rid of this strip. Can anyone tell me what I am forgetting here? Here is the code:

    <footer> 
        <ul class="navigation">
        <li><a href="facebook.com"><img src="images/facebooklogo.png" alt="facebook icon" /></a></li>
        <li><a href="#"><img src="images/gplus.png" alt="google plus icon" /></a></li>
        <li><a href="design.htm" >design</a></li>
        <li><a href="salvage.htm" >salvage</a></li>
        <li><a href="suigeneris.htm" >sui generis</a></li>
        <li><a href="flooring.htm" >flooring</a></li>
        <li><a href="paneling.htm" >paneling</a></li>
        <li><a href="beams.htm" >beams</a></li>
        <li><a href="reclaimedwood.htm" >reclaimed wood</a></li>
    </ul>

</footer>

and the styling:

footer {
    width: 100%;
    background: #80A353;
    }

footer .navigation li a {
    color: white;
    }

footer .navigation li:first-child a, footer .navigation li:first-child + li a {
    background: white;
    display: block;
    }

footer .navigation {
margin-left: auto;
margin-right: auto;
width: 850px;
border: none;
}

footer img {
vertical-align: middle;
    }

Upvotes: 0

Views: 1019

Answers (1)

Gerben
Gerben

Reputation: 16825

The ribbon is a space. Because you use display: inline-block; the whitespace between the <li>'s is rendered as a normal space. To remove this you need to remove the whitespace from the html.

See http://jsfiddle.net/MjRYt/3/

Upvotes: 1

Related Questions