15 berichten aan het bekijken - 1 tot 15 (van in totaal 15)
  • Q:
    Bijdrager
    Sanne

    Afbeeldingen wel in Safari niet in IE

    Hallo,

    Ik zit een beetje in de knoop met WordPress 2.7.1

    Ik bouw mijn template altijd, door eerst alle stylen en afbeeldingen weg te halen, en dan met een schone lei te beginnen.
    Dit doe ik dmv het template Starkers te downloaden, en vervolgens vanaf daar mijn eigen code erin te stoppen.

    Nou gaat in Safari en Firefox alles goed.. Maar IE weergeeft geen afbeeldingen en pakt volgens mij de stylesheet ook niet.

    Importeren van de stylesheet:
    [code:1:15044cc12c]<link rel="stylesheet" href="<?php bloginfo(’template_directory’); ?>/style.css" type="text/css" />[/code:1:15044cc12c]

    Afbeeldingen:
    [code:1:15044cc12c]<img class="float_left" src="<?php bloginfo(’template_directory’); ?>/images/logo.png" alt="blabla" />[/code:1:15044cc12c]

    Hoe kan dit, en nog beter, hoe op te lossen?

    Bijdrager
    iJoost

    Kijk even naar de resulterende HTML. Dat is waarschijnlijk heel verhelderend.

    Bijdrager
    Sanne

    Dit is de resulterende HTML:
    [code:1:a788a913a4]<link href="http://localhost/wordpress/mijnsite/wp-content/themes/mijnsitetheme/style.css" type="text/css" rel="stylesheet" />[/code:1:a788a913a4]

    en
    [code:1:a788a913a4]<img class="float_left" src="http://localhost/wordpress/mijnsite/wp-content/themes/mijnsitetheme/images/logo.png" alt="logo" />[/code:1:a788a913a4]

    Dit klopt gewoon…toch?

    Inactief
    Anoniem

    Hou je er rekening mee dat IE6 en ouder geen .png ondersteunt?

    Bijdrager
    iJoost
    ”sanne’s

    Dit klopt gewoon…toch?

    Ik weet het niet. Op mijn localhost staan die bestanden niet. Maar jij kunt het zo proberen. Gooi die URL’s eens in de betreffende browser. In het algemeen zal localhost natuurlijk alleen werken op de webserver zelf.;-)

    Draai je die FireFox, Safari en Internet Explorer browsers allemaal op dezelfde machine die ook de webserver is? Dan zou het kunnen werken…

    Bijdrager
    Sanne

    Ja ze draaien allemaal op dezelfde computer. En de beide links doen het allebei in alle browsers zowel Safari, Firefox en Opera, als IE.

    Toch, als ik de site open in IE weergeeft hij de afbeeldingen weer niet.

    @Zakske:
    En ja ik weet dat IE 6 geen transparante png’s ondersteund;)
    Ik test de site met IE 7.

    Bijdrager
    iJoost

    Dus voor alle duidelijkheid je hebt het hier over een Windows-computer? Waarop zowel de webserver als de vier browsers draaien?

    Bijdrager
    palahala
    ”sanne’s

    Dit is de resulterende HTML:
    [code:1:a786f97d70]<link href="http://localhost/wordpress/mijnsite/wp-content/themes/mijnsitetheme/style.css" type="text/css" rel="stylesheet" />[/code:1:a786f97d70]

    Je domeinnaam hoeft natuurlijk niet per se in de HTML te staan. Het volgende zou ook goed zijn:
    [code:1:a786f97d70]<link href="/wordpress/mijnsite/wp-content/themes/mijnsitetheme/style.css" type="text/css" rel="stylesheet" />[/code:1:a786f97d70]

    (voor nu alleen belangrijk als IE op een andere computer draait)

    Bijdrager
    gepeterd
    ”Zakske”

    Hou je er rekening mee dat IE6 en ouder geen .png ondersteunt?

    IE6 ondersteund wel PNG! wat het echter niet ondersteund is een doorzichtige png, de doorzichtige gedeelten worden vervangen door grijs. Maar wordne wel weergeven. Een oplossing daarvoor is een javascript hack die je kan downlaoden of een alpha filter toevoegen aan je css.

    Bijdrager
    Martens

    Het beste dat je kunt doen is het domein uit je paden halen. Als je ze erin opneemt kun je verschillende problemen tegenkomen namelijk. Bijvoorbeeld het probleem dat je nu hebt. Ik neem aan dat je Internet Explorer via VMWare of Parallels draait? Je virtuele Windows-machine heeft namelijk zijn eigen localhost, dus die gaat de afbeeldingen op je Mac niet vinden.

    Nog een kleine toevoeging over PNG-ondersteuning van Internet Explorer:

    IE6 heeft inderdaad wel degelijk ondersteuning voor PNG, maar simpelweg AlphaImageLoader of een JavaScript-hack (die AlphaImageLoader inzetten) gebruiken gaat in lang niet alle gevallen werken. Het klopt dat die functie transparantie ondersteunt, maar het zet de te gebruiken afbeelding dan wel altijd in de linker bovenhoek van het element, zonder repeat.

    Een ander probleem met PNG-ondersteuning is dat het kleurschema niet klopt. Het sluit niet aan met kleurcodes die je in CSS aangeeft, terwijl dat bij andere afbeeldingformaten wel goed gaat. Maak maar eens een PNG van bijvoorbeeld kleur #44AABB en zet die op een pagina waarvan je de body via CSS een achtergrond geeft met dezelfde waarden. In Internet Explorer heb je dan een kleurverschil.

    Als je graag wil dat je website in IE6 goed werkt (wat vaak best te doen is), heb je dus te maken met wat extra zaken om rekening mee te houden.

    Bijdrager
    Nietzman
    ”Martens”

    IE6 heeft inderdaad wel degelijk ondersteuning voor PNG, maar simpelweg AlphaImageLoader of een JavaScript-hack (die AlphaImageLoader inzetten) gebruiken gaat in lang niet alle gevallen werken. Het klopt dat die functie transparantie ondersteunt, maar het zet de te gebruiken afbeelding dan wel altijd in de linker bovenhoek van het element, zonder repeat.

    http://www.dillerdesign.com/experiment/DD_belatedPNG/

    Voila. deze repeat.:)

    Bijdrager
    Sanne
    ”Joost”

    Dus voor alle duidelijkheid je hebt het hier over een Windows-computer? Waarop zowel de webserver als de vier browsers draaien?

    Nee, ik draai hier alles op mijn iMac. IE doe ik dmv Parallels.

    ”Martens”

    Het beste dat je kunt doen is het domein uit je paden halen. Als je ze erin opneemt kun je verschillende problemen tegenkomen namelijk. Bijvoorbeeld het probleem dat je nu hebt. Ik neem aan dat je Internet Explorer via VMWare of Parallels draait? Je virtuele Windows-machine heeft namelijk zijn eigen localhost, dus die gaat de afbeeldingen op je Mac niet vinden.

    Hoe bedoel je “het domein uit je paden halen”?

    Ik weet dat ik geen localhost moet gebruiken, daarom heb ik een poort open gezet in mijn router, en kan iedereen bij die website dmv het ip in te typen, dus ook IE op parallels.

    IE gaat ook wel naar de website, hij vindt hem wel, maar hij weergeeft alleen de html zonder css en zonder de afbeeldingen. Dus gewoon plain text, en een icoon van een missende afbeelding..

    ”Martens”

    IE6 heeft inderdaad wel degelijk ondersteuning voor PNG, maar simpelweg AlphaImageLoader of een JavaScript-hack (die AlphaImageLoader inzetten) gebruiken gaat in lang niet alle gevallen werken. Het klopt dat die functie transparantie ondersteunt, maar het zet de te gebruiken afbeelding dan wel altijd in de linker bovenhoek van het element, zonder repeat.

    Een ander probleem met PNG-ondersteuning is dat het kleurschema niet klopt. Het sluit niet aan met kleurcodes die je in CSS aangeeft, terwijl dat bij andere afbeeldingformaten wel goed gaat. Maak maar eens een PNG van bijvoorbeeld kleur #44AABB en zet die op een pagina waarvan je de body via CSS een achtergrond geeft met dezelfde waarden. In Internet Explorer heb je dan een kleurverschil.

    Als je graag wil dat je website in IE6 goed werkt (wat vaak best te doen is), heb je dus te maken met wat extra zaken om rekening mee te houden.

    Dit weet ik;)

    Bijdrager
    iJoost
    ”sanne’s
    ”Joost”

    Dus voor alle duidelijkheid je hebt het hier over een Windows-computer? Waarop zowel de webserver als de vier browsers draaien?

    Nee, ik draai hier alles op mijn iMac. IE doe ik dmv Parallels.

    Dan denk ik toch dat je niet echt die URL met localhost erin in je Internet Explorer geprobeerd hebt.;-)

    Bijdrager
    Martens
    ”sanne’s

    Hoe bedoel je “het domein uit je paden halen”?

    Ik weet dat ik geen localhost moet gebruiken, daarom heb ik een poort open gezet in mijn router, en kan iedereen bij die website dmv het ip in te typen, dus ook IE op parallels.

    IE gaat ook wel naar de website, hij vindt hem wel, maar hij weergeeft alleen de html zonder css en zonder de afbeeldingen. Dus gewoon plain text, en een icoon van een missende afbeelding..

    Daar heb je de spijker op z’n kop. Je had al gemerkt dat Internet Explorer via localhost op z’n eigen virtuele omgeving gaat zoeken en niet de op je Mac gehoste website vindt. Dat is inderdaad prima op te lossen met een IP-adres, eventueel in combinatie met eigen poortnummer (ik ken Parallels niet zo goed, maar in VMWare kun je zonder verdere instellingen ook je computernaam gebruiken, voor de leesbaarheid).

    Als je je resulterende html bekijkt, zie je dat het pad van je <link /> element begint met http://localhost/. Internet Explorer gaat dan op dat domein zoeken naar dat css-bestand. En dat gaat mis. Probeer dus je pad er dus uit te laten zien zoals palahala zei.

    Bijdrager
    Sanne

    Ah ja, nu zie ik het probleem (pas). Dom dom dom.

    Haha nouja, bedankt! :)

15 berichten aan het bekijken - 1 tot 15 (van in totaal 15)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.