Problème firefox + border

[Protanim]

Bonsoir,

Je suis entrain de refaire mon site en enlevant tous les tableaux pour remplacer par des feuilles de style
J'ai tout réecrit à la main avec HTML-Kit
Lorsque je visualise dedans ma page, elle est nickel. Idem avec Internet explorer mais c'est minable avec Firefox.
Quelqu'un peut il m'expliquer mon erreur ?
Adresse : http://www.protection-des-animaux.org/Untitled.php

Pour info, la page normale avec tableaux : http://www.protection-des-animaux.org/

Deuxième problème : j'ai voulu mettre un cadre à gauche et à droite, mais le cadre de droite ne colle pas bien. Je comprends pas pourquoi.
Si vous avez une idée...

Merci beaucoup

[moktoipas]

pkoi tu fais du transitional ???

vu que tu m'a l'air de vouloir faire ca bien, fait du strict

en plus ie et ff interpretent a peu pres pareil les strict (sauf les bug d' ie bien sur.

[siddhy]

salut,

essaie deja ça dans ta feuille de style style.css : (la hauteur!!)

Code: Tout sélectionner

ul#menu2
{
   height: 300px ;
   width: 173px ;
   margin: 0 ;
   padding: 0 ;
   list-style-type: none ;

}


et puis ça :

Code: Tout sélectionner

.centre1d {
margin-left: 137px; /* on place le bloc centre par rapport � la largeur du bloc gauche */
width: 230px !important;
width: 270px;
padding-left:20;
padding-right:20;
}
.centre3d {
margin-left: 137px; /* on place le bloc centre par rapport � la largeur du bloc gauche */
width: 230px !important;
width: 270px;
padding-left:20;
padding-right:20;
}



[/code]

[jeroen]

Une petite remarque : ton titre m'a fait bondir !
Si il y a bien un navigateur qui ne respecte pas les standards c'est IE, donc il faut changer ta façon de faire : Coder pour un navigateur qui respecte les standards (ex: firefox) et "patcher" ton code pour que ça passe pour ceux qui ne respectent pas les standards (ex: IE).

[Protanim]

Merci à vous deux.

Ma page est maintenant valide W3C Html strcit d'après l'outils de validation.

Par contre, IE ne me l'affiche pas correctement. Je comprends pas trop, je vais essayer de regarder ça.

Firefox lui affiche normalement.

[moktoipas]

.centre3d {
margin-left: 137px; /* on place le bloc centre par rapport ? la largeur du bloc gauche */
width: 230px !important;
width: 270px;
padding-left:20px;
padding-right:20px;
}


pkoi tu lui done plusieur fois un width ??
une seule suffit.

[Protanim]

c'est ce que siddhy m'a dit de faire ci dessus.

[moktoipas]

.centre1g {
position: absolute;
left: 0px; /* on place le bloc gauche à gauche en position absolue */
width: 137px;
text-align: center ;
vertical-align: middle ;
padding-top:30px;
}

.centre1d {
margin-left: 137px; /* on place le bloc centre par rapport ? la largeur du bloc gauche */
width: 270px;
width: 230px !important;
padding-left:20px;
padding-right:20px;
}
.centre2g {
position: absolute;
left: 0px; /* on place le bloc gauche à gauche en position absolue */
width: 130px;
text-align: center ;
}

.centre2c {
position: absolute;
left: 130px; /* on place le bloc centre par rapport à la largeur du bloc gauche */
width: 130px;
text-align: center ;
}

.centre3g {
position: absolute;
left: 0px; /* on place le bloc gauche à gauche en position absolue */
width: 137px;
text-align: center ;
padding-top:65px;
}

.centre3d {
margin-left: 137px; /* on place le bloc centre par rapport ? la largeur du bloc gauche */
width: 230px !important;
width: 270px;
padding-left:20px;
padding-right:20px;
}

je crois que le pb est simple.invers les deux ligne:
width: 230px !important;
width: 270px;

ce qui donne
width: 270px;
width: 230px !important;


ensuite tu essaira en virant les width qui ne sont pas !important je pense que ca ne changera rien.

[siddhy]

la ligne
width: 230px !important;
demande aux navigateurs qui respectent les standards (firefox) de ne pas "ecraser" la proprieté width.
Or IE ne respecte pas tous les standards (dont !important) et donc ici IE aura une width de 270px (et firefox 230px)

[moktoipas]

a pkoi leur donner une valeur differente ??

on voit bien que le 270 sous IE c'est trop gros alors que en haut (centre1d) les ligne sont dnas cet ordre

width: 270px;
width: 230px !important;

donc IE et FF lisent tout les deux 230 et la ca marche.

[siddhy]

Désolé, je n'avais pas vérifié avec IE.
Le probleme a la base était avec FF donc je n'ai modifié le width que pour FF (a la base le width etait a 270px quand j'ai regardé le code source..)

[moktoipas]

c'est pasque juste apres mon message il a mis une dtd strict et du coup IE et FF interpreten correctement les largeurs.

[Protanim]

Merci c'est bon

Et oui j'ai suivi ton conseil de mettre en strict.

[Protanim]

Je me demande si je vais pas abandonner à la première page.

J'ai volulu appliquer aux autres pages mais la hauteur du contenu (au centre) pose problème.
Exemple : http://www.protection-des-animaux.org/test/actualites/

J'ai essayé de mettre height : auto ou de spécifier une largeur en px ou en %, rien n'y fait.
J'aimerais que ça fasse comme avant, à gauche ça fait une bande blanche et à droite, la bande grise (le background de la colonne en fait).

[siddhy]

pour lesmises en page css, j'utilise ce lien :
http://css.alsacreations.com/Modeles-de ... age-en-CSS

dans ton cas j'aurais mis tout ta partie centrale dans un block :

Code: Tout sélectionner

<div id='header'>
  le header
</div>

<div id='centre'>
  <div class="gauche"></div>
  <div class="contenucentre"></div>
  <div class="droite"></div>
</div>

<div id='footer'>
  le footer
</div>


avec un clear:both; pour le footer[/code]