28172 sujets

CSS et mise en forme, CSS3

Problème de rendu d'une ombre porté sur un menu sous IE8

Bonjour à tous!

Je suis bloqué sur un problème de css...
J'ai besoin de votre aide, parce que la... je patauge complètement...

J'ai fait un menu css avec une ombre porté, marche super bien sous chrome ff et... bien évidement pas sous IE8 (le standard dans notre boite)

Le problème c'est qu'au survol, la couleur du texte est la même que l'ombre porté alors qu'elle devrait être orange.
Petite précision, au survol, il y a un dégradé sur le <li>, c'est ça le soucis, si je l'enlève, il n'y a plus de problème, mais je nais plus mon dégradé... et je le voudrais Smiley smile

En vous remerciant d'avance
Bien cordialement
Le mec qui patauge...


<html>
<head>
<STYLE type="text/css">
#menu_left {
    float : left;
    width : 175px;
    margin-left : 1px;
    font-weight : Bold; 
    font-size : 10px;
    
    -moz-box-shadow: 3px 3px 5px #aaa; 
    -webkit-box-shadow: 3px 3px 5px #aaa; 
    box-shadow: 3px 3px 5px #aaa; 
    
    filter:progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=6);
    zoom: 1;
}

#menu_left ul 
{
    padding : 0px;
    margin : 0px auto;
    list-style : none;
    line-height : 25px;
    
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#menu_left a 
{
    display : block;
    padding : 0px;
    height : 25px;      
    color : #333;
    text-decoration : none; 
    text-align : left;
    border-bottom : 1px solid #d9d9d9;
}

#menu_left a:hover 
{
    background:-moz-linear-gradient(top, #f8f8f8, #e5e5e5);
    background:-webkit-linear-gradient(top, #f8f8f8, #e5e5e5);
      
    *background: #f8f8f8;
	  background: #f8f8f8\0/;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#f8f8f8, endColorstr=#e5e5e5);  
    
    color : #d09d20! important;
}

#menu_left li a 
{
    width : 174px;
    padding-left : 1px;
    background : #e5e5e5;
}

#menu_left li li a 
{
    background : #f8f8f8;
    padding-left : 15px;
    width : 160px;
}
</STYLE>
</head>
<body>
<div>
    <div id="menu_left">
        <ul><li><a href="#">toto</a>
                <ul>
                    <li><a href="#">coco</a></li>
                    <li><a href="#">cici</a></li>
                    <li><a href="#">cucu</a></li>
                </ul>
            </li>
            <li><a href="#">titi</a></li>
            <li><a href="#">tutu</a></li>
        </ul>

    </div>
</div>
</body>
</html>

Modifié par Keep667 (11 Jul 2011 - 11:44)
Bonjour,

Merci de modifier ton message et de rajouter les bbcode [ code] et [ /code] (sans espaces) autour de tes portions de code afin de le rendre lisible.
Sujet clos
Aller à