28172 sujets

CSS et mise en forme, CSS3

Bonjour, je rencontre un petit soucis sous Chrome que je n'arrive pas à éclaircir.

J'ai en fait un menu horizontal qui déroule, au survol, un bloc arrondi.

Grosso modo, ce bloc arrondi se décompose en 3 grandes parties:
- 1 supérieure de hauteur=5 px comprenant en background les coins arrondis du dessus
- 1 partie centrale extensible sur la hauteur avec un background de largeur=1px sur hauteur=900px répété sur X et positionné en top left
- 1 partie inférieure de hauteur=5px comprenant en background les coins arrondis du bas

Ce bloc passe impeccablement sur FF, IE, Opera et Safari mais pas sous Chrome.
La partie centrale ne semble pas place le background en top left (enfin c'est ce dont j'ai l'impression)

Voici en image :
Firefox
http://benjhe.free.fr/alsa/firefox.jpg

Chrome
http://benjhe.free.fr/alsa/chrome.jpg

Le code HTML

<div class="roundbox">
  <div class="top-r"></div><div class="top-l"></div>
  <ul class="navigation-2">
    <li><a href="#" title="Sous-Item 1">Sous-Item 1</a></li>
    <li><a href="#" title="Sous-Item 2">Sous-Item 2</a></li>
    <li><a href="#" title="Sous-Item 3">Sous-Item 3</a></li>
    <li><a href="#" title="Sous-Item 4">Sous-Item 4</a></li>
    <li><a href="#" title="Sous-Item 5">Sous-Item 5</a></li>	
  </ul>
  <div class="bot-r"></div><div class="bot-l"></div>
</div>


Le CSS

#navigation-1 .roundbox
  { width:150px; margin:0; padding:6px 0 0 0; position:absolute; text-align:left; top:52px; left:0; background:transparent url('../images/sub-menu-arrow.png') 0 0 no-repeat; display:none; }

#navigation-1 .roundbox .top-l 
  { background:transparent url('../images/top-sub-menu.png') no-repeat top left; width: 145px; height: 5px; }
#navigation-1 .roundbox .top-r 
  { background:transparent url('../images/top-sub-menu.png') no-repeat top right; float: right; width:5px; height:5px; }
#navigation-1 .roundbox .bot-l 
  { background:transparent url('../images/bot-sub-menu.png') no-repeat top left; width: 145px; height: 5px; }
#navigation-1 .roundbox .bot-r 
  { background:transparent url('../images/bot-sub-menu.png') no-repeat top right; float: right; width:5px; height:5px; }

#navigation-1 .roundbox .navigation-2
	{ margin:0; padding:2px 0; border:0; list-style-type:none; background-color:transparent; background-image:url('../images/bg-sub-menu.png'); background-repeat:repeat-x; background-position:top left; min-height:90px; }


Voilà,
je remercie qui pourra m'aider.
Bon finalement, le problème s'est résolu de lui même !?!
Probablement une histoire de cache. Le navigateur devait garder l'ancien background.
Bizarre...