Verschillende weergave

[NajKwin]

Hallo,

op de website van school hebben we een team pagina hierbij is een stukje java toegepast.
Link

nu wil het zo zijn dat de pagina in IE wordt weergegeven zoals bedoeld alleen in Chrome, Edge & Firefox wordt deze niet juist weer gegeven.

Weet iemand wat de oorzaak hier van is en wat er aan gedaan kan worden zodat hij in alle brouwser's juist wordt weer gegeven?

 

[Aar]

Ik raad aan dat je eerst de fouten even oplost:
https://validator.w3.org/nu/?doc=https://deberkenhorst.nl/deschool/hetteam1.html

En vanwaar de keuze om oude HTML zoals <font> tags te gebruiken?

 

[ariecade]

Ik zie in ieder geval in de console in Chrome (F12) dat een script over een onbeveiligde lijn opgevraagd wordt terwijl de rest wel over https gaat dus dat script wordt in ieder geval niet geladen:

Mixed Content: The page at 'https://deberkenhorst.nl/deschool/hetteam1.html' was loaded over HTTPS, but requested an insecure script 'http://www.deberkenhorst.nl/cms/modules/cms/assets/js/common.js'. This request has been blocked; the content must be served over HTTPS.

Ik weet niet wat dat script precies doet maar het wordt nu in ieder geval niet geladen dus misschien het na de aanpassing wel goed gaat.

 

[NajKwin]

Hij laat de team foto zien en als je je muis over een persoon laat gaan wordt rechts een foto met informatie weergegeven>>

Als iemand anders een andere code heeft die het precies het zelfde doet hou ik me aan bevolen

GR naj

@ariecade

Hoe kan het dan dat hij in IE wel doet wat hij moet doen als hij het script niet laad?

 

[Aar]

Het staat er duidelijk:

This request has been blocked; the content must be served over HTTPS.

Dus gebruik https!

 

[NajKwin]

We hebben pasgeleden een nieuwe website gekregen deze link "http://www.deberkenhorst.nl/cms/modules/cms/assets/js/common.js bestaat niet meer

dit al verwijdert. er is wel een verbetering opgetreden maar nog niet het gewenste resultaat

 

[ariecade]

Hoe kan het dan dat hij in IE wel doet wat hij moet doen als hij het script niet laad?

Omdat het verschillende browsers zijn .........

Volgens mij is Chrome wat strenger als het gaat wat betreft mix-content dus die laad dit script dan niet maar misschien en andere browser weer wel. Dus om het in alle browsers goed te laten werken is het wel handig om dit soort problemen op te lossen want tenslotte wil je ook dat alle content over een https lijn gaat.

Misschien dat je naar deze optie kunt kijken of dat wat is? http://spajak.github.io/spzoom/

 

[Aar]

Trouwens, mouseovers zijn wel leuk, maar op een mobiele telefoon heb je er geen bal aan .

 

[bron]

Er wordt gebruik gemaakt van Bootstrap 3 voor de indeling en positionering, en ook voor andere dingen zoals de carrousel, enz..
Het lijkt erop dat de "grid" (indeling in rijen en kolommen) niet goed is toegepast.
Op internet staan voorbeelden maar let erop dat Bootstrap 4 een andere grid indeling heeft.

Hier vind je de Bootjstrap 3 grid (klik)


Dit zijn eigenlijk de stappen.

Werk van boven naar beneden en van links naar rechts.
Maak een indeling (grid) met class="container(-fluid)" en class="row" (rijen) en class="col-xx-yy" met precies 12 col per row.
Zet in elke col een paar woorden tekst en test dan de indeling in alle browsers.

Daarna kan begonnen worden met de bovenste row. Maak elke col per stuk in orde en test dit in alle browsers. Werk zo verder naar beneden.
Heb je meer ervaring, dan kan je een paar col tegelijk in orde maken maar test wel elke row voordat je verder gaat met de volgende row.

Het aandeel Internet Explorer 11 is zeer klein. Test met name in Chrome, Firefox, Opera en Edge

 

[bron]

Waarom vooral testen op Chrome, Edge en Opera?
Bij elkaar is dit een groot marktaandeel en ze gebruiken alle drie een Chromium-based engine (Edge sinds voorjaar 2019).

Blink     Google Chrome
Blink     Edge (vanaf april 2019)
Blink     Opera (vanaf 2013)
WebKit    Apple Safari
Gecko     Mozilla Firefox

End Of Life:
Trident   Internet Explorer
EdgeHTML  Edge (tot 2019)
Presto    Oude Opera versies