- This topic is empty.
April 5, 2016 at 4:21 am #240237ElectrikParticipant
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.April 5, 2016 at 5:02 am #240242Paulie_DModerator
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.April 5, 2016 at 5:23 am #240243ElectrikParticipant
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.
- The forum ‘CSS’ is closed to new topics and replies.