0

From this answer I've set all parent containers of the img icons in the Services menu of this site in order to prevent the icons from displaying smaller than in Chrome.

In Chrome (correct):

enter image description here

In IE 10 (mostly incorrect):

enter image description here

The IE specific stylesheet I use is:

<!--[if IE]>
    <link rel="stylesheet" href="https://www.orsgroup.com.au/wp-content/themes/nevada-child/css/ie.css" media="screen" />
<![endif]-->

containing:

html, body, #wrap, #nav-wrap, #nav-wrap .container, .ubermenu, .ubermenu-nav, .ubermenu-submenu, .ubermenu-item, .ubermenu-target {height: 100%;}

However, the img icons still display small.

There is CSS in the main stylesheet:

.ubermenu .ubermenu-image:not(.ubermenu-image-lazyload) {
    height: auto;
}

yet the icons in IE all seem to display at the same height as the service heading: e.g. <span class="ubermenu-target-title ubermenu-target-text">Employment Services</span>

I hate the IE inspector and have difficulty using it.

Help appreciated.

Community
  • 1
  • 1
Steve
  • 2,066
  • 13
  • 60
  • 115
  • Why not set their height as `1em` in that case? Instead of `auto`? – somethinghere Jun 21 '16 at 14:19
  • In Chrome, the `img` icons display as the client is happy with, and they're adapting to the containing ` – Steve Jun 21 '16 at 14:22
  • `auto` wouldn't fulfil either of those requirements, it just implies the standard height for the image. They probably all appear the same height _because thats their natural height_. – somethinghere Jun 21 '16 at 14:33
  • Right. The inline width and height are 10px. Why does Chrome enlarge them? I can't see a CSS rule which does this. And why does IE not behave the same way? – Steve Jun 21 '16 at 14:41
  • When I view it in chrome, it is not enlarged. The solution I have below is tested only in chrome. Haven't tested in IE. – Anthony Jun 21 '16 at 14:44
  • Thanks. Works in IE too. – Steve Jun 21 '16 at 18:44

1 Answers1

1

It seems like you are making the images a width of 10px and a height of 10px within your image tags. If you control your html you can remove these and it should work fine. If you only control the css just add width: auto; to the following: 

.ubermenu .ubermenu-image:not(.ubermenu-image-lazyload) {
    height: auto;
    width: auto;
}
Anthony
  • 1,439
  • 1
  • 19
  • 36
  • 1
    Just to add, images don't really adhere to that definition of width height unless as a last resort (like no mention of them _at all_ in CSS). – somethinghere Jun 21 '16 at 14:44
  • So why does adding `width: auto;` tells the browser to make the `img` larger? Is the browser interpreting that as an instruction to display the `img` in its actual size? – Steve Jun 21 '16 at 18:37
  • Good question. I've posted a question about this [here](http://stackoverflow.com/questions/37952824/css-overriding-width-and-height-attribute-why). – Anthony Jun 21 '16 at 19:17