problème de mise en page causée par doctype

Le code suivant est bien sans déclaration doctype:problème de mise en page causée par doctype

<style type="text/css"> 
body { 
    font: 1.0em verdana, arial, sans-serif; 
} 

* { 
    margin:0; padding:0; 
} 

</style> 

<table cellpadding="0" cellspacing="0" border="0"> 
     <tr> 
      <td><img src="/images/title_equipment.gif" /></td> 
      <td><img src="/images/about.gif" /></td> 
      <td><img src="/images/services.gif" /></td> 
      <td><img src="/images/systems.gif" /></td> 
      <td><img src="/images/equipment_new.gif" /></td> 
      <td><img src="/images/equipment_used.gif" /></td> 
      <td><img src="/images/news.gif" /></td> 
      <td><img src="/images/contact.gif" /></td> 
     </tr> 
     <tr> 
      <td><img src="/images/balers.gif" /></td> 
     </tr> 
</table>

Mais après avoir ajouté doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Il y a espacement entre "tr", même si cellspacing et cellpadding sont les deux zéro.

Source

2009-07-17 omg

Une page HTML qui n'utilise pas de doctype, ou qui a un doctype mais qui est précédée d'un prologue XML (je crois que celui-ci ne s'applique qu'à IE) est rendue dans ce qu'on appelle quirks mode. L'autre mode de rendu est en mode standard.

Maintenant, votre problème est dû au fait que les éléments IMG sont des éléments en ligne, ce qui signifie qu'en mode standard, ils auront un peu d'espace en dessous. Cela ne s'applique pas en mode Quirks.

La solution la plus rapide consiste à déclarer display:block pour ces éléments IMG. Il y a more info about this issue on Mozilla Developer Center.

Source

2009-07-17 13:44:36

Pourquoi les éléments en ligne ont-ils de l'espace en dessous du mode standard? – omg

Il y a une explication sur le lien MDC dans ma réponse. –

Et ne peut pas contrôler ce "petit espace sous eux"? – omg

Comme Ionut l'a déjà suggéré, sans le DOCTYPE vous êtes en mode Quirks. Bien qu'il semble que cela rende mieux pour vous, il sera en fait rendu différemment dans de nombreux autres navigateurs. En introduisant un DOCTYPE approprié, vous demanderez au navigateur de s'afficher en mode Standards (ou en mode Presque Standards pour certaines combinaisons navigateur/DOCTYPE). Bien que cela ne semble pas aussi bien rendu pour vous, il sera en réalité beaucoup plus cohérent sur tous les navigateurs, il y a donc plus de chances que tout le monde verra ce que vous voyez. Si vous corrigez le style pour votre implémentation en mode standard, tous les visiteurs de votre page seront ravis.

Comparison of DOCTYPES

En ce qui concerne une solution, je crains que je ne peux pas battre cet article MDC qui explique à la fois la question et la solution beaucoup mieux que je ne pouvais.

Source

2009-07-17 14:09:10 CJM

fixé par vertical-aligner: bas et mettre la bordure de img à zéro! – omg

problème de mise en page causée par doctype

Répondre

Questions connexes