Internet Explorer laat website niet goed zien

[femke98]

Ik heb een website gemaakt in WP voor een stichting die visuitjes verzorgd voor gehandicapten/chronisch zieken.

Nu zijn er een aantal mensen die IE gebruiken en die laat de website niet zien zoals het werkelijk moet zijn. Het gaat met name om het menu.
Men kan het menu amper lezen omdat de groene balk ontbreekt in IE.

Ik ga op de website zetten dat men beter FF kan gebruiken omdat het 1. veiliger is en 2. FF laat zien zoals het eruit hoort te zien.
Maar dat is natuurlijk niet op de oplossing.

Foto zoals het eruit moet zien:


en zoals IE gebruikers het zien:


Wie kan mij vertellen hoe dit op te lossen is?

 

[femke98]

Aanvulling:
Ik heb het volgende gelezen

Soms worden websites niet weergegeven zoals u verwacht. Afbeeldingen verschijnen niet, menu's staan op de verkeerde plaats en tekst lijkt lukraak bij elkaar te zijn geplaatst. Dit kan worden veroorzaakt door een compatibiliteitsprobleem tussen Internet Explorer en de website die u bezoekt. Soms kan dit worden verholpen door de site toe te voegen aan uw compatibiliteitsweergavelijst.

Open het bureaublad en tik of klik op het pictogram Internet Explorer op de taakbalk.
Tik of klik op de knop Extra Extra en tik of klik vervolgens op Instellingen voor compatibiliteitsweergave.

Typ onder Deze website toevoegen de URL van de website die u aan de lijst wilt toevoegen en tik of klik vervolgens op Toevoegen.

Maar dat kan ik de lezers toch niet aan doen, plus de gebruikersgroep is niet handig met computers.

 

[bron]

Hai Femke,

Op IE11 ziet het menu van vimebe er inderdaag niet goed uit

Een goede weergave op verschillende browsers wordt "cross-browser" genoemd. Tijdens de bouw van een website moet hier al aan gewerkt worden. Tot en met IE9 moest er met IE echt rekening gehouden worden, maar ms heeft haar best gedaan om met IE10 en IE11 een best goede w3c browser neer te zetten die niet meer of mninder veilig is dan Chrome, Firefox, Safari, of wat dan ook.

 

[femke98]

Ja, ik weet dat het er niet goed uit ziet. Maar wat doe ik er aan, thats the question!

Is er iets wat ik bijv. in de head kan neerzetten?
Ik weet dat dit:

<link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/lib/css/css-for-stupid-browsers-named-ie.css" class="clearfix" />

ooit in een van mijn andere websites heeft gestaan en die website was overal goed te zien. Bij deze staat het niet in de head, en weet ook niet of je dit er zomaar bij kan zetten.

Of dat er iets anders in moet?

Wat mij trouwens opvalt bij https://www.browserstack.com is dat de achtergrond ook niet vast staat. Terwijl dat wel zo is ingesteld. Dus als je de nieuwsberichten ziet en naar beneden scrolt, je dan een wit valk krijgt te zien. Of een herhaling van de achtergrond. Heel raar.

 

[bron]

jaja, niet zo ongeduldig :d ik moet ff kijken hoor
Als ik onderaan style.css het volgende zet...

