Browser check IE versie 6

[moxie]

Voor een site waarvan de layout en navigatie helemaal in de soep loopt bij gebruik van IE 5.0 en 5.5 wil ik zolang een browsercheck invoegen op de homepage. Deze moet nagaan of de bezoeker een browser gebruikt die ouder is dan versie 6 en dan hier een melding van maakt met link naar de site van windows (om IE 6.0 te downloaden).

Ik heb me al suf gezocht en kan talrijke scripts vinden die checken op bijv. Netscape of IE en dan bijv. versie 5 of hoger. Maar hoe krijg ik voor elkaar wat ik nodig heb? Dus een check voor 5.5 of lager?

Mijn dank zou groot zijn. Dat geeft me namelijk weer even wat tijd om uit te zoeken wat er mis gaat.

[BernardV]

Zo even uit het blote hoofd...

Werkt vast...

<script language="javascript" type="text/javascript">
var navi = navigator.appVersion;
if(navi.indexOf("MSIE")>-1){
var navAr = navi.split(";");
alert(parseFloat(navAr[1].split(" ")[2])>5.5?"Groter dan 5.5":"Deze browser doen we niets mee :P");
} else {
alert("Geen MSIE");
}
</script>

[moxie]

Dag Bernard! En bedankt voor je hulp! De door jouw gegeven code werkt inderdaad goed, alleen zou je me nog even het volgende mogen uitleggen: Ik wil namelijk bij gebruik van IE6 géén alert laten zien, en op dit moment geeft het script altijd een melding, of-of. In geval van gebruik met versie 6 zal het bijvoorbeeld altijd de alert geven "groter dan 5.5".

Bedankt alvast! :)

[BernardV]

var navi = navigator.appVersion;
if(navi.indexOf("MSIE")>-1){
var navAr = navi.split(";");
if(parseFloat(navAr[1].split(" ")[2])>5.5)
{
//IE 6
} else {
//IE 5.5 of lager
}
} else {
//Geen MSIE
}


Bij het commentaar kun je zelf invullen wat je wilt dat er gebeurd.

[moxie]

Thank you! :)
Nu alleen nog de 'fouten' herstellen. Ik durf niet eens te kijken wat IE7 er straks van gaat bakken... :S

[BernardV]

Wat voor rare dingen gebruik je dan dat het niet wil draaien op 5.5?
Dat het op 5.0 niet draait kan ik me iets bij voorstellen, tenminste als je javascript gebruikt. Daar zitten nogal wat "bugs" in. Maar 5.5 lijkt me niet echt een probleem.

[moxie]

Ik weet eerlijk gezegd ook niet wat er fout gaat. Het enigste wat ik wel gebruik is een stukje javascript om een css menu naar behoren te laten werken (http://www.ribwmb.nl). Maar verder niks. Alleen ook raar dat het menu aan de linkerkant in 5.5 en ouder óók niet zichtbaar is en de footer óók niet. Plus dat de boel nog eens verschoven is ook :(.
Als jij zo uit de losse pols weet waar het aan kan liggen dan hoor ik dat graag van je!

[mknol]

misschien ligt het aan dit (vreemd verweven met comment tags): <![CDATA[
check je site ook eens in een validator
* HTML (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.ribwmb.nl%2Fsite%2F)
* CSS (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.ribwmb.nl%2Fsite%2Fwp-content%2Fthemes%2Fribw%2Fstyle.css)
* Feed (http://validator.w3.org/feed/check.cgi?url=http%3A%2F%2Fwww.ribwmb.nl%2Fsite%2F %3Ffeed%3Drss2)

Er zitten hier en daar ook fouten in.

[moxie]

Helaas niet. Ik heb zojuist dat stuk en daarna zelfs even dat hele javascript even weggehaald, maar in IE5.0 en 5.5 zie ik geen verschil. In IE6.0 zorgt het compleet weghalen er alleen maar voor dat de rollover van de <li> niet meer meer werken. De rest blijft intact. Misschien moet ik nóg eens gaan kijken naar ze z-indexen, hoewel ik dat al een paar keer gedaan heb :(.

[mknol]

even wat rondgeneust in je css, en er vielen me een aantal dingen op. Misschien dat het geen verschil maakt, maargoed.

#nav li.firstli, #nav li.topli {
background:url(images/liblokje.gif) no-repeat top left #E01F22;
}

#nav li.firstli:hover, #nav li.topli:hover, #nav li.firstli.over, #nav li.topli.over {
background:url(images/liblokje.gif) no-repeat top left #999;
}
moet eigenlijk worden:

#nav li.firstli, #nav li.topli {
background:#E01F22 url(images/liblokje.gif) no-repeat left top;
}

#nav li.firstli:hover, #nav li.topli:hover, #nav li.firstli.over, #nav li.topli.over {
background:#999 url(images/liblokje.gif) no-repeat left top;
}
Misschien dat dit uitmaakt?
de background behoort in deze volgorde genoteerd te worden: achtergrondkleur/url/repeats/x-pos/y-pos

#nav li:hover li, #nav li.over li {
/*background:#999;*/
}
klopt dat dit commentaar is?

