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
Le CSS
Voilà,
je remercie qui pourra m'aider.
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.