bernhard

[solved] need help: uikit problem on IE11

Recommended Posts

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

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

 

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

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

36914121_10212773242462138_7187903682850062336_n.png.06b589e6b9f254c0e7b45397fba127b9.png

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.