Forums

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
    Posts
  • #240237
    Electrik
    Participant

    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.

    #240242
    Paulie_D
    Moderator

    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.

    #240243
    Electrik
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.