28111 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai réalisé un menu déroulant avec un background linéar gradient qui marche parfaitement sur Google chrome, internet explorer et mozilla firefox. Mais sur safari le fond n'est pas affiché. J'ai donc mis un préfix "-webkit-linear-gradient" mais toujours rien.

Voila le code html :

<div class="choix_langue">
			<ul id="menu_langue">
				<li><a href="#"><img src="drapeau/france.png"> Français</a>
					<ul>
						<li><a href="#"><img src="drapeau/angleterre.png"> English</a></li>
						<li><a href="#"><img src="drapeau/allemagne.png"> Deutsch</a></li>
						<li><a href="#"><img src="drapeau/espagne.png"> Español</a></li>
						<li><a href="#"><img src="drapeau/italie.png"> Italiano</a></li>
						<li><a href="#"><img src="drapeau/arabe.png"> ???????</a></li>
						<li><a href="#"><img src="drapeau/russie.png"> ???????</a></li>
						<li><a href="#"><img src="drapeau/neerlandais.png"> Nederlands</a></li>
						<li><a href="#"><img src="drapeau/chine.png"> ??</a></li>
					</ul>
				</li>
			</ul>
		</div>


Et le code css :

#menu_langue a { 
    display:block; 
    color: #fff; 
    text-decoration:none;
    text-align: left;
    margin-bottom: 1px;
}
#menu_langue li,
#menu_langue li li {
    position: relative;
    border-radius: 5px;
    display:inline-block;
    width: 140px;
    padding: 7px 15px;
    background-color: -webkit-linear-gradient(to right, rgb(228, 58, 21), rgb(230, 82, 69));
    background: linear-gradient(to right, rgb(228, 58, 21), rgb(230, 82, 69));
}

#menu_langue li li:hover { 
    background: #FFCDD2; 
    box-shadow: 0 2px 5px rgba(0,0,0,.26);
}

#menu_langue ul {
    position: absolute;
    top: 2em; left: 0;
    max-height: 0em; 
    margin: 0; 
    background: linear-gradient(to right, rgb(228, 58, 21), rgb(230, 82, 69));
    overflow: hidden;
    transition: 2s max-height 0.3s;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,.26);
    padding: 0;
}

#menu_langue li:hover ul {
    max-height: 20em;
}
Administrateur
Hello,

Par "safari", tu entends les très anciens safari ?
En effet, jusqu'à safari 6 inclus, il ne suffit pas simplement d'ajouter un préfixe webkit : la propriété s'écrivait différemment à l'époque (de tête, il faudrait remplacer "to right" par "left" par exemple).
Meilleure solution
Merci beaucoup pour ta réponse Raphael ça marche.

Effectivement c'est une ancienne version de safari (la version 5.1.7 pour être plus précis)
Modérateur
MrLeo a écrit :

Effectivement c'est une ancienne version de safari (la version 5.1.7 pour être plus précis)
Il ne s'agit quand même pas de la version Windows qui est truffée de bug et qui n'a jamais servit qu'aux développeurs inconscients tout de même ? Rassurez-moi !