Bords arrondis avec jquery.corners.js ne s'affichent pas sur certains navigateurs

**smook1** · 10/02/2009, 04h16

Bonjour
j'essaie de faire un site et j'ai décidé d'utiliser jquery ( apparemment c'est la bibliothèque la plus facile a utiliser pour un débutant).
J'aimerais faire des bords arrondis et j'ai utilisé le plugin jquery.corners.js.
Tout marche bien sous Firefox et Safari mais sous Internet Explorer,Google chrome et Opera ca s'affiche bizarrement.
Je fournis les différents codes en espérant de l'aide.
merci

Html + javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">                                                                  
 <head>                                                                  
 <script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
 <script src="js/jquery.corners.js" type="text/javascript"></script>         
 <script type="text/javascript">                                         
      $(document).ready(function(){
		$("#menu ul li a").corners("top-left top-right"); });                             
 </script> 
<link href="css/menu.css" rel="stylesheet" type="text/css" />                                                              
 </head>                                                                 
 <body>                                                                  
   <div  id="menu" >
	<ul id="liste">
            <li id="li1"><a href="#">liste1</a></li>
            <li id="li2"><a href="#">liste2</a></li>
            <li id="li3"><a href="#">liste3</a></li>
            <li id="li4"><a href="#">liste4</a></li>
            <li id="li5"><a href="#">liste5</a></li>
            <li id="li6"><a href="#">liste6</a></li>       
        </ul>
    </div>                                     
 </body>                                                                 
 </html>

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
#menu{
	position:absolute;
	width:50%;
	height:4%;
	z-index:5;
	left: 24%;
	top: 16%;
}
#menu ul{
	padding:0%;
	list-style:none;
	text-align:center;
	margin:0px;
	border-bottom:solid #660000 1px;
}
#menu ul li
{
 
	margin-right:1%;
	color:transparent;
 
	display:inline;
 
}
#menu ul li a
{
	padding:0px 6px;
	background:transparent;
	color:#660000;
	font: 0.6em "Trebuchet MS", Arial, Helvetica, sans-serif;
	line-height: 1%;
	text-align:center;
	text-decoration:none;
	border-top: solid  #660000 1px;
		border-right: solid  #660000 1px;
			border-left: solid  #660000 1px;
 
}
#menu ul li a:active ,#menu ul li a:hover 
{
	background:#660000;
	color:#FCFFF0;
	text-decoration:none;
}

**smook1** · 11/02/2009, 23h22

Bonsoir
peut-être que je m'y prend mal et que le code n'est pas propre et mal écrit.ou alors si vous avez une solution qui marche bien ça m'aiderait beaucoup.

Bords arrondis avec jquery.corners.js ne s'affichent pas sur certains navigateurs

jQuery

Discussions similaires

Partager

Partager