Pb de Div sous Firefox

Bonjour,

J'ai un problème au niveau de Firefox, l'affichage et correct sur les Explorer ou Chrome.
mon code html :

<div class="A">
	<div class="B1">
	</div>
	<div class="B2">
	</div>
</div>

Voici mon code CSS :

.A{
position: absolute;
overflow: none;
width: 898px;
height: 524px;
top : 50px;
left: 0px;
border-top: 1px solid #ff9400;
border-left: 1px solid #ff9400;
border-right: 1px solid #ff9400;
-moz-box-shadow: 5px 7px 5px #bcbcbc;
-webkit-box-shadow: 5px 7px 5px #bcbcbc;
}
.B1{
position: absolute; 
overflow: none;
width : 434 px;
height : 465 px;
top : 0px;
left: 0px;
background : white;
padding : 10px 5px 10px 10px;
}
.B2{
position: absolute;
overflow: none;
width : 434 px;
height : 465 px;
top : 0px;
left: 449px;
background : white;
padding : 10px 10px 10px 5px;
}

Il s'agit de deux DIV vertical contenu ( B1 et B2 ) dans une DIV principale ( A )
Lorsque je tape du texte dans B1 celui ci est horizontal alors que B2 lui est bien vertical, de plus il passe au dessus de B2.

Comment corriger le pb sous Firefox ?
Merci de votre aide!
Modifié par Calcifer (29 Jul 2010 - 09:53)

Bonjour,

à partir du moment où tu sors tes éléments du flux avec une position absolute c'est normal qu'ils se superposent.
Je te conseille de lire cet article sur les positionnements.
Si tu veux positionner ton B1 et B2 "dans" A ou par rapport à A, il faut que tu mettes une position relative à A également. C'est une règle très utile une fois qu'on a compris comment ça marche, pour positionner un élément B en absolute par rapport à son parent, il faut mettre le parent en relative , sinon tes éléments seront positionnés par rapport au premier ancêtre positionné qu'il rencontre (en général le body si on ne met aucune position).

Par contre je ne vois pas graphiquement trop ce que tu cherches à faire, chez moi que ce soit chrome ou firefox ou IE, ton B2 est toujours au dessus de B1 et cache le texte. Tu as une maquette ou un schémas du résultat espéré parce que là je sèche

Sous Chrome :



Sous FireFox



Pkoi le texte ne reste pas dans le cadre de la DIV sous FireFox ?
Modifié par Calcifer (29 Jul 2010 - 09:46)

Salut et bienvenue parmi nous

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.

Bonne continuation

Euh ...

J'ai copier/coller ton code dans notepad ++ (html et css) et j'arrive au même résultat sous chrome ou ff :



(j'ai mis un border bleu à B1 et un rouge à B2 pour bien voir).

J'ai essayé un doctype strict, transitionnel, même résultat. J'ai essayé sans doctype et j'arrive effectivement à ton résultat. Je pense donc que tu as oublié le doctype.
La raison de ton bug? Le quirksmode de FF et chrome sont pas pareils. Si tu ne mets pas de doctype, chacun va interpréter à sa sauce, un peu comme il veut.

Par contre mauvaise nouvelle une fois le doctype mis, c'est la pagaille comme sous FF pour chrome ton design.

A ta place j'éviterais aussi les majuscules pour les noms de classe et je leur donnerais un nom plus long qui correspond à ce qu'elles sont vraiment comme ça si un jour tu reprends le design, tu seras pas à te demander "c'est quoi déjà A??"
Modifié par saiko_sama (29 Jul 2010 - 10:03)

Effectivement après vérification je n'ai pas encore mis de doc-type...
J arrive aussi au mm résultat que sur Firefox.

Alors suite changement de mon code :

<div class="centre">
<div class="colonne">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="colonne">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</div>

.centre {
position: relative;
overflow: none;
width: 898px;
height: 524px;
border-top: 1px solid #ff9400;
border-left: 1px solid #ff9400;
border-right: 1px solid #ff9400;
-moz-box-shadow: 5px 7px 5px #bcbcbc;
-webkit-box-shadow: 5px 7px 5px #bcbcbc;
}

.colonne {
overflow: none;
display:table-cell;
width:434px;
height : 465 px;
padding : 10px 10px 10px 5px;
} 
.colonne:first-child {
background:#e6e2af;
padding : 10px 5px 10px 10px;
} 
.colonne + .colonne {
background:#efecca
}

J'obtiens donc :

Modifié par Calcifer (29 Jul 2010 - 15:08)