28173 sujets

CSS et mise en forme, CSS3

Bonjour tout le monde ...et bonne année !
Cela fait quelque temps que je delaisse le code et ce forum ..
Je suis confronté à un probleme d'affichage sous IE
voici mon code
<div id="conteneur">
	<div id="texte">
		<h1>Titre</h1>
<img src="images/dendrocygne-veuf2.jpg" alt="white-faced whistling-duck picture" title="white-faced whistling-duck © Yves Thonnerieux"/>	
		<div id="auteur"><a href="http://naturailes.net/">&copy; Yves Thonnerieux</a></div>
		<h1>Habitat description....</h1>
		<p>C'est à travers de larges grilles, que les femelles du canton contemplaient un puissant gorille, sans souci du qu'en-dira-t-on. Avec impudeur, ces commères, lorgnaient même un endroit précis que rigoureusement ma mère m'a défendu de nommer ici... Gare au gorille... Tout à coup la prison bien close où vivait le bel animal s'ouvre, on n'sait pourquoi. Je suppose qu'on avait du la fermer mal. Le singe, en sortant de sa cage dit "C'est aujourd'hui que j'le perds !". Il parlait de son pucelage, vous aviez deviné, j'espère. Gare au gorille... L'patron de la ménagerie criait, éperdu : "Nom de nom ! C'est assommant car le gorille n'a jamais connu de guenon !". Dès que la féminine engeance sut que le singe était puceau, au lieu de profiter de la chance, elle fit feu des deux fuseaux. Gare au gorille... Celles là même qui, naguère, le couvaient d'un oeil décidé, fuirent, prouvant qu'elles n'avaient guère de la suite dans les idées ; d'autant plus vaine était leur crainte, que le gorille est un luron supérieur à l'homme dans l'étreinte, bien des femmes vous le diront. Gare au gorille...</p> 
		
	</div>
</div>


et ma css
body {
	font-family: verdana, arial, sans-serif; 
	}
#conteneur {
	position: relative;
    width: 800px;
    background-color: #f7f9e6;
	}
h1 {
	font: italic bold 110% "Trebuchet MS", verdana, arial, sans-serif;
	}
#texte { 
	float: left;
	width: 80%;   
	}
#auteur{
	position: relative; 
	margin-left:15px; 
	float: left; 
	width:475px; 
	}
img {
	float: left;
	}



Tout ce passe bien sur les autres navigateurs mais IE me met
le texte sous la photo et sa legende (©) au lieu de le mettre
à droite de ceux-ci....
je tourne en rond sans pouvoir resoudre ce problème,
si vous pouviez me dire où je me trompe ce serait super !
Amicalement,
yvo
Modifié par yvo (07 Jan 2007 - 14:00)
Bonjour et bonne année!
On en vient tous un jour ou l'autre à rencontrer ce cas de figure puisque
il est très fréquent: un flottant qui a une marge latérale.
Tu es tombé sur le IE Doubled Float-Margin Bug et mon
intuition me dit que ton problème en est issu.

Tu dois le corriger en ajouter un display:inline à tes déclarations:

#auteur{
	position: relative;
        display:inline;
	margin-left:15px; 
	float: left; 
	width:475px; 
	}


IE7 a corrigé ce bug et pratiquement tout les bug
cités dans la liste de positioniseverything.net mais le display:inline
n'aura aucun effet sur celui-ci puisqu'un élément flottant
ignore la propriété display.
Modifié par Hermann (07 Jan 2007 - 13:02)
Merci Hermann Smiley smile pour ta solution ainsi que pour ce lien que je ne connaissais pas !
yvo