afbeelding niet correct weergegeven in internet explorer
ik ben een webpagina aan het testen in chrome firefox en internet explorer.
in internet explorer wordt er een afbeelding TE GROOT weergegeven .
ik gebruik de volgende code
<html>
<a href="page.html"><img src="images/afbeelding.png" border="1" style="border:none;max-width:8%;" alt="" /><br>Bekijk afbeelding</a>
</html>
in de andere browsers wordt de afbeelding wel op de juiste grootte weergegeven.
iemand een suggestie?
mvg bas
Waarom geef je niet -zoals iedereen- gewoon de afmetingen op van de afbeelding:
Code (php)
1
<img src="test.png" width="20" height="20" alt="testfoto"/>
En die CSS hoort extern.
Niet dat dat iets uitmaakt voor de werking, maar goed.
Is je <a>-element wel display:block; ?
Want IE9/10 etc kennen echt wel max-width!
Frank, IE werkt heel goed met alle CSS opdrachten uit de tijd waarin de browser is gemaakt. Max-width komt uit een ver verleden en bestaat dus gewoon.
Bas, wat foutjes in je code:
- een inline element (<a>) mag nooit om een block element (<img>) heen staan;
- gebruik geen inline CSS, haal alles wat met cSS te maken heeft uit je HTML en plaats het in een stylesheet;
- die HTML tags raken nog sloot nog wal. Elke pagina heeft maar 1 HTML element, deze dient als root van een pagina. In dit element mogen maar 2 children komen: <head> en <body>;
- als dit inderdaad je code is, dan mis je een doctype op regel 1 van je script. Plaats minimaal <!doctype html> op regel 1, anders werkt het inderdaad niet;
- een lege attribuut is even zinloos als geen attribuut, haal die alt attribuut gewoon weg;
- voor een /> moet altijd een spatie staan.
@ Wouter: hoe klik je dan op een afbeelding? Klik op de foto om te vergroten... en dat kan dan niet met een <a>?
ik neem jullie advies graag aan,ben nog niet zo lang bezig met php en html dus ik moet nog een heleboel leren en proberen.
ik ben momenteel volop videotutorials aan het volgen op phpacademy.com om hands on experience te krijgen.
dit neemt echter niet weg dat een grondige basiskennis van php en html belangrijk is
dit blijkt wel uit mijn vragen.
ik ga gelijk aan de slag met jullie advies!
Wouter J op 29/12/2012 19:09:06:
Frank, IE werkt heel goed met alle CSS opdrachten uit de tijd waarin de browser is gemaakt. Max-width komt uit een ver verleden en bestaat dus gewoon.
Wat betreft het bovenstaande geloof ik je direct Wouter. Maar dat ie wat achter loopt op andere browsers weten we.
Wat betreft jouw argument om geen <a><img /></a> te gebruiken doe je me echter wel verbazen.
Het aantal pagina's dat deze methode gebruikt op internet is een getal zo groot dat het niet op één regel gaat passen. Het voorbeeld dat je toont is mooi, maar ook omslachtig. Ik zie geen afbeelding in of uit zoomen. Maar stel dat ik helemaal niet wil zoomen maar enkel een afbeelding kleiner wil tonen dan deze in werkelijkheid is, wat is er dan mis aan deze html code? kun je daar een uitleg over geven?
Toevoeging op 30/12/2012 10:05:15:
Eddy Erkelens op 29/12/2012 19:32:37:
Daarnaast is /> niet nodig. Je hebt HTML, geen XHTML. Dus geen /> gebruiken dan.
Klopt, maar misschien is het zinvol om te vermelden dat XHTML de standaard is en het dus het beste is om HTML te wijzigen in XHTML waarna de -spatie- /> gewoon kunnen blijven staan.
Gewijzigd op 30/12/2012 09:57:41 door Frank Nietbelangrijk
En html5 is echt geen xhtml. En xhtml is niet beter dan html4 of 5, gewoon anders. Daarbij heeft xhtml bijzonder weinig voordelen, behalve dat je code MOET kloppen. Maar dat doe je toch wel :D
Ik sta ook verbaasd dat er geen <a> om een <img> heen mag. Ik doe dat altijd en overal wel en dat valideert gewoon?
Wat niet valideert aan de code op JSbin is dat er geen alt="..." is ingevoerd.
En dat de [ en ] niet in een URL mogen (ook al werkt het wel).
Gewijzigd op 30/12/2012 15:33:02 door Eddy E