28173 sujets

CSS et mise en forme, CSS3

<li>, <img> et <a>

Bonjour,

j'ai un problème avec le code suivant :
<ul id="PartenairesList">
		<li class="partenaire0">
			<img class="pict" src="images/1176574501.jpg"/>
			<a class="name" href="/partenaires/5-Garage-Schumacher.html">Garage Schumacher</a>
			<a class="more" href="/partenaires/5-Garage-Schumacher.html">>> Details</a>
		</li>										
		<li class="partenaire1">
			<img class="pict" src="images/1176573833.jpg"/>
			<a class="name" href="/partenaires/3-Jec-Import.html">Jec Import</a>
			<a class="more" href="/partenaires/3-Jec-Import.html">>> Details</a>
		</li>
		<li class="partenaire0">
			<img class="pict" src="images/117657005923586500.jpg"/>
			<a class="name" href="/partenaires/2-Magic-Needle.html">Magic Needle</a>
			<a class="more" href="/partenaires/2-Magic-Needle.html">>> Details</a>
		</li>											
		<li class="partenaire1">
			<img class="pict" src="images/1176574180.jpg"/>
			<a class="name" href="/partenaires/4-Mitch-Tattoo.html">Mitch Tattoo</a>
			<a class="more" href="/partenaires/4-Mitch-Tattoo.html">>> Details</a>
		</li>
</ul>


CSS :

#PartenairesList li {
	clear: both;
	position: relative;
	margin: 0;
	margin-bottom: 10px;
	border: 1px dotted #eeeeee;
	padding: 5px;
	color:#787878;
	overflow: auto;
}

.partenaire0, .partenaire1 {
	margin: 0;
	padding: 0;	
}

.partenaire0 .pict {
	float: left;
}

.partenaire0 .name {
	position: absolute;
	right: 20px;
	top: 10px;
	font-weight: bold;
	font-size: 16px;
}

.partenaire0 .more {
	position: absolute;
	right: 20px;
	bottom: 10px;
}

.partenaire1 .pict {
	float: right;
}

.partenaire1 .name {
	position: absolute;
	left: 20px;
	top: 10px;
	font-weight: bold;
	font-size: 16px;
}

.partenaire1 .more {
	position: absolute;
	left: 20px;
	bottom: 10px;
}


Sous Firefox et ie7, tout se passe comme je le veux mais par contre sous ei6 tout est décalé....

Pouvez-vous m'aider à trouver l'erreur ?

Merci d'avance....
Bonjour,
Comme tout le monde n'est pas devin, je te rappelle l'une des Règles que tu as dû survoler trop vite :
Règle 13 a écrit :
Enfin, n'hésitez pas à toujours fournir une image explicative et une url où les membres auront un aperçu de votre problème. La règle est simple : il faut toujours donner un maximum de détails pour être sûr d'avoir une chance que les autres comprennent et aident.
racing66 a écrit :
Oups, j'avais oublié de copier les images...
Désolé...

Ok, c'est mieux ...
Mais euh, avec un Doctype, ça donne quoi ? Smiley rolleyes

Pour info, en l'absence de DTD, IE6 passe automatiquement en mode quirks
Le Doctype ne change rien. J'ai essayé avec :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Bonjour,
tu as un bug de haslayout :
ajouter un height:1% ou zoom:1 aux <li> à placer dans une feuille de style en commentaire conditionnel (voir la FAQ)
comme ceci :
#PartenairesList li {height:1%;}

Modifié par Hermann (17 Apr 2007 - 19:15)
En effet, cela fonctionne !

Par contre, avec Firefox, c'est propriété ne change rien. Je ne suis donc pas obligé de la mettre en commentaire conditionnel ?

Un grand merci pour votre aide rapide !

Super forum !
Sujet clos
Aller à