wat is:
margin-left:expression('150px'); ? expression?

dit heeft er helemaal niets mee te maken, maar ter info:
Kijk dit ook eens: font-size:76.1%; ? wat is die .1%?

[BernardV]

Vervang:

<style type="text/css" media="screen">
@import url( http://www.ribwmb.nl/site/wp-content/themes/ribw/style.css );
</style>
<style type="text/css" media="print">
@import url(http://www.ribwmb.nl/site/wp-content/themes/ribw/print.css);
</style>


Maar eens door:


<link rel="stylesheet" media="screen" href="http://www.ribwmb.nl/site/wp-content/themes/ribw/style.css" />
<link rel="stylesheet" media="print" href="http://www.ribwmb.nl/site/wp-content/themes/ribw/print.css" />


IE 5.5 en lager kunnen niet overweg met <style media=""> dus grote kans dat je print.css het menu etc nu op visibility='hidden' zet en dan komt hij nooit meer terug :)

Oh ja, en in je CSS zag ik ook vaak: height:0; wat is die 0? pixels, appels etc :P daar zul je bv 0px; moeten neerzetten wil je het correct doen en zo min mogelijk problemen willen hebben in verschillende browsers.

[moxie]

mknol2000: Tsja, zo'n stylesheet is leuk maar wordt soms ook een rommeltje nietwaar? :)


#nav li:hover li, #nav li.over li {
/*background:#999;*/
}
klopt dat dit commentaar is?

wat is:
margin-left:expression('150px'); ? expression?

dit heeft er helemaal niets mee te maken, maar ter info:
Kijk dit ook eens: font-size:76.1%; ? wat is die .1%?

De volgorde voor background maakt volgens mij niet uit. Ik doe het zo al jaren tenminste.
Tussen /* en */ is inderdaad commentaar.
Expression is een ding wat alleen microsoft gebruikt. Elke andere browser zal dit negeren. Het schijnt dat je er zelfs een soort mini-scriptjes in kunt zetten.
.1 is hetzelfde als 0.1 (heb ik eens ergens gelezen en klopt ook.

En Bernhard, je hebt 'm :). Ik wilde ook net iets soortgelijks gaan melden, maar je bent me net voor. Ik ben er inderdaad (na veel deleten en testen) achtergekomen dat het veranderen van die 'import' in een gewone link zorgde voor een veel beter resultaat. Dat het aan 'style is media' ligt wist ik echter niet. Weer wat geleerd!

Bedankt voor het meedenken! Nu sla ik tenminste weer een goed figuur bij die klant :D.

[KwIjL]

Ehm dit werkt allemaal prima alleen ik vroeg me af ofdat iemand het voor mij aan zou kunnen passen zodat mensen met MSIE 7 en FireFox geen melding krijgen, en de mensen een melding krijgen "Voor het duidelijk weergeven van de website wordt IE 7 of FireFox aangeraden." kunnen weergeven.

Alvast bedankt [^]

[Lorrens]

Dat kan met conditional comments, kan je dus voor IE (lager dan versie zeven bijvoorbeeld) een melding geven :)

http://www.quirksmode.org/css/condcom.html
<!--[if lt IE 7]>
According to the conditional comment this is Internet Explorer lower than 7, berichtje of html kan hier, dit wordt alleen ingevoerd in IE versies en niet in FireFox bijvoorbeeld, die ziet comments
<![endif]-->

[KwIjL]

wow super bedankt dit helpt al een hele hoop :)

[treurmars]

Oh ja, en in je CSS zag ik ook vaak: height:0; wat is die 0? pixels, appels etc :P daar zul je bv 0px; moeten neerzetten wil je het correct doen en zo min mogelijk problemen willen hebben in verschillende browsers.


Dat is niet waar, 0 is 0, of het nou px, appels, auto's of liters zijn en elke browser kan daar gewoon perfect mee overweg.

En conditional comments zijn de way to go! Je wil geen klanten wegjagen door te zeggen dat ze maar een nieuwe browser moeten downloaden. ;)