Geckozone

Bonsoir,
J'ai un souci d'affichage d'une image (nommée "Lire....") sur mon site avec IE. Voyez plutôt : http://jojaba.free.fr. Elle se trouve dans les cadres des dernières ressources publiées sur la page d'accueil, en haut à droite à chaque fois).Avec Firefox on voit la petite image, avec IE, elle semble être caché par l'arrière plan du conteneur (on peut cliquer mais on ne la voit pas). Problème PNG ?

Merci d'avance pour votre aide.

Code de la partie de la page incriminée :

Code : Tout sélectionner

<div class="resource">
  <p class="lecture"><a href="/?/Extensions-traduites/Sites-d-ex"><img alt="Lire..." src="/xmedia/theme/jojaba/img/lire.png" title="Lire..." /></a></p>
  <h2 class="resource-title">Sites d'extensions traduits</h2>
  <p class="resource-info">Le 12/09/06 à 07H39,
   par <a href="mailto:%6a%6f%6a%61%2e%62%61%40%6c%61%70%6f%73%74%65%2e%6e%65%74">jojaba</a>

   </p>
</div>

Fragments CSS concernés :

Code : Tout sélectionner

.resource{
	position: relative;
	margin: 0;
	padding: 5px;
	width: auto;
	background: transparent url(img/fond-ressource.png) repeat-y;
	border-bottom: dotted #ABABAB 3px;
	border-right: solid #ABABAB 3px;
}
}

.lecture{
	float: right;
	margin: 0;
	padding: 0;
	z-index: 100;
}

.lecture a{
	border: 0;
}

.lecture a:hover{
	border:0;
}

J'ai essayé de mettre un z-index à l'image et j'ai placé le conteneur en positionnemnent relatif pour tenter de résoudre le problème mais rien n'y fait.

Tu devrais essayer de mettre une largeur :

Code : Tout sélectionner

.lecture{
   float: right;
   margin: 0;
   padding: 0;
   width:100px;
}

j'ai eu ce souci aussi

dans le même genre de situtation que jojaba[1]
la seule solution, que j'avais trouvé après en avoir essayé de nombreuses dont aussi le z-index, avait été de mettre les 2 éléments en float (un right et un left) pour faire plaisir à IE
(alors que, bien sûr, tout se passait bien sur Opera et Firefox)

ça donnerait :

Code : Tout sélectionner

.resource{
   float:left;
   margin: 0;
   padding: 5px;
   width: auto;
   background: transparent url(img/fond-ressource.png) repeat-y;
   border-bottom: dotted #ABABAB 3px;
   border-right: solid #ABABAB 3px;
}

.lecture{
   float: right;
   margin: 0;
   padding: 0;
   z-index: 100;
}

il n'y a pas de modification vraiment visible sous Firefox, sauf que le footer vient un peu se coller sous les "ressources", en ajoutant un margin-top au footer, ça devrait être bon du coup

[1] un gros bloc à gauche (dans le flux) et un plus petit élément flottant à droite.

Merci pour vos réponses, je teste et reviens ici dès que possible.

guilhem_mdg a écrit :Tu devrais essayer de mettre une largeur :
Code : Tout sélectionner
.lecture{
   float: right;
   margin: 0;
   padding: 0;
   width:100px;
} 

Ne marche pas ! J'ai même donné les deux dimensions. Pas de résultat.

Merci tout de même.

HP a écrit :j'ai eu ce souci aussi
dans le même genre de situtation que jojaba[1]
la seule solution, que j'avais trouvé après en avoir essayé de nombreuses dont aussi le z-index, avait été de mettre les 2 éléments en float (un right et un left) pour faire plaisir à IE
(alors que, bien sûr, tout se passait bien sur Opera et Firefox)

Oui, ça a l'air d'être une méthode intéressante. J'ai essayé mais je n'ai pas vraiment réussi à mettre ça en place correctement. J'ai finalement opté pour un simple text-align: right (le résultat est correct et cela ne demande pas de trop modifier le code

Merci encore !

jojaba a écrit :J'ai finalement opté pour un simple text-align: right (le résultat est correct et cela ne demande pas de trop modifier le code

nickel !

HP a écrit :
jojaba a écrit :J'ai finalement opté pour un simple text-align: right (le résultat est correct et cela ne demande pas de trop modifier le code )
nickel !

Mouaip

J'aurais préféré une image flottante, mais bon ...
J'avais tenté de mettre l'image en background et j'avais mis des espaces insécables pour le lien (je ne sais pas si je suis clair là

), ça n'a pas marché.
Je ne comprends pas pouquoi ce float pose des problèmes à IE. J'ai le même cas ici et la boîte du sommaire de l'article est tout à fait visible !

jojaba a écrit :Je ne comprends pas pouquoi ce float ôse des problèmes à IE. J'ai le même cas ici et la boîte du sommaire de l'article est tout à fait visible !

vu !

pourquoi le float avec l'image pose souci ...
si je le savais

perso, j'ai déjà dit avoir eu le même souci, en plus l'image était dans un <p>
et si je me souviens bien (et selon toute logique) c'est le <p>, donc un bloc, qui était flottant.
Par contre, j'imagine que ça vient plutôt des dimensions de l'objet, plutôt que sa nature, mais sans certitude ...

en définitive :
IE a sa raison que la raison ignore

Geckozone

Problème avec image en float sur IE

Problème avec image en float sur IE