.menu-secondary-container {
	background-image: -o-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: -moz-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: -webkit-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: -ms-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: linear-gradient(to bottom, #639f19 0%, #87bd4d 100%);
}

...kun je daar wat mee?
als het werkt dan moet je het op de juiste plek in je css zetten.

*** aanvulling

[COLOR="#0000CD"]En verander dit[/COLOR]

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vimebe | Stichting vissen met beperking</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

[COLOR="#0000CD"]in dit met deze volgorde[/COLOR]

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vimebe | Stichting vissen met beperking</title>

Suc6. Have fun.

 

[bron]

Over je "css-for-stupid-browsers-named-ie" vraag
Verwijder dit

<link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/lib/css/css-for-stupid-browsers-named-ie.css" class="clearfix" />

en zet dit als eerste direct onder <body>

<!--[if lt IE 9]>
<div id="oldie">
<p>Deze verouderde browser wordt niet meer ondersteund.
<a href="http://browsehappy.com">Upgrade uw browser</a></p>
</div>
<![endif]-->

Have fun.

 

[femke98]

Joh, sorry voor mijn ongeduldigheid, was zeker niet de bedoeling. Meer enthousiasme!

Die stupid stond in een andere website van mij, niet in deze. Maar ik kan die code er natuurlijk wel inzetten van die wordt niet meer ondersteund.
En met de rest ga ik even stoeien.

De

.menu-secondary-container {
	background-image: -o-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: -moz-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: -webkit-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: -ms-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: linear-gradient(to bottom, #639f19 0%, #87bd4d 100%);
}

moet dan waar gezet worden in de css, dus waar iets staat over de background. Ik ga kijken!

Je aanvulling

En verander dit

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vimebe | Stichting vissen met beperking</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

in dit met deze volgorde

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vimebe | Stichting vissen met beperking</title>

is de head.

OKé, alvast dank! Geweldige hulp weer! En ik leer weer wat bij.

 

[femke98]

ps. Dit is mijn head:

<?php global $theme; ?><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php $theme->meta_title(); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<?php $theme->hook('meta'); ?>
<link rel="stylesheet" href="<?php echo THEMATER_URL; ?>/css/reset.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="<?php echo THEMATER_URL; ?>/css/defaults.css" type="text/css" media="screen, projection" />
<!--[if lt IE 8]><link rel="stylesheet" href="<?php echo THEMATER_URL; ?>/css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />

<?php if ( is_singular() ) { wp_enqueue_script( 'comment-reply' ); } ?>
<?php  wp_head(); ?>
<?php $theme->hook('head'); ?>

</head>

<body <?php body_class(); ?>>
<?php $theme->hook('html_before'); ?>

<div id="container">

    <div class="clearfix">
        <?php if($theme->display('menu_primary')) { $theme->hook('menu_primary'); } ?>
        
        <div id="top-social-profiles">
            <?php $theme->hook('social_profiles'); ?>
        </div>
    </div>
    

    <div id="header">
    
        <div class="logo">
        <?php if ($theme->get_option('themater_logo_source') == 'image') { ?> 
            <a href="<?php echo home_url(); ?>"><img src="<?php $theme->option('logo'); ?>" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>" /></a>
        <?php } else { ?> 
            <?php if($theme->display('site_title')) { ?> 
                <h1 class="site_title"><a href="<?php echo home_url(); ?>"><?php $theme->option('site_title'); ?></a></h1>
            <?php } ?> 
            
            <?php if($theme->display('site_description')) { ?> 
                <h2 class="site_description"><?php $theme->option('site_description'); ?></h2>
            <?php } ?> 
        <?php } ?> 
        </div><!-- .logo -->

        <div class="header-right">
            <?php $theme->option('header_banner'); ?> 
        </div><!-- .header-right -->
        
    </div><!-- #header -->
    
    <?php if($theme->display('menu_secondary')) { ?>
        <div class="clearfix">
            <?php $theme->hook('menu_secondary'); ?>
        </div>
    <?php } ?>

en zie dit dus niet staan:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Vimebe | Stichting vissen met beperking</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

 

[femke98]

Dit staat al in de secondaire menu container:

/* Menu Secondary
----------------------------*/

.menu-secondary-container {
    position:relative;
    height: 34px;
    z-index: 300;
    padding: 10px 0;
    -moz-box-shadow: 0 -1px 0 #59951b, inset 0 1px 0 #b3d99f;
    -webkit-box-shadow: 0 -1px 0 #59951b, inset 0 1px 0 #b3d99f;
    box-shadow: 0 -1px 0 #59951b, inset 0 1px 0 #b3d99f;
    background-image: -moz-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
    background-image: -o-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
    background-image: -webkit-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
    background-image: linear-gradient(bottom, #639f19 0%, #87bd4d 100%);

Jouw voorbeeld:

.menu-secondary-container {
	background-image: -o-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: -moz-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: -webkit-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: -ms-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	background-image: linear-gradient(to bottom, #639f19 0%, #87bd4d 100%);
}

Alleen zonder background-image: -ms-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
en die heb ik er nu tussen gezet.

 

[bron]

Je hebt nu xhtml en html5 in je head door elkaar staan. De eerste regels t/m <title> worden

<?php global $theme; ?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta charset="<?php bloginfo('charset'); ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php $theme->meta_title(); ?></title>

Check dan even de html in je browser of alles klopt.

De css die je bij Old IE kunt gebruiken

<!--[if lt IE 9]>
<div id="oldie">
<p>Deze verouderde browser wordt niet meer ondersteund.
<a href="http://browsehappy.com" target="_blank">Upgrade uw browser</a></p>
</div>
<![endif]-->

#oldie {
	width: 100%;
	padding: 1px 0;
	background: #666;
	font: normal 14px Verdana, Geneva, sans-serif;
	text-align: center;
	color: #fff;
}
#oldie a {
	color: #ff0;
	white-space: nowrap;
}

Suc6. have fun.

 

[femke98]

Heb alles nu gedaan. Heb alleen een andere code gebruikt, namelijk deze

<script> 
var $buoop = {c:2}; 
function $buo_f(){ 
 var e = document.createElement("script"); 
 e.src = "//browser-update.org/update.min.js"; 
 document.body.appendChild(e);
};
try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
catch(e){window.attachEvent("onload", $buo_f)}
</script>

want die van jou zag ik niet.

die geeft dit aan:


Verder heb ik getest met deze website http://dev.modern.ie/tools/screenshots/#http://www.vimebe.nl/
en als je dan de website ingeeft (http://vimebe.nl) dan zul je zien dat de achtergrond of wordt herhaalt of dat deze overloopt in een andere kleur.
(althans overloopt, links wel en rechts niet omdat daar weer de kleur groen te zien is)
Ik weet niet of het zo is als men de website echt gebruikt en gewoon scrolt.....?
Zo ja, dan moet ik toch iets anders verzinnen om dat wat netter te laten zien.

Op mijn pc is het in ieder geval okee.

 

[bron]

RE: Heb alleen een andere code gebruikt
Het nadeel van dit script is dat het weer een ander script ophaalt (update.min.js) en dat het na verversen van de pagina niet meer wordt getoond. De html die ik gaf werkt vriendelijker. Je ziet 'm alleen in IE8 of lager. Om te testen (of om de css aan te passen) kun je tijdelijk <!--[if lt IE 9]> en <![endif]--> even weghalen.

<meta name="viewport" ....> staat er dubbel in. De regel *onder* <title> kun je het beste weghalen.

De website "Can I Use" http://caniuse.com is handig om te controleren wat op welke browser en op welke versie goed werkt.

Enne, als je echt alle ouwe troep wil ondersteunen :d

.menu-secondary-container {
	/* IE 6-7 - kan beter in ie.css */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#87bd4d, endColorstr=#639f19);
	/* IE 8 - kan beter in ie.css */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#87bd4d, endColorstr=#639f19)";
	/* Opera */
	background-image: -o-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	/* Firefox */
	background-image: -moz-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	/* Chrome, Safari */
	background-image: -webkit-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	/* IE */
	background-image: -ms-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
	/* w3c */
	background-image: linear-gradient(to bottom, #639f19 0%, #87bd4d 100%);
}

RE: de achtergrond of wordt herhaalt of dat deze overloopt in een andere kleur
Ik weet niet hoe precies deze test-website is.

Have fun.

 

[femke98]

Enne, als je echt alle ouwe troep wil ondersteunen

Nou nee hoor, dan moet men maar niet met troep werken

RE: Heb alleen een andere code gebruikt
Het nadeel van dit script is dat het weer een ander script ophaalt (update.min.js) en dat het na verversen van de pagina niet meer wordt getoond. De html die ik gaf werkt vriendelijker. Je ziet 'm alleen in IE8 of lager. Om te testen (of om de css aan te passen) kun je tijdelijk <!--[if lt IE 9]> en <![endif]--> even weghalen.

Die code van jou ga ik op de plek zetten van waar ik die andere gezet heb.

<meta name="viewport" ....> staat er dubbel in. De regel *onder* <title> kun je het beste weghalen.

Heb ik weggehaald.

 

[femke98]

Willen mensen met Windows en IE kijken naar de website hoe het er nu uitziet?

https://www.browserstack.com geeft dit aan





en alleen Windows 7 met IE9 geeft dit aan:



dus zonder groene menu balk.

De stichting krijgt toch nog meldingen dat de groene menu balk in IE niet te zien is.
Geen idee welke versie IE de lezers gebruiken. En ik denk dat daar nu juist het probleem ligt.

 

[bron]

Ik heb in vmware ff gecheckt op vista met ie9 en het klopt inderdaad. Dit is de oplossing hoop ik

/*IE7-IE9 does not support gradients*/
background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
/*IE10*/
background: -ms-linear-gradient(#fff, #000);
/*W3C*/
background: linear-gradient(#fff, #000);
/*IE7,IE8,IE9*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');

Verander de kleuren #fff en #000 even in jouw kleuren.

Suc6. Have fun.

 

[femke98]

Dan wordt het ipv :

.menu-secondary-container {
    position:relative;
    height: 34px;
    z-index: 300;
    padding: 10px 0;
    -moz-box-shadow: 0 -1px 0 #59951b, inset 0 1px 0 #b3d99f;
    -webkit-box-shadow: 0 -1px 0 #59951b, inset 0 1px 0 #b3d99f;
    box-shadow: 0 -1px 0 #59951b, inset 0 1px 0 #b3d99f;
    background-image: -moz-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
    background-image: -o-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
    background-image: -webkit-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
    background-image: -ms-linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
    background-image: linear-gradient(bottom, #639f19 0%, #87bd4d 100%);
}

wordt het dit:

.menu-secondary-container { 
/*IE7-IE9 does not support gradients*/
background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
/*IE10*/
background: -ms-linear-gradient(#fff, #000);
/*W3C*/
background: linear-gradient(#fff, #000);
/*IE7,IE8,IE9*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
}

maar dan even met de kleuren gewijzigd?

Of moet het ergens anders? Ik snap het nu even niet meer.

 

[bron]

Grrr! Die ouwe ellendige IE browsers.

Voor IE9 wordt een SVG geadviseerd. Op ColorZilla vind je de css

.menu-secondary-container {
	position: relative;
	height: 34px;
	z-index: 300;
	padding: 10px 0;
	-webkit-box-shadow: 0 -1px 0 #59951b, inset 0 1px 0 #b3d99f;
	   -moz-box-shadow: 0 -1px 0 #59951b, inset 0 1px 0 #b3d99f;
	        box-shadow: 0 -1px 0 #59951b, inset 0 1px 0 #b3d99f;
	/*
	   hier komt de gradient css van het linkje hierboven
	*/
}

Als alternatief kun je een plaatje gebruiken als achtergrond en al die css voor de gradient weglaten. Dan wordt het iets als

	background-image: url('map/map/menu-background.png');
	background-repeat: repeat-x;

Het achtergrond plaatje moet je dan eerst op je website opmeten en dan kun je 'm downloaden van ColorZilla.

Suc6 Have fun.

 

[femke98]

Ga geen plaatje gebruiken, want dan heb ik een template voor niets
Ik bedoel, het is een menu, met een groene balk en met menuknoppen erop. Dat is er niet voor niets.
Ik ga IE 9 niet apart behandelen

Ik zal dat menu secondary morgen nog eens bekijken en anders laat ik het lekker zo, dan moeten al die mensen met IE9 hun IE maar eens updaten.
Want verder werkt het goed.