28173 sujets

CSS et mise en forme, CSS3

Voici l'url : http://sbarbay.free.fr/test/

Voici le code :

<div class="col-100" id=jaune>
	<div class="col2" id=vert>
		<div class="box">boite 1</div>
	</div>
	
	<div class="col2" id=rouge>
		<div class="box">boite 2</div>
	</div>
</div>

<div class="box">		
	boite bas
</div>


Voici le css :

.col-100 { position: relative; width: 100%; text-align: center; vertical-align:top; margin:0; padding:0; }

.col2 { float:left; clear:right; width: 50%;   margin:0; padding: 0; background-color: blue; }
.col3 { float:left; clear:right; width: 33%;   margin:0; padding: 0; }
.col4 { float:left; clear:right; width: 24.9%; margin:0; padding: 0; }

#bleu  { background-color: blue;   }
#jaune { background-color: yellow; }
#rouge { background-color: red;    }
#vert { background-color: green;    }

.box
	{
	position:relative;
	background: url(pic/interface/parchemin.jpg) top left repeat;
	border: 1px solid #660000;
	margin: 10px 10px 0 0;
	padding: 5px;
	clear:both;
	}


Le problème :
- sous IE : y'a plus de soucis (j'avais déjà demandé votre aide)
- sous Firefox : la boite "box" contenant la fonction de lecture de citation est collé à la boite "col-100" qui contient 2 colonnes

Auriez vous une idée sur la non-prise en charge de cette marge ?
Apparement, FF ne sait pas interpréter col-100... assez bizarre.


Merci d'avance
Modifié par moorf (26 May 2006 - 14:39)
Une piste pour les gens qui cherchent : le bloc "col-100" n'a pas l'air d'être pris en charge par FF.
En effet, lorsque je vire toutes les couleurs de fonds (sauf celle du dit bloc), on ne voit pas sa couleur, donc il n'a pas l'air d'exister ou du moins de contenir les autres boites (1 et 2).
Le fait d'avoir du float dans un bloc position:relative n'a pas l'air de lui plaire...

Une idée ???
Modifié par moorf (26 May 2006 - 15:51)
J'ai trouvé une pseudo solution alacon donc je serais preneur et ouvert à d'autres propostions !

Voici ma "solution" : je mets un padding-top pour le bloc col-100 et sur les blocs qui seraient amenés à le suivre.
Ca fait pas laid sous IE (mais ca ajoute une marge car IE ne calcule rien comme tout le monde) et ca fonctionne bien sous Firefox.

Enfin, là, pour un coup, j'ai bien l'impression que c'est FF qui merdoit...
Modifié par moorf (26 May 2006 - 17:33)