HTML is a great language but sometimes designing web applications drives you nuts. Last week I had an issue with a menu list I created in a website. For a strange reason it always showed two pixels of whitespace between each menu item. Whatever I did or changed in the CSS, nothing seemed to work. Same issue for Firefox and IE.
The HTML looked something like this:
1: <ul>
2: <li><a href="#">Home</a></li>
3: <li><a href="#">File</a></li>
4: <li><a href="#">Project</a></li>
5: <li><a href="#">Build</a></li>
6: </ul>
7:
By accident I found out that putting the li on one line did the trick.
1: <ul>
2: <li><a href="#">Home</a></li><li><a href="#">File</a></li><li><a href="#">Project</a></li><li><a href="#">Build</a></li>
3: </ul>
It were a very expensive 2 pixels…