Het is niet mogelijk om, zonder problemen, een iframe op een xhtml pagina te plaatsen. De W3C-validator schiet in het "donker-rood". Wellicht nog belangrijker is dat niet alle IE-browsers met XHTML-pagina's overweg kunnen. Deze pagina valideert vlekkeloos xhtml, maar dat impliceert direct, dat een heleboel (IE)bezoekers de pagina niet correct kunnen bekijken. Als je de titel van de pagina bekijkt zie je dat we tóch een validerend -cross browser- "iframe" gaan plaatsen. Alleen is het dit keer een object wat we met data de "klus laten klaren" voor wat betreft de strict browsers, en IE krijgt zijn "eigen" code. De hier onderstaande html-code spreekt voor zich... in de span staan een paar parameters. Je kan de margin naar wens aanpassen. Deze staat nu ingesteld op 10px 20px 30px 30px. Deze getallen bepalen achtereenvolgens de top-marge, rechter-marge, bodem-marge en linker-marge van de "iphone-afbeelding". Er staat ook een parameter float:left. Dat dient er voor om de tekst aan de rechterkant van de iphone-afbeelding te laten "vloeien". Wil je geen tekst aan de rechterkant van de afbeelding, kan je deze code verwijderen. Natuurlijk zijn alle parameters naar eigen wens aan te passen. Voel je vrij om te wijzigen wat je maar wilt. Dit voorbeeld valideert op CSS2/CSS3 en XHTML 1.0 Strict. Dit houdt in dat het 'DOCTYPE' van jouw pagina die van XHTML 1.0 Strict moet zijn:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl"> maar ook een pagina met <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> als 'doctype' vormt voor de procedure geen enkel probleem.
<p>
<span style="margin:10px 20px 30px 30px;float:left;height:318px;width:180px; background:url(http://www.autozine.nl/mobiel/iPod/iphone.png) no-repeat"><!--[if lt IE 9]> <iframe style="position:absolute;margin:56px 0 0 21px;width:137px;height:208px;" src="http://www.autozine.nl/mobiel/iPod/game_toyota.php"></iframe><![endif]--><object style="margin:56px 0 0 21px;width:137px;height:208px;" data="http://www.autozine.nl/mobiel/iPod/game_toyota.php" type="text/html"></object></span>
</p>
Tot slot wil ik nog even benadrukken dat de span in een P-tag moet staan. Plaats de span in een bestaande P-tag en alles zal correct werken (het is dus niet per se noodzakelijk om de twee "P's" méé te kopiëren naar jouw pagina...).
