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.