Aller au contenu

Doctype et affichage différent


MisterDa

Sujets conseillés

Bonjour tous,

Voici mon souci,

j'ai écris une page en html (si si ;) ) elle est disponible sur :

http://mister.da.free.fr/debian

Le doctype est :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

elle s'affiche très bien sous firefox, mozilla mais pas sous IE, en effet , ce dernier tronques les images qui me sert de titre dans la balise <div>

En revanche, si je change le doctype en :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" &quot;http://www.w3.org/TR/html4/strict.dtd">

ma page n'est plus validée par w3c mais elle a le mérite de bien s'afficher sous les 3 navigateurs précedement sités

Quelqu'un pourrait me venir en aide pour m'aider à comprendre ?

Merci d'avance de votre aide

Da

Lien vers le commentaire
Partager sur d’autres sites

Salut!

Et bien ton image fait 50 pixels, et dans ta feuille de style, tu à mis la hauter à 32pixel, forcémement, l'image est tronqué :)

Après modification, tu devrais certainement revoir aussi tes padding pour le texte ;)

Bon courage :rolleyes:

Lien vers le commentaire
Partager sur d’autres sites

DJsmileyus,

Ah oui ... effectivement bon je me tais :shutup:

Merci pour la rapidité de ta réponse, j'avais pas fais attention à ça.

Mais sais-tu pourquoi en changeant le doctype, le navigeur gère différement l'affichage ?

Amicalement

Da

Lien vers le commentaire
Partager sur d’autres sites

Re, lol oui c'est le genre d'erreur à se prendre la tête pendant 3 jours alors que c'est tout simple :D

Sinon pourquoi mettre le doctype... ?

Tout simplement parce qu'il y à plusieurs "formes" de Html 4.01 (je simplifie bien sûr...).

Il faut définir si c'est du strict, du transitional ou encore du frameset, pour plus ce renseignement, c'est par ici.

Voila ;)

Lien vers le commentaire
Partager sur d’autres sites

D'accord ! Je vais allez lire le lien que tu m'as donné.

Parcontre il y a un souci... (cela aurait trop simple autrement). Dans mon css j'ai bien remis la taille de mon image à 50 pixel contre les 32 et j'ai aussi changé la taille en largeur. Donc ça s'affiche bien sous IE mais j'ai le haut de mon image qui réapparé si je visionne la page avec firefox par exemple.

Pour résumer quand le mets les bonnes dimension de l'image (50*710) l'affichage sous IE se fait correctement mais apparait en mosaique sous firefox... je vais voir qi il n'y a pas une balise qui force à n'afficher qu'une seule fois cette satanée image lol

Da

Lien vers le commentaire
Partager sur d’autres sites

Bonjour El Moustiko,

Oui c'est bien une image background, mais si je met no-repeat, elle disparait (sous IE et firefox), parcontre je viens de remarquer que c'est le padding que je fais pour centrer mon texte sur l'image qui pertube firefox et qui fait que l'affichage est en mosaïque. Sans le padding, le texte est a cotes de l'image mais cette derniere n'apparait qu'une et une seule fois.

Da

Lien vers le commentaire
Partager sur d’autres sites

Si c'est bon :idea: j'ai mis ceci :

.cellule-top {

width:710px;

height:50px;

background-image:url(images/top.gif);

background-repeat: no-repeat;

margin-left:auto;

margin-right:auto;

padding-left:60px;

padding-top:18px;

color:#FFF;

font-weight:bold;

font-size:14px;

}

Ca semble coller avec les deux navigateurs

C'est bien no-repeat qui manquait.

Merci à vous deux pour votre aide, je ne touche plus à cette balise, promis !!! :wub:

Lien vers le commentaire
Partager sur d’autres sites

Sinon tu peux aussi optimiser ton code css pour avoir moins de ligne et regrouper les chose :

.cellule-top {
width:710px;
height:50px;
background-image:url(images/top.gif);
background-repeat: no-repeat;
margin-left:auto;
margin-right:auto;
padding-left:60px;
padding-top:18px;
color:#FFF;
font-weight:bold;
font-size:14px;
}

Devient :

.cellule-top {
width: 710px;
height: 50px;
background: url(images/top.gif) no-repeat;
margin: 0 auto;
padding: 0 18px 0 60px;
color: #fff;
font-weight: bold;
font-size: 14px;
}

Modifié par ElMoustiko
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...