Floating divs werken niet in IE, wel in Chrome

donderdag 28 juni 2018 22:31

Acties:

0 Henk 'm!

Topicstarter

Ik bouw een website "from scratch" en probeer deze responsive te maken.
Veel gelezen en geprobeerd en ik heb precies bereikt wat ik wil.
Alleen werkt het wel in Chrome, maar niet in IE10/11

Ben begonnen met een frameset (ja, zo'n antieke, dat ga ik zeker nog naar de 21e eeuw ombouwen) om snel een vaste kop en een 'content' sectie te hebben.
De content bestaat uit een variabel aantal 'vierkante' div-jes, waarvan er zoveel op een rij gezet worden als past, gecentreerd, en als het scherm groter/kleiner gemaakt wordt dan veranderd het aantal div-jes per regel.

De div-jes genereer ik met PHP en zijn het resultaat van een zoekactie die gestart is in m'n 'head frame'.
Het kan dus 1 div-je zijn, maar ook 100+.
In IE wordt elk div-je scherm-breed weergegeven (uitgerekt) terwijl ze in Chrome wel de maat hebben die ik meegeef in de CSS (240x240px)

De HTML pagina die in het onderste frame wordt weergegeven:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=ANSI">
        <title>Weergeven</title>
        <link rel="stylesheet" type="text/css" href="./html/style.css" />
</head>
<body>
<br />
<div class="container">
    <div class="card">..content.. </div>
    <div class="card">..content.. </div>
    <div class="card">..content.. </div>
    <div class="card">..content.. </div>
    <div class="card">..content.. </div>
... meer divs..
</div>
</body>
</html>

en daarbij heb ik deze css gemaakt:

code:

BODY {
    background      :#FFFFFF;
    margin          :0px;
    border          :0px;
    padding         :0px;
    font-family     :Tahoma, Helvetica, Arial, sans-serif;  
    color           :#000000;
}

div.card{
    border: 1px solid black;
    font-size : 11px;
    padding: 10px 10px 10px 10px;
}
.container {
    display: grid;
    width: 90%;
    height: 100%;
    margin: auto;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(240px, 1fr));
    
}

Iemand een idee hoe ik IE zover krijg dat deze de kleine div-jes goed gaat weergeven?

donderdag 28 juni 2018 23:23

Acties:

0 Henk 'm!

Wim-Bart

Zie signature voor een baan.

Absoluut positioneren en eventueel z-order gebruiken. IE kan het wel namelijk. Controleer de juiste style opties wel even, er zit nuance verschil in, bijvoorbeeld de abs positie is bij ene vanaf frame waarin geplaatst, andere weer vanaf 0,0 linker top frame. Heel verwarrend soms.

Beheerders, Consultants, Servicedesk medewerkers. We zoeken het allemaal. Stuur mij een PM voor meer info of kijk hier De mooiste ICT'er van Nederland.

vrijdag 29 juni 2018 01:16

Acties:

+1 Henk 'm!

Demonitzu

Incidentele gebruiker

Internet Explorer ondersteunt helaas alleen een oudere specificatie (uit 2011!). Je hebt extra definities nodig:

code:

.container {
    display: -ms-grid;
    -ms-grid-columns: ...;
    -ms-grid-rows: ...;
}
.container > *{
    padding: 5px;
}

[ Voor 80% gewijzigd door Demonitzu op 29-06-2018 01:26 ]

TekkenZone - Dutch Tekken Community

vrijdag 29 juni 2018 09:17

Acties:

+1 Henk 'm!

Spinal

IE ondersteunt het automatisch plaatsen van items niet. Voor IE moet je voor elk element de row en column opgeven. Ik heb hier laatst nog een JS-hack voor geschreven:

JavaScript:

var applyGridPlacement = function() {
    var items = document.querySelectorAll('.card');
    if (items.length === 0) {
        return;
    }
    for (var i = 0; i < items.length; i++) {
        items[i].style.msGridRow = Math.floor(i / 3) + 1;
        items[i].style.msGridColumn = Math.floor(i % 3) + 1;
    }
};

En dan uitvoeren op DOMContentLoaded.

Full-stack webdeveloper in Groningen

vrijdag 29 juni 2018 10:30

Acties:

0 Henk 'm!

Boogie

Topicstarter

Spinal schreef op vrijdag 29 juni 2018 @ 09:17:
...
En dan uitvoeren op DOMContentLoaded.

@Spinal Dat is nog eens een charmante oplossing!

Script in de <head> gezet tussen <script>tags aangevuld met

code:

