Problème de cadres : IE le fourbe sans logique !

Bonjour !
J'aurais besoin d'aide déjà pour mon premier post .

Donc je suis entrain de créer un design et je tombe sur un os... Et oui, IE !
Voici donc déjà une illustration pour mieux vous illustrer le problème si j'ose dire.

Le problème se situe donc où il y a les espaces en rouge. En effet que ce soit sous firefox ou opera tout marche à la perfection mais non monsieur IE trouve que ça ne doit pas marcher.

Voici donc mon code xhtml :

<div id="head"><div id="coingauche"></div><div id="coindroite"></div><div id="millieu"></div></div>

Et le css correspondant :

table#main td#content div.block div#head
		{
			height: 22px;
			background: red;
		}		
		table#main td#content div.block div#head div#coingauche
		{
			width: 22px;
			height: 22px;
			margin: 0;
			float: left;
			background: url("images/coingauche.png") no-repeat;
		}
		table#main td#content div.block div#head div#coindroite
		{
			width: 22px;
			height: 22px;
			margin: 0;
			float: right;
			background: url("images/coindroite.png") no-repeat;
		}
		table#main td#content div.block div#head div#millieu
		{
			height: 22px;
			margin: 0 22px;
			background: url("images/millieu.png") repeat-x;
		}

Merci à vous !
Modifié par Dawei (14 Aug 2007 - 15:22)

Essaye un padding: 0 sur tes trois blocs.

Malheureusement, non toujours le même espace !

Si ta div possède toujours la même largueur, tu peux corriger rapidement ton problème en remplacant tes 3 divs par une seule et en faisant une image de ton bandeau bleu au complet.

Après je comprend que tu puisses vouloir concerver la méthode que tu utilises actuellement mais celle ci évite ce genre de problème

Bonne soirée

Oui c'est ce que j'utilise pour les menus.
Mais pour la partie centrale, il me faut quelque chose d'extensible !

Merci pour vos réponses, je continue de chercher...

Bonjour,

Pourquoi mets-tu le #milieu à droite du #droite ?
Est-ce que les “margin: 0 22px;” ne joueraient pas un rôle dans ce problème ?

Oui je met millieu à droite du droite sinon ça ne va même pas sous firefox.
Et non ça ne joue aucun rôle.

Mais j'ai trouvé une solution pas très propre mais elle fonctionne !

	table#main div.cadre div#head
	{
		height: 22px;
		margin: 0 0 0 8px;
		padding: 0;
		background: url("images/droite.png") repeat-x right top;
	}
		table#main div.cadre div#head div#coingauche
		{
			width: 8px;
			height: 22px;
			margin: 0;
			float:left;
			position: relative;
			left: -8px;
			background: url("images/coingauche.png") no-repeat;
		table#main div.cadre div#head div#title
		{
			position: relative;
			left: -8px;
			padding: 0;
			margin: 0;
		}

	<div id="head">
	  <div id="coingauche"></div>
	  <div id="title"></div>
	</div>

l'image coingauche est juste un coin, et l'image droite, est un long fond de 1000px avec à son bout le coin droite.

Voilà ça contourne le problème.
Merci de votre aide, si quelqu'un a découvert le problème qu'il ne se gène pas pour le poster ici, je suis toujours preneur !
Modifié par Dawei (14 Aug 2007 - 23:18)