CODEWITHSUNDEEP
cssinternet-explorer-11
Steve
Steve

Reputation: 1765

IE11 not respecting height: auto

In Internet Explorer 11, at https://www.superiorit.com.au, the "s control" icon at top right displays with height: 94px;

enter image description here

as specified in the img tag:

<img src="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png" width="375" height="94" srcset="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png 375w, https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal-300x75.png 300w" sizes="(max-width: 375px) 100vw, 375px" class="so-widget-image">

but the CSS height: auto; in:

.so-widget-sow-image-default-eef982a7180b .sow-image-container .so-widget-image {
    display: inline-block;
    max-width: 100%;
    width: inherit;
    height: auto;
}

is not being respected by IE11. Chrome respects this CSS and reduces the height of the img to 25px tall:

enter image description here

How do I make IE11 display the image @ 25px tall?

Upvotes: 5

Views: 16149

Answers (4)

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

You can use IE specific css, IE 11 supported css is :

*::-ms-backdrop,

Another thing you have to do is, you have to remove inline height and width attribute from img tag. You have to set max-height in your css class. So your code should be like 

*::-ms-backdrop,.so-widget-sow-image-default-eef982a7180b .sow-image-container .so-widget-image {
  display: inline-block;
  height: auto;
  max-width: 100%;
  width: inherit;
  max-height:30px
}

Hope this will help you.

Upvotes: 0

satyajit rout
satyajit rout

Reputation: 1651

remove width="375" height="94" from img tag

<img src="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png" srcset="https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal.png 375w, https://www.superiorit.com.au/wp-content/uploads/2017/11/new_connect_logo_web_normal-300x75.png 300w" sizes="(max-width: 375px) 100vw, 375px" class="so-widget-image">

and make width: 100%

.so-widget-sow-image-default-eef982a7180b .sow-image-container .so-widget-image {
    display: inline-block;
    max-width: 100%;
    width: 100%;
    height: auto;
}

Upvotes: 2

Cy Rossignol
Cy Rossignol

Reputation: 16817

Remove the display: inline-block style from #siteorigin-panels-builder-9 (the container .widget for the topmost header elements.

This is interfering with the somewhat-fragile layout that combines float, flexbox, and calc() widths.

Upvotes: 6

Umesh Gupta
Umesh Gupta

Reputation: 21

Add max-height:30px

.so-widget-sow-image-default-eef982a7180b .sow-image-container .so-widget-image {
  display: inline-block;
  height: auto;
  max-width: 100%;
  width: inherit;
  max-height:30px
}

Upvotes: 1

Related Questions