LI Menu button alignment problems in MS Edge

[Electrik]

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 http://dev.psdrotoworx.com/

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="http://dev.psdrotoworx.com/products/">
<span class="menu-image-hover-wrapper">
<img class="menu-image menu-image-title-hide" width="86" height="50" alt="products-off" src="http://dev.psdrotoworx.com/wp-content/uploads/2016/03/products-off.png">
<img class="hovered-image menu-image-title-hide" width="86" height="50" style="margin-left: -86px;" alt="products-on" src="http://dev.psdrotoworx.com/wp-content/uploads/2016/03/products-on.png">
</span>
</a>
</li>

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.

[Paulie_D]

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.

[Electrik]

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.

[Author]

Posts