marge négative sous un flottant

mathmax · 3 Mai 2006

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é 3 Mai 2006 par mathmax

ghost · 3 Mai 2006

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.

mathmax · 4 Mai 2006

Ta méthode marche bien sur les 3 navigateurs. Merci.

Connexion

marge négative sous un flottant

Sujets conseillés

mathmax

ghost

mathmax

Veuillez vous connecter pour commenter

Parcourir

Activité