28172 sujets

CSS et mise en forme, CSS3

RESOLU : SPAN et LI dans IE7

Bonjour à tous

Je termine actuellement un site mais, il fonctionne actuellement très bien sur IE8, Firefox et Safari. Malheureusement, il y a un problème sur IE7 et même si j'ai abandonné la compatibilité pour la version 6, je voudrais améliorer les choses pour Internet Explorer version 7.

Le problème en fait est que j'utilise un <span> dans un <li> afin de faire flotter à droite une information complémentaire.

Un visuel sera plus facile, voici l'adresse du site en question : http://www.livret-epargne.org/

Pouvez vous m'aider ?

Merci d'avance

PS : Je suis sur Mac donc j'utilise ce site pour voir le rendu du site avec IE : http://ipinfo.info/netrenderer/index.php
Modifié par Kwakwa (06 May 2010 - 14:00)
Administrateur
Bonjour,

en enlevant float: right; de .taux il se passe quoi ?
Et en testant zoom: 1; sur a ou sur .taux ?

Mes trucs de débogage : mettre des background-color criards (green, red, blue, pink, ...) sur les différents éléments et comparer IE/Fx. Rajouter des zoom: 1; sur les parents, les enfants, les frères, ... sans chercher à comprendre et ensuite voir si ça a résolu le problème ou si non, finalement c'est autre chose. C'est pas malin mais c'est plus rapide Smiley baille
salut,

essaie ça pour voir si cela te convient.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<style type="text/css">

ul { width: 250px;
     list-style-type: none;
     margin: 0;
     padding: 0;
   }

li { margin: 10px 0;
     padding: 0;
     width: 100%;
     height: 25px;
     display: block;
     background-color: #e3e3e3;
     font-size: 1em;
     font-family: verdana, times, serif;
     position: relative;
   }

span.taux { height: 20px;
	    width: 50px;
	    font-size: 1em;
	    background-color: #ff0000;
	    color: white;
            padding: 0;
            text-align: center;
	    position: absolute;
	    right: 10px;
	    top: 50%;
	    margin-top: -10px;
	  }

</style>


</head>

<body>

<ul>
   <li><a href="#">livret A bla bla bal</a><span class="taux">1.5%</span></li>
   <li><a href="#">livret A</a><span class="taux">1.5%</span></li>
   <li><a href="#">livret A</a><span class="taux">1.5%</span></li>
   <li><a href="#">livret A</a><span class="taux">1.5%</span></li>
   <li><a href="#">livret A</a><span class="taux">1.5%</span></li>
</ul>


</body>
</html>
Merci flattazor j'ai adapté ton code et ça marche bien.

En plus ça marche aussi avec IE6 ! Je vais utiliser le position: relative; plus souvent merci
Modifié par Kwakwa (23 Mar 2010 - 23:22)
salut,

dans ce cas tu peux marquer résolu sur le titre en editant ton premier post.

les modérateurs t'en seront reconnaissant.

bye
Sujet clos
Aller à