5568 sujets

Sémantique web et HTML

2 problèmes incompatibilité FF/IE

Bonjour à tous !

J'ai actuellement un problème que je n'ai jamais eu au paravant avec IE
Voici tout d'abord la page en question :

http://www.snipy.info/nevrus/

1/ A droite les champs de texte (pseudo et mot de passe) sont très très long sous IE alors que j'ai bien instauré une balise size.

2/ Second problème: mon bloc du bas n'est pas centré comme mon bloc central


body
{
   width: 770px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
}


#corps
{

   height:306px;
   margin-bottom: 20px;
   padding: 5px;
   color: black;
   background-image: url("images/corps.png");
   background-repeat: no-repeat;
   background-position:top center;
}


#dernieres_news
{
   width:400px;
   height:112px;
   padding: 5px;
   color: black;
   background-image: url("images/dernieres_news.png");
   background-repeat: no-repeat;
   margin:auto; /* logiquement inutile puisque mon body est en margin:auto */
   margin-bottom: 20px;
 }


Merci d'avance pour votre aide !
Bon week end
Modifié par Snipy (03 Feb 2007 - 13:08)
Snipy a écrit :
1/ A droite les champs de texte (pseudo et mot de passe) sont très très long sous IE alors que j'ai bien instauré une balise size.

Passer plutôt par l'attribut width en CSS pour fixer la largeur en pixels.

Snipy a écrit :
2/ Second problème: mon bloc du bas n'est pas centré comme mon bloc central

Le bloc du bas (dernières news) est tout à fait centré, mais a une largeur de 410px avec une image de fond de 400px alignée à gauche, ce qui crée un décalage.

Pour info : width de 400px + padding-left de 5px + padding-right de 5px = 410px en tout.
Si ce point n'est pas clair, une petite recherche sur le modèle de boite CSS sera utile.

En gardant les même padding et pour obtenir une largeur totale de 400px, on utilisera plutôt width: 390px.
Merci pour vos réponses si rapide !
Pour le doctype, en effet erreur de ma part Smiley sweatdrop

Voici les modifs pour mon bloc a savoir maintenant c'est plus ou moins centré sous IE mais sous FF le bloc principale ne l'est plus du tout.

#corps
{
   width:402px;
   height:306px;
   margin-bottom: 20px;
   padding: 5px;
   color: black;
   background-image: url("images/corps.png");
   background-repeat: no-repeat;
   background-position:top center;
}

#dernieres_news
{
   width:402px;
   height:112px;
   padding: 5px;
   color: black;
   background-image: url("images/dernieres_news.png");
   background-repeat: no-repeat;
   margin:auto;
   margin-bottom: 20px;
 }



POurriez vous me dire l'interet exact de background-position:top center; ?

Merci d'avance
Snipy a écrit :
Voici les modifs pour mon bloc a savoir maintenant c'est plus ou moins centré sous IE mais sous FF le bloc principale ne l'est plus du tout.

Ben c'est logique. Le bloc principal prenait 100% de la largeur de son conteneur (sans tenir compte des flottants, qui sont... ben, flottants), soit 770px. Là, tu lui as donné une largeur totale de 412px. Dont acte.

Sinon, je conseillerais plus globalement de placer tous tes blocs dans un div global, auquel tu donneras la largeur de 770px et les marges automatiques pour le centrage horizontal. On peut théoriquement utiliser body pour ça, mais certains navigateurs n'aiment pas trop.

Enfin, je te conseillerais de... tout reprendre à zéro. Enfin, peut-être pas tout, mais au moins ton concept d'images de fond pour le texte. Le problème avec ce que tu as fait, c'est que si jamais le texte est plus fourni que prévu, ou si l'utilisateur augmente la taille du texte, ou si l'utilisateur a demandé une taille de texte par défaut un peu élevée, ou un peu tout ça combiné... ben le texte va dépasser, et si les blocs ont une hauteur fixe ça va chevaucher dans tous les sens, au point de devenir illisible, inaccessible, etc.

Le principe à suivre :
- Les blocs ayant un contenu texte (même limité) n'ont, autant que possible, jamais de hauteur fixe (que ce soit en pixels, en EM, en pourcentages...). Si vraiment on doit leur appliquer une hauteur fixe, on utilisera au moins la propriété overflow:auto pour permettre l'apparition d'une barre de défilement. Mais c'est une solution très insatisfaisante pour l'accessibilité.
- Les images de fond venant dessiner des « cadres » pour des contenus textuels ne sont pas d'un seul tenant, et sont prévues pour être extensibles en hauteur.

Sur ce dernier point, un exemple :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html


Au fait, le texte de l'en-tête (« Basket World ») se lit assez difficilement. À retravailler.
L'idée de reprendre à zéro me parait la plus adaptée Smiley confus
Je vais essayer de suivre vos conseils tout au long afin de ne jamais "m'éloigner".

Concernant la bannière : pas de soucis c'est juste une bannière de test.

Concernant mes blocs, ceux sont des "images" (font + texte du dessus+bordure compris). L'idéal serait donc que je n'ai plus d'image, mais juste une image fond que je rajoute en background à mes blocs, afin qu'ils puissent avoir une hauteur variable?
Mais dans ce cas comment puis je imbriquer la petite marge au dessus de chaque bloc (qui est arrondie).
Snipy a écrit :
Concernant mes blocs, ceux sont des "images" (font + texte du dessus+bordure compris). L'idéal serait donc que je n'ai plus d'image, mais juste une image fond que je rajoute en background à mes blocs, afin qu'ils puissent avoir une hauteur variable?
Mais dans ce cas comment puis je imbriquer la petite marge au dessus de chaque bloc (qui est arrondie).

Voir le tutoriel dont je donne le lien dans mon précédent message. Smiley cligne
Sujet clos
Aller à