0

I have a .svg logo that I need to display on my page and found that it does not appear right on IE11. its scaled and just a part of it appears , whereas other browsers display correctly. I changed its height property to max-height and it looks fine now. I could not find a proper explanation as to why that happened. Will anybody be able to help me here

CSS which did not work in IE

.svglogo {
  height:70px;
}

CSS which worked

.svglogo {
  max-height: 70px;
}
keerti
  • 245
  • 5
  • 19
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Oct 04 '17 at 15:44

1 Answers1

0

In IE 11 for height property, instead of giving in pixels try giving it in %, also if at all there is a parent element it should also have a height that is in %, if there is a break in the chain then it won't work. Check this answer
You can add browser-specific property for ie in your css and give the max-height for that class, which will also solve the problem.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Also, remember that always try to give the in % or em so that when the browser resizes, the logo won't get distorted. You can also try this:

.svglogo {
  height:70px !important;
}
merilstack
  • 703
  • 9
  • 29
  • But I did not have a percentage in there. it was just height:100px that did not work – keerti Oct 04 '17 at 14:48
  • Try giving height:70px !important; – merilstack Oct 04 '17 at 14:58
  • no. !imprtant did not work. I did find a solution. Changing height to max-height worked and its showing fine now, All I need is a reason for why 'max-height' is working and not 'height' – keerti Oct 04 '17 at 15:05