[solved] need help: uikit problem on IE11

[bernhard]

Hi, I have a problem on this site with IE11: http://www.hrdiamonds.com/ueber-uns/

that's how it looks like:

And that's how it should look:

Any help is highly appreciated ? Thanks!

[theo]

Could it be this problem?

https://github.com/philipwalton/flexbugs/issues/160

https://github.com/philipwalton/flexbugs/issues/75

[dragan]

If you reduce the image max-width (or the div above with no class) to approx. 66%, it looks OK. But ONLY in IE ?

Maybe use MS vendor prefixes for IE, or the old if-IE conditional tags

[AndZyk]

Just a guess, because I have no virtual machine available, but maybe it has to do with the div.uk-inline before the actual image. This div.uk-inline and the div without classes before seem to have no use or am I missing something? I think you could remove them and see if this helps. ?

Edit: It seems to be an issue with flex box.

[Tom.]

Hey,

I've been working with UIKit for about 4-5 years now. There are a few IE11 bugs relating to flex box. 

I would try changing your markup from:

<div class="uk-child-width-1-1 uk-child-width-expand@m uk-child-width-1-2@s uk-flex-center uk-grid" uk-grid="">
    <div class="uk-flex uk-flex-center uk-flex-middle uk-first-column">
        <div>
            <div class="uk-inline ">
                <img data-src="/site/assets/files/1262/imageedit_5_5811401713.600x400.jpg" width="" height="" alt="" uk-img="" src="https://www.hrdiamonds.com/site/assets/files/1262/imageedit_5_5811401713.600x400.jpg">
            </div>
        </div>
    </div>
    <div>
        <p style="text-align:justify;"><strong>Qualität - Begeisterung</strong><br> Wir setzen neue Maßstäbe mit unseren lösungsorientierten und umsetzungsstarken Konzepten. Vor Ort begleiten wir Sie bei der erfolgreichen Durchführung der gemeinsam beschlossenen Maßnahmen. Wir begeistern
            Sie mit unseren Ideen und unserer engagierten Arbeitsweise.</p>
    </div>
    <div class="uk-flex uk-flex-center uk-flex-middle ">
        <div>
            <div class="uk-inline ">
                <img data-src="/site/assets/files/1264/imageedit_2_9167790703.600x400.jpg" width="" height="" alt="" uk-img="" src="https://www.hrdiamonds.com/site/assets/files/1264/imageedit_2_9167790703.600x400.jpg">
            </div>
        </div>
    </div>
    <div>
        <p style="text-align:justify;"><strong>KundIn - Familie</strong><br> Wir gestalten mit Ihnen eine individuelle und persönliche Arbeitsatmosphäre. Sie als KundIn sind Dreh- und Angelpunkt und stehen im Zentrum unserer Aufmerksamkeit. Trotzdem wollen wir eine Balance zwischen
            Beruf und Familie schaffen – für Sie und für uns.</p>
    </div>
</div>

To:

<div class="uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-4@m" uk-grid>
    <div>
      <img data-src="/site/assets/files/1262/imageedit_5_5811401713.600x400.jpg" uk-img>
    </div>
    <div>
        <p style="text-align:justify;"><strong>Qualität - Begeisterung</strong><br> Wir setzen neue Maßstäbe mit unseren lösungsorientierten und umsetzungsstarken Konzepten. Vor Ort begleiten wir Sie bei der erfolgreichen Durchführung der gemeinsam beschlossenen Maßnahmen. Wir begeistern
            Sie mit unseren Ideen und unserer engagierten Arbeitsweise.</p>
    </div>
    <div>
      <img data-src="/site/assets/files/1264/imageedit_2_9167790703.600x400.jpg" uk-img>
    </div>
    <div>
    	<p style="text-align:justify;"><strong>KundIn - Familie</strong><br> Wir gestalten mit Ihnen eine individuelle und persönliche Arbeitsatmosphäre. Sie als KundIn sind Dreh- und Angelpunkt und stehen im Zentrum unserer Aufmerksamkeit. Trotzdem wollen wir eine Balance zwischen
            Beruf und Familie schaffen – für Sie und für uns.</p>
    </div>
</div>

 

[bernhard]

Thx @Tom. your solution works. Not sure what we'll do, because there are also some other bugs on IE11 that I'd have to fix. IE11 usage is <3% worldwide...

[Tom.]

Post them on here if you want @bernhard I don't mind having a crack at fixing them ? 

[bernhard]

@fl0eck found the simplest fix ? I just had to add width:100% to one parent div