1	document.addEventListener('DOMContentLoaded', applyGridPlacement, false);

Maar dat lijkt niets te doen, geen foutmelding etc.
Enig idee?
Of heb ik ook de CSS van @Toshin hierbij nodig?

[ Voor 6% gewijzigd door Boogie op 29-06-2018 10:31 ]

vrijdag 29 juni 2018 10:35

Acties:

+1 Henk 'm!

DJMaze

Gebruik ook

HTML:

1	<!DOCTYPE html>

Niet het html4 gedeelte

Maak je niet druk, dat doet de compressor maar

vrijdag 29 juni 2018 11:40

Acties:

+1 Henk 'm!

NMe

Quia Ego Sic Dico.

Waarom werk je met grid en niet met flex? Dat is juist om een site responsive te maken vaak veel fijner. En als dit de eerste keer is dat je zoiets doet, misschien is het dan een idee om Bootstrap te gebruiken zodat je eerst kan zien hoe anderen dit probleem getackeld hebben.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

vrijdag 29 juni 2018 12:51

Acties:

+1 Henk 'm!

_Thanatos_

Ja, en kaal

Toshin schreef op vrijdag 29 juni 2018 @ 01:16:
Internet Explorer ondersteunt helaas alleen een oudere specificatie (uit 2011!). Je hebt extra definities nodig:
code:
1
2
3
4
5
6
7
8
.container {
    display: -ms-grid;
    -ms-grid-columns: ...;
    -ms-grid-rows: ...;
}
.container > *{
    padding: 5px;
}

Bespaar jezelf de moeite en gebruik Autoprefixer. Je wil helemaal niet na hoeven denken over hoe het precies anders moet voor een oude spec. Het is meer dan alleen wat andere naampjes; het werkt veel anderser dan dat

Spinal schreef op vrijdag 29 juni 2018 @ 09:17:
IE ondersteunt het automatisch plaatsen van items niet. Voor IE moet je voor elk element de row en column opgeven. Ik heb hier laatst nog een JS-hack voor geschreven:
JavaScript:
1
2
3
4
5
6
7
8
9
10
var applyGridPlacement = function() {
    var items = document.querySelectorAll('.card');
    if (items.length === 0) {
        return;
    }
    for (var i = 0; i < items.length; i++) {
        items[i].style.msGridRow = Math.floor(i / 3) + 1;
        items[i].style.msGridColumn = Math.floor(i % 3) + 1;
    }
};
En dan uitvoeren op DOMContentLoaded.

Ook Autoprefixer, icm een polyfill zoals deze. Bespaar jezelf de moeite om zelf een polyfill in elkaar te klussen. Iemand anders heeft dat al gedaan, en die heeft er vast meer tijd in gestopt dan jij.

[ Voor 42% gewijzigd door _Thanatos_ op 29-06-2018 12:54 ]

日本！🎌

vrijdag 29 juni 2018 14:07

Acties:

0 Henk 'm!

Boogie

Topicstarter

NMe schreef op vrijdag 29 juni 2018 @ 11:40:
Waarom werk je met grid en niet met flex? Dat is juist om een site responsive te maken vaak veel fijner. En als dit de eerste keer is dat je zoiets doet, misschien is het dan een idee om Bootstrap te gebruiken zodat je eerst kan zien hoe anderen dit probleem getackeld hebben.

Met frameworks heb ik geen ervaring, tot nu toe (en dat is toch al 20+ jaar) heb ik altijd gewoon zelf alles gemaakt. Over Bootstrap hoor ik goede verhalen, dus misschien moet dat het maar worden.

Voor wat betreft grid en flex; ik heb een goed werkend grid voorbeeld gevonden en aangepast aan mijn wensen; ik sluit niet uit dat flex ook kan, maar nog geen voorbeeld gevonden.

Inmiddels toch al serieus werk gemaakt van het zoeken van voorbeelden, maar hoewel het mij redelijk triviaal lijkt, kan ik nergens een werkende oplossing vinden.

vrijdag 29 juni 2018 14:19

Acties:

+1 Henk 'm!

Ramon

grid is nou eenmaal wat ingewikkeld. Flex is al een stukje eenvoudiger en heeft betere support onder de verschillende browsers, maar je zou voor zover ik je doel begrijp hier zelfs floats voor kunnen gebruiken. Misschien kan je een jsfiddle maken met daarin de uitgewerkte oplossing zoals die in Chrome werkt, zodat we kunnen kijken wat we eraan kunnen doen om hem in IE te laten werken?

