IE 11 Displaying Blank Space Between Sub Items...

[imagecrafting]

We are using smartmenus.js on our site and LOVE the way they work, but we are seeing an IE problem (Best Shocked Look).

If you go to dnn.bistromd.com in chrome you will see your menus working correctly in every way. But if you use IE, there is about a 1 or 2 px space between all of the submenu items.

Have you seen this before or do you have any idea how it could be corrected?

Thanks in Advance,

Michael

[imagecrafting]

Just noticed it’s also just between the 1st and second items…

[admin]

Hi,

Do you still get the issue because I just tested with IE 8/9/10/11 and didn’t notice any gap between the main menu or sub menu items? Maybe you’ve already fixed the issue?

Thanks!

[imagecrafting]

Thank you for taking the time to look at it. Yea, we still get it. I am attaching a screenshot from my version of IE (11.0.9600.17239). It is very subtle and only about 1 pixel between the 1st and second drop down items. Please let me know 🙂

[admin]

OK, I noticed it – it happens just when the page is zoomed in/out (i.e. is not 100%) for me. I guess it’s some sort of rounding issue probably related to font rendering since it seems to be dependent on the line-height value for the links, probably font-size, too, etc.

Anyway, it seems to produce a fake 1px bottom margin for some of the LI’s so I would suggest to fix it by setting the same background used for the LI’s to the sub menu UL’s too – e.g. you could just modify the following rule in “bmd-2014-header.css”:

  .sm-simple ul li,
  .sm-simple-vertical li {
    border-left: 0;
    background: #edede7;
    color: #963547;
  }

like this:

  .sm-simple ul,
  .sm-simple ul li,
  .sm-simple-vertical li {
    border-left: 0;
    background: #edede7;
    color: #963547;
  }

Let me know if you still have any troubles.

[imagecrafting]

Thanks so much for your help, that fixed it fine 🙂

[admin]

Np! 🙂

[Author]

Posts