Reprise du message précédent :

Je les ai viré et ça n'a rien changé...

Quand je vais sur http://www.alsacreations.com avec IE 6 la barre verte en bas est à la suite du reste. Dans le code elle doit donc être le dernier élément.
 
Je répète les DIV et autres HR se placent par défaut les uns en dessous autres dans l'ordre qu'ils sont dans ton code. Donc pas besoin de top et de left

Mouais effectivement, quoiqu'on fasse il reste un espace d'au minimum 1 pixel. Il faudra que je vois d'où ça vient.
 
Passe par un DIV

Normalement ça a changé depuis Moz 1.3 mais bon vu qu'il reste un espace entre le HR et les blocs qui l'entourent, mieux vaut laisser tomber le HR si on veut une barre séparatrice qui soit collée au reste.

Ok, je commence à avancer grâce à vous
 
En fait les div se cachaient parce que certains n'avaient pas de contenu. C'est mieux à présent.
 
http://www.alsacreations.com/indextest.htm
 
PS : j'ai effectivement remplacé les hr par des div
 
Il me reste maintenant à inclure le menu... ça va être chaud !
Et à voir si ça reste XHTML strict    
 
En tout cas, merci pour votre dévouement !

Oups, comment faire si on ne vaut pas de margin autour de la "page" ? [job's done]
 
Et pourquoi j'ai 2px à droite de mon image dans le header (le bonhomme assis) ? j'ai pourtant viré les borders en CSS  

 
body {
  margin: 0;
  padding: 0;
}

Colle le tag <img> avec le </div>

 
Ouais mais ça ce sont des rumeurs

 
File le code, ça m'intéresse

Marche pas
 
<div class="header"><div class="headerg"></div><img src="design/fondheaddroit.jpg" alt="" class="headerd" /></div>
 
Pour info :  
 
.headerd {
float : right;  
width : 152px;  
height : 56px;  
border : 0 none ;  
background-image : url('design/fondheaddroit.jpg';  
text-align : right;  
}

Ben c'est IE qui bugge parce qu'avec Mozilla ça marche.
 
De toute façon on peut simplifier tout ça :
 
Ajoute à .header :
 
text-align: right;
 
Et tu n'as plus besoin de .headerd (ajoute la largeur et la hauteur de l'image dans le tag <img> )
 
Edit: Il était quand même bizarre ton .headerd tu l'appliquais à une image et il y avait dedans une image de fond

Il y a bien http://www.sovavsiti.cz/css/hr.html mais il différencie les browsers.

 
Mon headerd était bizarre en effet parce qu'au départ, je voulais le mettre uniquement en fond
 
Je l'ai changé, mais il reste toujours les 2 px à droite.
 
.headerd {
float : right;  
border : 0 none ;  
text-align : right;  
}
 
Edit : je préfère ne pas mettre de text-align dans .header, car :
1- ça ne marche pas non-plus
2- ça me bouge le slogan que j'ai mis

 
La page n'est plus à jour avec O7 il affiche bien les exemples qu'il donne

Si si

Pour ton slogan je le placerais comme ça :
 
Ajoute à .header :
 
position: relative;
 
Et pour .slogan :
 
position: absolute;
left: 63px;
top: 38px;
 
 
Et utilise un DIV plutôt qu'un P

Ok, ça commence vraiment à ressembler à quelque chose mais il y'a encore une partie qui me chagrine et que je ne comprends pas :
 
- problèmes de background qui s'arrête (il faut que je donne un height à mes divs centraux ?)
- décalages en haut des div selon le navigateur (voir captures)
- problèmes de style dans les tableaux... mais je vais remplacer par des DIVS
 
Capture version Explorer :

 
Capture version Mozilla 1.1 :

HotShot > non, pas de marge justement
Le pb est que :
- sur IE, la div de gauche est bonne mais pas à droite
- sur Moz, c'est l'inverse
 
Or je n'ai défini de marges nulle part

Autant pour moi : les images étaient contenues dans des balises P, donc ça règle ce problème !
 
Par contre il reste le problème de l'affichage des backgrounds

Applique le fond de .gauche au DIV qui contient .gauche, .menu et .droite

Ben du coup, mon back de gauche est en double partout

C'est à dire ? Tu peux mettre à jour ta page ?
 
Edit: Il faut bien sûr l'enlever de .gauche...

OK, avec un repeat-y c'est nickel
 
Je mets la page à jour dans 2 sec

 
ouais enfin le problème à la base est qu'y a pas moyen d'avoir un code qui donne pareil dans tous, et que le bug que tu disais être résolu dans Moz 1.3 est tj là

Nickel pour le moment sous IE : http://www.alsacreations.com/indextest.htm
 
Par contre Mozilla me pose de gros problèmes pour mon Espace client : il le place n'importe où !

Pourquoi le input-image n'est pas dans le DIV ?
 
J'aurais d'ailleurs mis ce DIV en flottant à droite...

vertical-align: top  
pour la classe formulaire ?

autre chose : j'ai placé des séparations (lignes) blanches qui sont sensés faire 2px de haut : or elles font beaucoup + à l'affichage

 
désolé, c'était gm_superstar
 
http://forum.hardware.fr/forum2.ph [...] =2#t374464

 
Bon faut vraiment que je fasse le point sur vertical-align moi...

Ben je me suis trompé

 
Lorsque je mets le input dans le div, il l'aligne n'importe comment
 
Autre chose : c'est bizarre, mes séparations sont pourtant justes, non ?
.sep1bis {
height : 2px;  
background-color: #FFFFFF;
}  
 
Pourquoi ont-elles une taille énorme ???
 
EDIT : je re dans 2 heures

De toute façon tu devras le mettre dans le DIV sinon le validateur va pas être content.
 
Ajoute ceci :  
 
input {
 vertical-align: middle;
}
 
(ou top, bottom à toi de voir)

Pas besoin de faire un DIV pour ça. Définis une bordure pour le bas de .sep1 :
 
border-bottom: 2px solid white;

 
tiens oui pourquoi je voulais appliquer ça au div conteneur moi

Rattrapage aux branches detected

 
OK, voilà des méthodes de pensée à acquérir en effet...
 
Bon, à l'heure actuelle, tout est nickel sur IE et presque pas mal sur Moz (quelques détails encore)
 
Je reviens tout à l'heure pour attaquer la suite et le menu    
 
Merci encore

Me revoilà pour dire un mot : MERCI !    
 
Merci à cette communauté et à tous ceux qui ont participé à ce post et à mes déboires.
 
Grâce à vos aides et connaissances, ma page est enfin propre.
 
Tout n'est pas encore parfait et il y'a encore du boulot, mais l'objectif est atteint : XHTML strict et compatibilité sur les navigateurs standards
 
La nouvelle page est ici :
http://www.alsacreations.com/indextest.php

Oui, ça fait plaisir de voir des gens motivés pour arriver à avoir une page conforme

Bravo ! J'espère que tu as appris des trucs. Il n'y a rien de tel qu'un cas pratique pour apprendre ces techniques.
 
Bon je note quand même 2 petits defauts :
 - Le cadre pointillé autour des images passe mal avec Moz
 - Si on réduit la taille de la fenêtre le texte du cadre de gauche passe par dessus la barre verte du bas.

Faut aller les chercher sur Graphisme

Voui, ça fait longtemps

Pour sûr, j'ai appris des trucs : me tirer les cheveux jusqu'à 3h du mat, faire des cauchemars, coup-de-bouliser mon écran,...    
 
Pour les derniers défauts:
- le cadre sous Moz : réglé
- problème du cadre de gauche : j'ai testé sous Moz et je n'ai pas ce pb  

Je vous embête encore un peu
 
Pour encadrer mes images-vignettes, j'ai créé une classe :
 
.encadre {
position: relative;
float : left;
margin-top : 20px;
margin-left : 5px;
border : dashed 2px #7F9E97;
padding : 5px;
}
 
Pourtant le résultat n'est pas le même sous IE que sous Moz    
Comment avoir un padding sous IE ?