4

I made a menu , I have worked with chrome but now when I try with firefox I get spacing between items

In chrome In Chrome

In Firefox In Firefox

Here's The CSS

http://jsfiddle.net/Mazala/mpc1o2gf/

HTML :

 <nav>
        <ul class="menu">
            <li id="accueil"><a href="./index.html" class="iconeAccueil">Accueil</a></li>
            <li id="bureau"><a href="./bureau.html">Bureau</a></li>
            <li id="actualites"><a href="./actualites.html">Actualités</a></li>
            <li id="partenaires"><a href="./partenaires.html">Partenaires</a></li>
            <li id="contact"><a href="./contact.html">Contact</a></li>
            <li id="liens"><a href="./liensutiles.html">Liens utiles</a></li>
            <li id="Liens"><a href="#liens">lien+subtitles</a>
                    <ul class="sousmenu">
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                    </ul>
            </li>
            
        </ul>
    </nav>

CSS in the link .

Thanks for help.

Community
  • 1
  • 1
user3568611
  • 133
  • 2
  • 14
  • possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) – showdev May 04 '15 at 20:49

2 Answers2

1

Using inline block will make any text/spaces between your elements treated as text, and style them accordingly. One quick fix (if pure images) was to set the font-size to 0 (that wouldn't work for you since you have actual text in there).

The easiest solution, if you don't care about having the perfect looking code and just getting it to work, is to remove all extra spaces in your code. Which I did to your code, and it works:

<ul class="menu">
    <li id="accueil"><a href="./index.html"     class="iconeAccueil">Accueil</a></li><li id="bureau"><a href="./bureau.html">Bureau</a></li><li id="actualites"><a href="./actualites.html">Actualités</a></li><li id="partenaires"><a href="./partenaires.html">Partenaires</a></li><li id="contact"><a href="./contact.html">Contact</a></li><li id="liens"><a href="./liensutiles.html">Liens utiles</a></li><li id="Liens"><a href="#liens">lien+subtitles</a><ul class="sousmenu"><li id="Liens"><a href="#liens">Liens utiles</a></li><li id="Liens"><a href="#liens">Liens utiles</a></li><li id="Liens"><a href="#liens">Liens utiles</a></li><li id="Liens"><a href="#liens">Liens utiles</a></li></ul></li>
</ul>

https://jsfiddle.net/mpc1o2gf/1/

Bryant
  • 454
  • 4
  • 20
0

That's a common issue with inline-block elements. By default, there some some spacing surrounding those elements. It's somewhat counter-intuitive but default behavior.

There are a few fixes to this. My preferred is to float the li elements. There are some caveats. Read this for a full understanding.

Chris Remst
  • 41
  • 1
  • 6