CSS avec HTML vs CSS avec XHTML

**Loki13** · 21/06/2007, 23h03

Bonjour,

j'ai une page avec 2 styles, un sur la balise BODY et un sur une classe .Box, j'ai beaucoup de difficulté à m'expliquer pourquoi le texte prend la couleur du style BODY lorsqu'il n'y a pas de doctype et il prend la couleur de la classe .Box quand il y a un doctype XHTML Transitional.

C'est ennuyeux car d'après ma compréhension des cascades de styles, le bon comportement est celui en mode XHTML transitionnel, puisque la classe Box devrait avoir priorité.
Le problème c'est que je ne peux pas inclure le doctype xhtml dans mes pages car elle ne sont pas compatible pour le moment.

Quelqu'un peut m'éclairer ? Merci

Voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Document sans titre</title>
<style>
	BODY {COLOR: black;}
	.Box {COLOR: Red;}
</style>
</head>
<body>
        <div class="Box">
	<table><tr><td>Ce texte s'affiche en rouge</td></tr></table>
        </div>
</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<html>
<head>
<title>Document sans titre</title>
<style>
	BODY {COLOR: black;}
	.Box {COLOR: Red;}
</style>
</head>
<body>
        <div class="Box">
	<table><tr><td>Ce texte s'affiche en noir</td></tr></table>
        </div>
</body>
</html>

**Bisûnûrs** · 22/06/2007, 07h47

Tu peux mettre ta class Box sur ta balise table en attendant.

Après, le pourquoi du comment, je ne saurai pas t'expliquer. :/

**Candygirl** · 22/06/2007, 10h06

Envoyé par Loki13

CSS avec HTML vs CSS avec XHTML

...

Le problème c'est que je ne peux pas inclure le doctype xhtml dans mes pages car elle ne sont pas compatible pour le moment.

Hello,

Tout d'abord ton problème et bien un problème concernant la présence ou non d'un doctype et non pas du choix entre de l'html ou de l'xhtml.

Je te conseille fortement de mettre tout de suite un doctype valide sur tes pages ou tu risques bien de te retrouver avec de mauvaise surprises par la suite et du travail à refaire qui n'aurait pas été si tu étais parti directement sur de bonnes bases.

Tu peux très bien choisir le doctype le moins contraignant, en html 4.01 transitionnel:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Et peut-être passer par la suite en html 4.01 strict voir en xhtml (aucune obligation).

Le fait d'avoir le doctype permettra aux navigateurs de passer en mode standard et d'interpréter les css d'après les recommandations du w3c.

Pour ton problème sans doctype, il me semble que l'héritage des styles sur les tableaux est volontairement omis du mode quirks afin d'assurer une meilleure rétrocompatibilité avec les sites anciens (genre ceux conçus en tableau à l'époque netscape 4.x). Donc spécifier clairement l'héritage devrait règler le problème (mais typiquement une bonne raison pour ne pas bosser sans doctype dès le début):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.Box, .Box table {color: red;}

**Clorish** · 22/06/2007, 10h49

Oui je confirme que bosser avec un doc type stricte resoud bcp de problemes.

Par contre, ce que tu as peut etre oublié candygirl, c'est que changer de doctype en cours de dev, entraine pas mal de soucis car l'interpretation est differente.
a mes debuts ya 15j

) j'avais une page en doctype transitional et pour regler un probleme j'ai du passer en doctype strict. Resultat tous mes divs se sont retrouvé en haut et mon site completement applati.
Une mise en page totale a du etre faire. et je comprends que le temps perdu a refaire une mise en page d'un site complet n'est peut etre pas envisageable.

Apres c'est un choix entre refondre la mise en page ou laisser tomber certaines mise en pages non compatible avec le doctype actuel.

Par contre je ne sais pas jusqu'a quel point une mise en page sans doctype est differente de celle a parti d'un doctype transitional...

quoi qu'il en soit, je confirme que partir directment sur un doctype strict et un bon reflex a avoir

Deja que les problemes de comatibilités sont casse pieds a resoudre .. alors si en plus on en rajoute

**Candygirl** · 22/06/2007, 12h35

Envoyé par Clorish

Par contre, ce que tu as peut etre oublié candygirl, c'est que changer de doctype en cours de dev, entraine pas mal de soucis car l'interpretation est differente.
a mes debuts ya 15j

) j'avais une page en doctype transitional et pour regler un probleme j'ai du passer en doctype strict. Resultat tous mes divs se sont retrouvé en haut et mon site completement applati.

Il me semble que passer du transitionnel au strict ne modifie rien de significatif sur le rendu, mais relève plus de la rigueur d'écriture, de la hierarchisation des balises (pouvoir mettre un a ou img directement dans le body par exemple) et de l'autorisation d'attributs ou balises dépréciés.

Dans ton cas es-tu sûr que tu avais un doctype complet, c'est à dire avec l'url défini ? Si l'url est omis en html4.0 ou 4.01 transitionel les navigateurs restent en mode quirks et ont donc le même comportement que sans doctype, d'où la grosse différence lorsque tu affiches ensuite un doctype correcte.

**Clorish** · 22/06/2007, 12h46

ca je ne sais pas ..... mais uen chose qui est sur c'est que le passage a un doctype stricte m'a tout foiré mon graphisme ...

J'utilisait le doctype cree par dreamweaver ....

**Candygirl** · 22/06/2007, 13h00

Envoyé par Clorish

ca je ne sais pas .....
J'utilisait le doctype cree par dreamweaver ....

Tu peux vérifier en recréant un doc par défaut comme tu l'avais fait et regarder si le doctype qu'il affiche comporte l'url.

Les vieilles versions de dw proposaient un doctype actuellement obsolète et sans url par défaut il me semble, genre:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Pour tester, tu peux aussi modifier ton doctype actuel strict par un transitionnel correcte et complet et regarder si tu as réellement de grosses modifications visuelles

**Clorish** · 22/06/2007, 13h52

[QUOTE=Candygirl]
Les vieilles versions de dw proposaient un doctype actuellement obsolète et sans url par défaut il me semble, genre:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

il me semble en effet ... je tourne encore sous DW6 de l'epoque macromedia

Envoyé par Candygirl

Pour tester, tu peux aussi modifier ton doctype actuel strict par un transitionnel correcte et complet et regarder si tu as réellement de grosses modifications visuelles

Ouais aussi .... mais tu m'excuseras je ne le fait pas tout de suite

Psychologiquement .. j'ai encore du mal a encaisser des erreurs graphiques .. meme voulue

**Loki13** · 22/06/2007, 16h37

Envoyé par Candygirl

Hello,

Tout d'abord ton problème et bien un problème concernant la présence ou non d'un doctype et non pas du choix entre de l'html ou de l'xhtml.

Je te conseille fortement de mettre tout de suite un doctype valide sur tes pages ou tu risques bien de te retrouver avec de mauvaise surprises par la suite et du travail à refaire qui n'aurait pas été si tu étais parti directement sur de bonnes bases.

Tu peux très bien choisir le doctype le moins contraignant, en html 4.01 transitionnel:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Je confirme que ça fonctionne ! Le problème venait bel et bien du fait que la page n'avait aucun doctype, si je met le doctype html 4.01 ça se comporte de la bonne façon, merci beaucoup !!

Jonathan

CSS avec HTML vs CSS avec XHTML

CSS

Discussions similaires

Partager

Partager