The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS LI Menu button alignment problems in MS Edge

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #240237

    I’m creating a site that has images as menu buttons. These are placed horizontally as List items. The menu displays as expected in every browser except MS Edge. Here is the site

    Here is sample HTML for one button:

    <li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17">
    <a class="menu-image-title-hide menu-image-hovered" href="">
    <span class="menu-image-hover-wrapper">
    <img class="menu-image menu-image-title-hide" width="86" height="50" alt="products-off" src="">
    <img class="hovered-image menu-image-title-hide" width="86" height="50" style="margin-left: -86px;" alt="products-on" src="">

    I would post the CSS as well, but after several hours I still don’t know what part of it is actually causing the problem. The closest I can work out is that the LI isn’t sticking to the width of the image. I’ve tried setting a fixed width for the LI but that just created problems in every other browser.

    Thanks in advance and I hope this isn’t too vague.


    Images in button are usually a bad idea…and not very semantic.

    Why not make then background images then you can size them any way you want…and you are separating styling from content as you should.

    I can’t test Edge at work…but I can look later.


    Thanks, that makes sense and I would like to do it that way but, in short, I’m having to use a WordPress plugin, so I’m stuck with doing it this way. That would be great if you could have a look. Thanks, again.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.