Aller au contenu

marge négative sous un flottant


mathmax

Sujets conseillés

Bonjour,

Je cherche à comprendre pourquoi j'obtiens des résultats différents (entre IE6, Opera et FF) pour le bout de code suivant :

<style>
#cadre1 {
background-color:green;
width:400px;
height:100px;
float:left;
}
#cadre2 {
clear:left;
border:20px solid blue;
margin-top:-40px;
}
</style>
</head>

<body>
<div id="cadre1"></div>
<div id="cadre2"></div>
</body>

Dans FF, la marge négative du cadre 2 ne semble pas être prise en compte,

Dans Opera, cette marge négative est prise en compte mais le cadre 2 passe en arrière plan,

Dans IE6 tous s'affiche normalement.

Si je supprime la propriété float:left pour le cadre 1, alors j'obtiens le même affichage dans les 3 navigateurs (comme dans IE6). Pourquoi ?

merci d'avance pour votre aide [smile]

Modifié par mathmax
Lien vers le commentaire
Partager sur d’autres sites

Bonsoir,

Bon, je me fais une pause avec ton soucis !!

Déja ton cadre 2 est codé pour moi de manière curieuse

border:20px solid blue; ma foi, je ne connaissais pas mais bon !!

Les sorties de float sous IE ou FF sont souvent hasardeuses... et pour avoir le même résultat sous les 2 navigateurs c'est souvent du sport plutôt de la haute voltige pas toujours bien orthodoxe ...

Avec mon codage du cadre 2 la solution que je peux t'indiquer est celle ci :

<head>
<style>
#cadre1 {
background-color:green;
width:400px;
height:100px;
float:left;
}
#cadre2 {
clear:left;
float:left;
background-color:blue;
width:200px;
height:100px;
margin-top:-40px;
}
</style>
</head>
<body>


<body>
<div id="cadre1"></div>
<div id="cadre2"></div>
</body>

Curieux non? chez moi ça marche maintenant il faut tester sous Opera ?

Si tu me demandes pourquoi ben j'en sais rien et si un pro veut bien m'expliquer, je suis preneur car dans le style j'en ai quelques autres toujours inexpliqués ...

Cordialement.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...