Overigens zou ik persoonlijk niet meer voor IE10 ontwikkelen, dat voegt weinig toe anno 2018! Wel zou ik kijken naar Firefox en Edge.

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

vrijdag 29 juni 2018 14:24

Acties:

0 Henk 'm!

Boogie

Topicstarter

_Thanatos_ schreef op vrijdag 29 juni 2018 @ 12:51:
[...]

Ook Autoprefixer, icm een polyfill zoals deze. Bespaar jezelf de moeite om zelf een polyfill in elkaar te klussen. Iemand anders heeft dat al gedaan, en die heeft er vast meer tijd in gestopt dan jij.

Al 4 Jaar niet meer onderhouden?!
Misschien is zelf het wiel uitvinden niet meer van deze tijd, maar ik wil altijd wel graag weten hoe het exact werkt. bednakt voor het meedenken in ieder geval.

vrijdag 29 juni 2018 14:27

Acties:

0 Henk 'm!

Klaasvaak

Kan je is precies uitleggen wat je probeert te bereiken. Met de code uit je eerste post is alleen de eerste rij 240px hoog, de overige rijen zijn niet hoger dan de content. Is het trouwens de bedoeling dat de boxen precies vierkant blijven? Nu worden het rechthoeken al ik mijn window resize, doordat de hoogte altijd 240px blijft.
Als ze vierkant moeten blijven en moeten groeien (min-width: 240px, max-width: fr), zou ik niet weten hoe je dat in MSIE zou moeten oplossen. Boxen met een vaste breedte gecentreerd houden, waarbij de containerbreedte van 90% wordt losgelaten zal in MSIE wel lukken.

vrijdag 29 juni 2018 14:32

Acties:

0 Henk 'm!

Boogie

Topicstarter

JSfiddle gemaakt: https://jsfiddle.net/nq9sbatu/1/
daarin zie ik dat hij ook, zoals @Klaasvaak zegt, alleen de eerste rij 240 hoog maakt.
In (de meest recente) chrome zie ik dat niet, maar dat kan ook komen doordat de div's bij mij meer content hebben (die ik niet publiek kan tonen).

vrijdag 29 juni 2018 14:42

Acties:

0 Henk 'm!

Boogie

Topicstarter

@Ramon, ziet er goed uit, alleen nu (heel) graag nog elke regel gecentreerd; dus dat de witruimte die nu rechts zit voor de helft aan de linkerkant komt.
De with en height aan de .card toevoegen scheelt in ieder geval dat ze in IE in het juiste formaat worden weergegeven, als is het nog maar 1 per regel

https://stackoverflow.com...o-i-center-float-elements nog een container er omheen

https://jsfiddle.net/nq9sbatu/8/ lijkt op wat ik wil, gecentreerd.

[ Voor 20% gewijzigd door Boogie op 29-06-2018 15:35 ]

vrijdag 29 juni 2018 19:09

Acties:

0 Henk 'm!

Ramon

Afbeeldingslocatie: https://i.imgur.com/yXunOdt.png

Dit is wat ik zie. Ik weet niet of dat de bedoeling is maar gecentreerd lijkt het me alvast niet.

=edit=
Je moet echt die display: grid weghalen, is overbodig.

[ Voor 17% gewijzigd door Ramon op 29-06-2018 19:18 ]

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

maandag 2 juli 2018 09:15

Acties:

0 Henk 'm!

Spinal

_Thanatos_ schreef op vrijdag 29 juni 2018 @ 12:51:
Ook Autoprefixer, icm een polyfill zoals deze. Bespaar jezelf de moeite om zelf een polyfill in elkaar te klussen. Iemand anders heeft dat al gedaan, en die heeft er vast meer tijd in gestopt dan jij.

Nee bedankt, ik gebruik liever mijn eigen 10 regels code dan een overdreven uitgebreide polyfill van 80kB. Die van mij doet precies wat het moet doen (voor deze site in ieder geval)

Full-stack webdeveloper in Groningen

dinsdag 3 juli 2018 09:55

Acties:

0 Henk 'm!

_Thanatos_

Ja, en kaal

Boogie schreef op vrijdag 29 juni 2018 @ 14:24:
[...]

Al 4 Jaar niet meer onderhouden?!
Misschien is zelf het wiel uitvinden niet meer van deze tijd, maar ik wil altijd wel graag weten hoe het exact werkt. bednakt voor het meedenken in ieder geval.

To be fair, er zijn ook al 4 jaar geen browsers meer uitgekomen die deze polyfill nodig hebben

日本！🎌

Vraag

Alle reacties