16
Feb

Quick tip: eliminate margins between li elements in firefox

When it comes to cross browsing testing, webdesigners usually fear the moment they must open up their beautifully designed website in Internet Explorer 8 or lower. Though nothing has changed there, this quick tip will focus on a firefox bug I recently encountered. 

For one of my websites, I wanted a horizontal navigation menu where the <li> elements fell inline next to each other, no margin’s between them. Easy you’d say, just put the margins to 0. Correct, but for some reason, in firefox, there always remained a gap between them.

The solution, it seemed was quite simple, in stead of doing it the readable way and put each <li> element on a seperate line, you must also write the code inline, with no spaces in between. It seems that if you put them on different lines, firefox automatically adds a margin of its own.

So your code would be something like

<nav>
  <ul>
    <li>link one</li><li>link two</li><li>link three</li>
  </ul>
</nav>

A real life example can be viewed on this site.