Search code examples
htmlcssinternet-explorer-11

HTML5/CSS3 - IE11 display navbar li differently than chrome and firefox

We just re designed my company's website, and in 2 pages, we have a navbar that have anchors to the articles below.

We worked on Firefox and Chrome, no bug on displaying and well aligning the list. But we actually found out that the displaying went horrible on IE11 (in Edge also, but also acts differently).

I'm desperatly trying to find out a compromise between all these browsers so that the code can work everywhere.

Here's the part that messes up in IE11 enter image description here

Here how it's supposed to appear ( works in firefox/chrome ) : enter image description here

Also, in firefox and chrome, we visualise an icon in this li, that doesn't appear in IE11.

Would you guys help us figure out how to fix this thing ?

Thanks

**EDIT : Here's some on the main css for these display : ** 

#menu-logiciel ul {
    display: inline-table;
    margin-bottom: 0;
}
#menu-logiciel {
    text-align: center;
}
#menu-logiciel li a {
    display: inline-block;
    width: 180px;
    text-decoration: none;
    color: #005898;
    font-weight: bold;
    text-align: center;
    margin: 5px;
    font-size: 140%;
    font-weight: bold;
    height: 90px;
}
 #menu-logiciel li {
         display:inline; 
      }

And here's the html code : 

<div id="menu-logiciel">

    <ul class="paragraphes-articles" style="padding-left: 0;">
    <li class="liens-rubriques"><a href="/index.php/it-engineering#anchorwipbox"><i class="uk-icon-chevron-down"></i> CONSULTING ET AUDIT</a></li>
    <li class="liens-rubriques"><a href="/index.php/it-engineering#anchorcamille"><i class="uk-icon-chevron-down"></i> BUSINESS INTELLIGENCE</a></li>
    <li class="liens-rubriques"><a href="/index.php/it-engineering#anchorcairm" id="tma"><i class="uk-icon-chevron-down"></i>TMA</a></li>
    <li class="liens-rubriques"><a href="/index.php/it-engineering#anchortoolbox" style=" width: 185px;padding-left: 10px;"><i class="uk-icon-chevron-down"></i> INTEGRATION DE SERVICES</a></li>

</ul>
</div>
Solution

  • I was able to see the problem in Edge too. If you look in Chrome, you'll see that the computed values are different for the display for the <i class="uk-icon-chevron-down"></i>:

    • In Chrome: display: block
    • In IE/Edge: display: inline-block

    Which is interesting because the only style that seems to affect those i's display seems to make it inline-block and not block, so I'm guessing that there may be another style that conflicts with it although I have not found it (there are some -ms-* specific styling which could explain the differences but again I couldn't fix it just by removing them).

    A simple solution I found was to make the i have a display: block, that way the chevron will occupy the whole width of the li and push the text down instead of having it on the side:

    .liens-rubriques > a > i.uk-icon-chevron-down {
  display: block;
}