Exposant et background...

Hello All,

Je suis en pleine galère pour tenter d'écrire 1 exposant avec 1 background...

Je voudrais écrire NEWS (10) ( sous entendu 10 nouvelles ), avec le 10 dans un petit rond...

Je tente

<ul><li>news<sup>10</sup></li></ul>

Le probleme c'est que le sup ne prend pas le background, et si je le met display:block, c'est la cata... 1h30 que je me bas avec si quelqu'un a déjà fait ce truc , je m'inclinerai devant lui/elle

Appliquer un background à un élément SUP marche bien, comme pour la plupart des éléments (SPAN, A, DIV, tout ce qu'on veut).

Pour rappel, les styles par défaut de cet élément ressemblent à:

sup {
  display: inline;
  font-size: smaller;
  vertical-align: super;
}

Si tu veux faire un arrondi, tu pourrais faire:

#machin sup {
  padding: .15em;
  border: solid 1px #A00;
  border-radius: 1em; /* à décliner en -moz-border-radius et compagnie */
  line-height: 1;
  background: #CCC;
}

Modifié par fvsch (09 Mar 2011 - 19:22)

Merci bcp.

Je vais retester car je te promet que ca marchait pas. ( sous ie6 ) .

Oui je dois toujours galérer avec ie6 donc border-radius c'est compliqué.

J'ai trouvé une solution avec 1 hack ie6, mais nettement moins propre que la tienne...

Pour IE...
Il existe Pie CSS3 , qui simule border-radius, box-shadow, etc sur IE.
http://css3pie.com/
Ca pourrait t'aider