28172 sujets

CSS et mise en forme, CSS3

[Résolu]Différence d'affichage entre IE et Firefox pour border-bottom

Bonjour,

Lorsque quelqun écrit un message dans mon guestbook IE7 affiche 2 lignes plutôt qu'une pour séparer les messages. Firefox affiche pourtant qu'une seule ligne.

border-bottom:2px single dashed #f0d7c2;


Y'a-t-il moyen d'afficher une simple ligne de séparation dans IE7 comme pour Firefox?

Merci
Modifié par Alec Effeil (11 Nov 2008 - 04:08)
Tu sais, il y a mille et une façon d'obtenir le même effet en web... je vais faire mon mythomodo mais y a un topic à lire avant de poster sur ce forum (comme sur la grande majorité des forums que compte le web d'ailleurs). Bref, on ne pourra pas trouver de solution à ton problème si on a qu'une ligne css à étudier.
Rebonjour,

Merci pour ton comeback cahnory et désolé, mon erreur. Je crois que j'en était rendu à dormir sur le clavier en écrivant mon message hier. Smiley confus

Pour continuer...

J'ai un espace où écrire des commentaires sur mon site et j'ai créé des lignes avec border-bottom pour séparer chaque message affiché. Le problème est qu'IE7 affiche 2 lignes plutôt qu'une pour séparer les messages. Firefox affiche pourtant qu'une seule ligne.

Voici un screenshot du problème:http://www.socam.net/screenshot/

J'ai 2 feuilles de style attacher à mon site. Le border-bottom en question se trouve à #content p

1ier CSS:
* {
margin: 0;
}

body , html {
margin: 0;
padding: 0;
height:100%;
background-image: url(../images/bk.gif);
min-width:790px;/* pour FF */
}

#page {
height: 100%;
}

#wrapper {
height: 100%;
min-height: 100%;
margin: 0 auto -6.3em;
height: auto !important;
background-image: url(../images/back.jpg);
background-repeat: repeat-y;
text-align: left;
width: 790px;
}

#top{
text-align:center;
}

#photo{
text-align:center;
}

#boutons{
text-align:center;
}

#titre{
text-align:center;
}

#content{
padding-left: 80px;
padding-right: 70px;
padding-top:1px;
}

#content h1{
margin-left: 5px;
font-family : "Trebuchet MS", Georgia, Times, serif;
text-decoration : underline;
font-size :  110%;
font-weight : normal;
color : #993300;
}   

#content h2{
padding: 5px 0px 0px 0px;
margin-left: 5px;
font-family : "Trebuchet MS", Georgia, Times,serif;
font-size : 80%;
font-weight : normal;
color : #AF5B00;
line-height : 140%;
} 

#content p{
padding: 5px 5px 5px 10px;
margin-left: 5px;
font-family : "Trebuchet MS", Georgia, Times,serif;
font-size : 80%;
font-weight : normal;
color : #AF5B00;
border-bottom:2px single dashed #f0d7c2; 
}

#bloc{
background-image: url(../images/back640.gif);
margin-top: 10px;
width: 640px;
float: left;
}

#audio{
margin-left: 2px;
padding-left: 80px;
padding-right: 70px;
padding-top:5px;
}

#footer, #push{
clear: both;
text-align:center;
height: 6.3em;
}


2iem CSS
* {
margin: 0;
}

body , html {
margin: 0;
padding: 0;
height:100%;
background-image: url(../images/bk.gif);
min-width:790px;/* pour FF */
}

#page {
height: 100%;
}

#wrapper {
height: 100%;
min-height: 100%;
margin: 0 auto -6.1em;
height: auto !important;
background-image: url(../images/back.jpg);
background-repeat: repeat-y;
text-align: left;
width: 790px;
}

#top{
text-align:center;
}

#photo{
text-align:center;
}

#boutons{
text-align:center;
}

#titre{
text-align:center;
}

#content{
padding-left: 80px;
padding-right: 70px;
padding-top:1px;
}

