28173 sujets

CSS et mise en forme, CSS3

[Aide] Pb compatibilité Firefox & Opera

Rebonjour

Désolé de resolliciter votre aide,

j'ai à nouveau un dernier petit problème sur mes boxs.
http://www.7min.org/v3

Sous IE, c'est le résultat que j'attends :

Les deux box (quizz et news) sont en haut une alignée à gauche l'autre à droite
et la box animation prend toute la longueur et reste centrée en dessous de ces 2 boxs.

Sous Firefox, et Opera, ça donne plus rien de potable, et ça part n'importe comment.

Question : Quel est le truc à faire pour que ce soit compatible Firefox et Opera ?

A mon humble avis, il faudrait ajouter des trucs dans box1 et box2 qui sont les divs englobant chacune de mes boxs


Voici la partie du code pouvant poser problème.


/* Affichage box haut gauche et droit */
.corps {
background-color: #FFFFFF;
width: 600px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.ensemble1 {
font-size: 12px;
padding: 0;
background-color: #FAFAFA;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.box1{
float: left;
width: 295px;
background-color: #FAFAFA;
margin: 0 0 0 0;
padding: 0;
}
.box2{
float: right;
width: 295px;
background-color: #FAFAFA;
margin: 0 0 0 0;
padding: 0;
}
.box11 {
margin: 0 0 0 0;
padding: 0;
}
.box12 {
margin: 0 0 0 0;
padding: 0;
text-align: right;
}
.dr1 {
margin: -80px 0 0 100px;
padding: 0;
}
.dr2 {
margin: -80px 100px 0 0;
padding: 0;
}
/* Fin affichage box haut gauche et droit */
/* Affichage box horizontale longue */
.horiz {
margin: 5px 0 0 0;
padding: 0;
width: 600px;
background-color: #FAFAFA;
}
.boxh {
width: 600px;
height: 18px;
background-color: #F2F2F2;
margin: 0 0 0 0;
padding: 0;
font-size: 1px;
}
/* Fin affichage box horizontale longue */
/* Affichage image dans h1 */
.imbox {
margin: 0 0 0 0;
padding: 0;
vertical-align: top;
}
/* Fin affichage image dans h1 */


Je vous remercie encore d'avance
Modifié par light_at_the_end (28 Mar 2006 - 11:32)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
.corps {
background-color: #FFFFFF;
width: 600px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
width:600px; me parait exigu pour permettre affichage des 2 blocs.
sur IE pas probleme il ne respecte pas les dimensions programmées, il s'etire mais pour opera et FF c'est different
Pour raphael, désolé, j'avais l'intention de le mettre mais, je croyais que ca ne fonctionnait pas ici.

Je fonce voir le lien.

@jp94
J'ai fait comme tu dis, c'est à dire, j'ai enlevé le width.

Seulement, sous Opera et firefox, il tient absolument à faire passer mon paragraphe du dessous, dans le petit coin libre :x
Ok, merci jp tout à fait, avec un clear:both, ça marche, par contre, il ne vient plus se mettre en dessous des 2 autres mais en dessous du menu :x
Modifié par light_at_the_end (28 Mar 2006 - 11:59)
Il ne faut pas oublier que un float : ( left ou rigth ) font sortir l’élément du flux normal

Dans les FAQ il doit y avoir une doc sur le sujet (il me semble)

aide toi avec les marge

A+
Modifié par gege71 (28 Mar 2006 - 13:11)
Sujet clos
Aller à