Logo distorted in shrinked header on Internet explorer 11

[Lukas]

Lukas

May 26, 2017 at 7:44 am

Hi guys,

as much as I don’t like IE and don’t want to make “exceptions” for it in design or programming, it’s still used by many of my customers :(. On every site I built using Ascend theme, I had to update the CSS for shrinked header logo sizing, as on IE11 the ratio doesn’t stay the same.

On Chrome, firefox it’s all good, but on IE11 the logo gets squeezed – width remains, height is smaller. Example: artisanat.sk.

The workaround I use is ok, but probably not the optimal solution:

1. I identify IE11
2. if IE11, I force the logo same size for standard and shrinked header

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
.kt-header-position-above #logo a .ascend-logo {max-height:74px !important;}
}

@supports (-ms-ime-align:auto) {
.kt-header-position-above #logo a .ascend-logo {max-height:74px;}
}

I picked this up on Stackoverflow. Working example: *Login to see link

BTW, Internet Explorer should be banned as bloatware that doesn’t keep up with technology. Hate it.

thanks,
Lukas