#content h1{
margin-left: 5px;
font-family : "Trebuchet MS", Georgia, Times, serif;
text-decoration : underline;
font-size :  110%;
font-weight : normal;
color : #993300;
}   

#content h2{
padding: 5px 0px 0px 0px;
margin-left: 5px;
font-family : "Trebuchet MS", Georgia, Times,serif;
font-size : 80%;
font-weight : normal;
color : #AF5B00;
line-height : 140%;
} 

#content p{
padding: 5px 5px 5px 10px;
margin-left: 5px;
font-family : "Trebuchet MS", Georgia, Times,serif;
font-size : 80%;
font-weight : normal;
color : #AF5B00;
border-bottom:2px dashed #f0d7c2; 
}

#bloc{
background-image: url(../images/back640.gif);
margin-top: 10px;
width: 640px;
float: left;
}

#audio{
margin-left: 2px;
padding-left: 80px;
padding-right: 70px;
padding-top:5px;
}

#footer, #push{
clear: both;
text-align:center;
height: 6.1em;
}


Merci encore,

Alec
Modifié par Alec Effeil (07 Nov 2008 - 20:37)
Hello,

Il n'y a pas de raison pour que tu aies deux bordures avec juste un border-bottom. Le code que tu indiques n'explique pas ce qu'on peut voir dans la capture d'écran. Peut-on voir la page en ligne?
Bonjour,

Le code HTML n'est pas valide, et pour tout dire il est faux. Tu as des imbrications de DIV et paragraphes interdites, des balises ouvertes et pas fermées, des caractères >>> non échappés, etc. Du coup, chaque navigateur analyse ça comme il peut. Et, apparemment, IE7 analyse que tu as un paragraphe vide après chacun des paragraphes à bordure. Donc deux paragraphes à bordure (les mêmes styles CSS s'appliquent).

Bref, c'est avant tout un problème de qualité du code HTML, qui est un peu bordélique et pas super maitrisé. Smiley cligne
Merci Florent,

J'ai valider la page html et en effet il y avait une vingtaine d'erreurs à ma page. J'ai apporter les corrections et la page semble être valide. La validation du CSS aussi semble être ok. Cependant, rien n'a changé pour ce qui est des bordures.

J'imagines que ces validations ont des failles. Smiley decu
Alec Effeil a écrit :

Merci Florent,
J'ai valider la page html et en effet il y avait une vingtaine d'erreurs à ma page. J'ai apporter les corrections et la page semble être valide. La validation du CSS aussi semble être ok. Cependant, rien n'a changé pour ce qui est des bordures.

Pas tout à fait Smiley cligne
Alec Effeil a écrit :

J'imagines que ces validations ont des failles. Smiley decu

Je ne sais pas ce que tu entends par "failles", la validation n'est pas un but en soi, c'est un moyen de parvenir à un certains nombres de règles que l'on se fixe (de qualité, d'accessibilité, de sémantique,... de respect des standards plus généralement...)
La validation tente, avec une certaine réussite, de te dire si ton code se conforme à ces règles.
Par contre, elle ne corrige pas les erreurs de conception, d'accessibilité (essaies de regarder ton site sans images...) d'ergonomie, de lisibilité et de maintenabilité du code (séparation du contenu et de la forme, externalisation du javascript...) mauvaise nouvelle hein ? Smiley ohwell

Bref, encore un peu de travail à faire, courage Smiley cligne

Cdt,
Sylvain
Merveilleux,

Ça fonctionne comme je veux maintenant. Ce qui est étrange c'est que lorsque j'avais envoyé mon dernier message avant celui-ci j'avais bel et bien retester la validation et ça me disait que le code était valide Smiley confus (?)

Bref merci a tous, malgré mes nombreuses erreurs et fautes je crois être en bonne voix d'appendre et c'est en parti grace à ce forum que j'ai souvent pu avancer et continuer à régler mes problèmes de codes.

THX! Smiley ravi
Sujet clos
Aller à