Jump to content

marge négative sous un flottant


Recommended Posts

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]

Edited by mathmax
Link to post
Share on other 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.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...