28173 sujets

CSS et mise en forme, CSS3

Doctype et firefox

je ne comprend pas, tous mes padding sont pourtant à 0, je ne me sert que des margin...
Je ne vois vraiment pas où est le problème.. une erreur de syntaxe aurais dû être détecté par les valideurs html, non ?
Pour ma part, je clique sur « Entrez » mais le lien ne fonctionne pas. Ah oui, c'est un lien en Javascript, et j'ai désactivé Javascript.

Bon, après test avec Javascript activé (dans Firefox où ça ne rend pas grand chose, et dans IE où on peut voir le rendu souhaité... bien que ça soit saccadé et très pénible) :

Voilà exactement le genre de site que, pour le coup, j'aurais préféré voir en Flash. Il s'agit d'un portfolio comportant très peu de texte et mettant en avant la qualité des photographies et leur présentation, agrémenté d'effet de présentation (translations, pour l'essentiel). Typiquement le genre de choses :
1) qu'il est facile de faire en Flash ;
2) qu'il est vaguement possible de faire en javascript, mais de manière moins efficace, et souvent au prix de l'interopérabilité (on fait du jscript pour Internet Explorer au lieu de faire du DOM/ECMAscript standard).

Mais je suppose que si je dis « le mieux serait de tout refaire en Flash », ça n'aide pas vraiment, si ?
Mieux vaut attendre les experts en Javascript (car de telles différences d'aspect, de disposition des éléments ET de comportement ne me semblent pas pouvoir être imputables à HTML/CSS). Du coup, je déplace ce sujet dans le salon approprié. Smiley smile
Merci pour ton attention.
En effet, non ça ne m'aide pas de savoir que j'aurais pu le faire en flash, flash c'est pour plus tard (bientôt...).

Je ne trouve pas que l'animation soit "pénible", à part peut-être celle des icônes menu de la première page... (attention que le navigateur prenne bien les images en cache, je l'ai précisé maintenant dans la première page).

Si c'est plus un problème Javascript, alors... j'attend les experts !

Merci d'avance
n'y a t-il vraiment personne qui a une idée ?
Faut-il d'autres infos ?

Je n'aimerai pas avoir à publier ce site sans doctype...

Merci
Bonjour,

J'ai exactement le même problème ici.
J'ai remarqué qu'en echappant les guillemets du doctype avec un anti-slash (oui je sais c'est horrible) ou en le mettant en commentaire, Firefox (Mac) centrait à nouveau, mais IE ne le fait plus (avec les anti-slash).
Ma page est pourtant tout ce qu'il y a de plus simple (et est valide CSS et HTML) :

<!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" xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>&mdash; Duel/Art &mdash;</title>

	<link rel="stylesheet" type="text/css" href="da.css" media="screen"/>
	<link rel="shortcut icon" type="image/x-icon" href="http://www.duelart.net/da.ico" />
</head>

<body>
<table>
  <tr>
    <td>
		<div id="screen">
			Du contenu (images)	
		</div>
	</td>
  </tr>
</table>
</body>
</html>

CSS :

        background: #000; 
        color: #000; 
        font-family: georgia, serif; 
        font-size: 0.7em; 
        margin: 0 none;
}

table {
	width:100%;
	height:100%;
	padding:0px;
	margin:0px;
	border:none;
}
td {
	text-align:center;
	vertical-align:middle;
}

#screen{
	width: 760px;
	height: 420px;
	background-color: #D5B940;
	margin: 0px auto 0px auto;
	text-align:left;
	padding: 0px;
}

Help ! svp Smiley sweatdrop
Modifié par Ivy (16 Nov 2006 - 09:34)
Ivy a écrit :
J'ai remarqué qu'en echappant les guillemets du doctype avec un anti-slash (oui je sais c'est horrible) ou en le mettant en commentaire, Firefox (Mac) centrait à nouveau, mais IE ne le fait plus (avec les anti-slash).

C'est même pas que c'est horrible, ça invalide tout simplement la ligne... C'est comme si tu ne mettais rien... IE Pc a effectivement besoin d'un DOCTYPE normal pour certains trucs, genre le centrage.
FlorentG a écrit :

C'est même pas que c'est horrible, ça invalide tout simplement la ligne... C'est comme si tu ne mettais rien... IE Pc a effectivement besoin d'un DOCTYPE normal pour certains trucs, genre le centrage.

Je sais que ce n'est pas valide. Mais si j'enlève le DOCTYPE, ce n'est pas valide non plus. Et c'est quand même un bug "énorme" de la part de Firefox.
Modérateur
Bonjour,

Pourquoi ne pas mettre un doctype normal (sans échappement) pour rendre ta page valide ?
a écrit :
Ma page est pourtant tout ce qu'il y a de plus simple
Oui, donc pourquoi encadrer ta div "screen" dans une table alors que ça ne sert à rien ?
As-tu consulté ce tutoriel ?

Je redéplace dans le forum CSS vu que JS est hors de propos... Smiley ravi
Modifié par koala64 (16 Nov 2006 - 09:53)
koala64 a écrit :
Bonjour,

Pourquoi ne pas mettre un doctype normal (sans échappement) pour rendre ta page valide ?
Ma page est pourtant tout ce qu'il y a de plus simple
Oui, donc pourquoi encadrer ta div "screen" dans une table alors que ça ne sert à rien ?
As-tu consulté ce tutoriel ?

Je redéplace dans le forum CSS vu que JS est hors de propos... Smiley ravi
Si je mets correctement le DOCTYPE, Firefox "colle" le bloc central en haut. Mais IE, Safari et les autres centrent bien le bloc central.
J'utilise le tableau pour centrer verticalament mon bloc. J'ai bien lu la page en question, et il est dit :
a écrit :
Pour le centrage vertical, c'est une autre histoire !
Dernière solution, si toutes les autres ne conviennent pas et si la compatibilité avec IE est nécessaire : utiliser une cellule de tableau* sur laquelle vertical-align fonctionnera. Eh oui, nous ne sommes pas des intégristes non-plus !

*ce qui n'a effectivement pas empêché ma page d'être valide XHML strict. Smiley cligne
Merci quand même pour tes indications. Smiley biggrin
Modifié par Ivy (16 Nov 2006 - 10:58)
Modérateur
Pas jusqu'au bout, j'ai l'impression... Smiley smile Je n'ai pas dit que ta page serait invalide avec un tableau mais niveau sémantique, c'est à éviter et vu que tu as défini une hauteur pour ta div "screen", tu peux te servir de la technique des marges négatives pour ton centrage vertical.
Modifié par koala64 (16 Nov 2006 - 11:23)
koala64 a écrit :
Pas jusqu'au bout, j'ai l'impression... Smiley smile Je n'ai pas dit que ta page serait invalide avec un tableau mais niveau sémantique, c'est à éviter et vu que tu as défini une hauteur pour ta div "screen", tu peux te servir de la technique des marges négatives pour ton centrage vertical.

J'essaierai quand j'aurai 5 minutes (genre ce WE).
Merci Smiley cligne
Sujet clos
Aller à