28173 sujets

CSS et mise en forme, CSS3

Bug IE.6 => Espace indésirable entre plusieurs box flottantes

Hello people !

A l'heure actuelle, mes recherches sont infructueuses.

Mon problème est le suivant.
J'ai trois div (mgaLeft, mga, mgaRight) qui doivent former un cadre pour recevoir des infos.

Sous Firefox pas de problème.
(Je ne pense pas qu'il s'agit du bug doublemargin sous ie, enfin je crois)

Sous ie un espace indésirable apparait. Je ne sais pas comment résoudre ce problème. Pour mieuxcomprendre j'ai fait deux captures d'écran. Les différents div sont entourés (border:1px red solid).

Firefox
InternetExplorer

une partie de la feuille css
/* Surcharge */
div#contLeft {
	top:-400px;
	}
div#contMain {
	top:-590px;
	}

/* Selection du menu */
li#mangas a {
	background:transparent url("../i/btMangas.png") no-repeat;
	background-position:-64px 0;
	width:64px;
	}
	
div#idGn {
	margin:0 auto;
	}

div#idGn p a, h3 a {
	text-decoration:none;
	}

div#idGn p {
	text-align:center;
	}
	
.titre {
	margin-bottom:5px;
	margin-top:2px;
}
.ils {
	width:100px;
	height:100px;
	float:left;
	margin-right:7px;
}
.mga {
	padding
	background:url("../i/boxMga.png") repeat-x top left;
	height:200px;
	overflow:hidden;
	border:1px solid red;
	}
.mga em {
	color:#ff9933;
	font-style:normal;
	}
.descr {
	clear:both;
	margin-top:25px;
	}
	
.mgaLeft, .mgaRight {
	display:inline;
	border:1px solid red;
	height:200px;
	width:8px;
	margin:0;
	padding:0;
	}
.mgaLeft {background:url("../i/mgaLeft.png") no-repeat;float:left;}
.mgaRight {background:url("../i/mgaRight.png") no-repeat;float:right;}


Une partie du xhtml
	
	 		
				
		<div class="mgaLeft"></div><div class="mgaRight"></div><div class="mga"><h3 class="titre"><a href="/?do=showManga&amp;mga=add464"
			title="Visualiser la fiche descriptive de Add FR_edit">Add FR_edit <img
			src="i/show.png" alt="description" /></a>
		</h3>
	
				<img src="i/mga/default.png" alt="pas d'image"
			title="Visualiser la fiche de Add FR_edit" class="ils"/>
				<p><strong>Titre original </strong>: Test22 JP_edit<br />
			<strong>Ann&eacute;e</strong> : 2000 <br />

			20 / 20
			volumes par Miyuki ABE</p>
		<p>
			[&nbsp;<em>action</em>&nbsp;]&nbsp;[&nbsp;<em>amour</em>&nbsp;]&nbsp;[&nbsp;<em>art martiaux</em>&nbsp;]&nbsp;[&nbsp;<em>yonkoma</em>&nbsp;]&nbsp;		</p>

		<p class="descr"> Description_edit</p>
		</div>
	 		
				
		<div class="mgaLeft"></div><div class="mgaRight"></div><div class="mga"><h3 class="titre"><a href="/?do=showManga&amp;mga=bat568"
			title="Visualiser la fiche descriptive de Battle Royale">Battle Royale <img
			src="i/show.png" alt="description" /></a>
		</h3>
	
				<img src="i/mga/bat568.png" alt="Image de Battle Royale"
			title="Visualiser la fiche de Battle Royale" class="ils"/>
				<p><strong>Titre original </strong>: Battle Royale<br />

			<strong>Ann&eacute;e</strong> : 2003 <br />
			10 / 15
			volumes par Yoshihiro TOGASHI</p>
		<p>
			[&nbsp;<em>action</em>&nbsp;]&nbsp;[&nbsp;<em>seinen</em>&nbsp;]&nbsp;		</p>

		<p class="descr"> Manga tir&eacute; du film (dans lequel joue Takeshi Kitano) du m&ecirc;me nom, film qui est lui meme tir&eacute; d'un roman.</p>
		</div>

Modifié par xS_ (02 May 2006 - 16:20)
Trois choses :

– Je n'aurais pas fait mes cadres décorés de cette manière, mais plutôt dans la hauteur, tout en me servant d'éléments présents dans le code plutôt qu'en rajoutant des éléments vides. Finalement, au lieu d'avoir trois div, tu aurais pu avoir un tableau à 3 cellules (dont une seule cellule de contenu), ça serait revenu plus ou moins à la même chose.
Pour info, j'aurais fait plutôt comme ça :
http://web.covertprestige.info/test/05-boite-avec-bordures-en-html-et-css.html
Version fluide (hauteur et largeur) :
http://web.covertprestige.info/test/06-page-fluide-avec-bordures-en-html-et-css.html

– Les blocs fixés en hauteur, c'est une vraie fausse bonne idée. Ou une vraie mauvaise idée. Essaie deux ou trois petits <ctrl><+> sous Firefox, pour voir ce que ça donne avec des réglages par défaut différents.

– Le bug en question est le Three Pixel Jog couplé à un problème de HasLayout.
http://www.test.blog-and-blues.org/haslayout/tests/float6.html

Bonne chance avec tout ça !
Sujet clos
Aller à