Gap between <li>s

css, gaps-in-visuals, html, html-lists

Solution

With css3 you can add columns to your lists

ul.gmc-ingredient-list {
    margin: 0;
    padding:0;
    -moz-column-count: 2;
    -moz-column-gap: 0;
    -webkit-column-count: 2;
    -webkit-column-gap: 0;
    column-count: 2;
    column-gap: 0;
    width:300px;
}
ul.gmc-ingredient-list li {
    background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent;
    list-style: none outside none;
    padding: 0px 0 0 20px;
    width:130px;
}

don't forget to remove the float from the li

Example: http://jsfiddle.net/LWBdp/3/

IE Problems CSS columns don't seem to work for IE, if you leave the float:left in there it will look like you had in IE but will look better in the other browsers!

For more information about css-columns take a look at this article at w3schools

Problem

To avoid long lists I've got my li set to float: left so that they alternate rows. However, on occasion this causes an unintentional gap between elements when the content in a li takes up two lines. My HTML is: ``` <ul class="gmc-ingredient-list"> <li>500g Tagliatelle</li> <li>50g wortel</li> <li>50g ui</li> <li>50g bleekselderij</li> <li>100g pancetta</li> <li>200g half-om-half-gehakt</li> <li>200g rundergehakt</li> <li>200 ml Primitivo (rode wijn)</li> <li>200ml runderbouillon</li> <li>5 eetlepels tomatenpuree</li> <li>Olijfolie</li> <li>Zeezout</li> <li>Verse peper</li> </ul> ``` My CSS is: ``` ul.gmc-ingredient-list { margin: 0; padding: 0; list-style: none; width: 300px; } ul.gmc-ingredient-list li { background: url(http://allesoveritaliaanseten.nl/wp-content/uploads/2012/11/aoie-list.png) no-repeat scroll left top transparent; list-style: none outside none; padding: 0px 0 0 20px; width: 130px; float: left; } ``` And the output looks like http://allesoveritaliaanseten.nl/ragu-alla-bolognese/ But there are also some cases in which a li takes up two lines and the output is just fine like http://allesoveritaliaanseten.nl/italiaanse-tomatensoep/ How can I stop the list showing those gaps?

Original source