Contours arrondis sur IE8

[merlubreizh]

Bonjour à tous

Ca fait quelque temps maintenant que je galère sur un problème : comment créer des contours arrondis sur IE8 sans passer par les images ? J'ai essayé plusieurs méthodes (roundies, css3pie), mais rien n'y fait, ça ne marche pas et je ne vois pas la solution. Voici le code html concerné

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav id="arrondi" role="navigation">
			<nav id="access" role="navigation">
				<div id="bandeaubasheader" class="bandeaubasheader"></div>
				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
				<?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
				<nav id="access2" role="navigation">
 
						<?php wp_nav_menu( array( 'menu' => 'menu_haut'));?>
 
				</nav>
				</nav><!-- #access -->
			</nav>

Et le code CSS

Code :

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
#access {
	background: #222; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#fff, #a9a9a9);
	background: -o-linear-gradient(#252525, #0a0a0a);
	background: -webkit-linear-gradient(#fff, #a9a9a9);
	/*filter:progid:DXImageTransform.Microsoft.Shadow(color=#a9a9a9);*/
	-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
	/*box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;*/
	clear: both;
	display: block;
	float: left;
	margin: 0 auto 6px;
	margin-top:-30px;
	margin-left:0;
	border-radius:10px 10px 10px 10px;
	z-index:0;
}
#access2{
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#a9a9a9);
    width: 1000px; 
	color: #a9a9a9;
	 -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
    behavior: url(./PIE.htc);
	border : 1px solid blue;
	/*border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;*/
}
#arrondi {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
    behavior: url(PIE.htc);
	border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

[eckerdecker]

2 choses à savoir sur PIE :

- l'élément doit être au moins en position:relative
- le chemin passé au behavior est relatif au document qui utilise ton css et pas à la feuille elle-même

peut-être cela te débloquera-t-il

[ledisciple]

Code :

1
2
3
4
5
6
7
 
#arrondi 
{
-webkit-border-radius: 10px 10px 10px 10px; 
    -moz-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}

http://border-radius.com/

[merlubreizh]

@eckerdecker : Merci pour ta réponse. Sur ma classe "arrondi", j'ai rajouté l'attribut

Code :

position:relative;

mais rien n'a changé. Ensuite, le fichier PIE.htc se trouve dans le même répertoire que le header.php qui utilise cette classe css. En gros, ça ne change rien parce que je pense avoir mis le bon chemin dans mon behavior.

[merlubreizh]

@ledisciple : Merci pour ta réponse, mais Internet Explorer 8 ne reconnaît pas la propriété border-radius

[ledisciple]

Envoyé par merlubreizh

@ledisciple : Merci pour ta réponse, mais Internet Explorer 8 ne reconnaît pas la propriété border-radius

Mettre un script par navigateur, plus, mettre un autre script pour chacune des versions (IE 8), pourquoi ne pas faire directement des images? Ces dernières sont compatibles avec n'importe quels navigateurs quelque soit sa version ...

[merlubreizh]

Parce que j'ai un dégradé

[ledisciple]

Pour toutes mes images j'utilise GIMP : dégradés, coins ...

[merlubreizh]

Oui oui, moi aussi, mais là j'ai fait mon dégradé avec un filter gradient. Et comme le site doit être mis en ligne dans les prochains jours, j'ai pas vraiment envie de remettre tout ça en question maintenant Je pense qu'il s'agit d'un problème lié à l'url du behavior, sinon je ne vois vraiment pas ... Merci en tout cas de consacrer un peu de ton temps pour me répondre

[merlubreizh]

J'abandonne

[eckerdecker]

Sur ton #arrondi tu utilises border-bottom-left-radius (et right aussi), PIE n'autorise pas ces propriétés, seule border-radius est pris en compte, mais peut-être que les deux autres parasitent l'interprétation.
Essayes avec ceci :

Code :

1
2
3
4
5
6
7
#arrondi {
    position:relative;
    -moz-border-radius: 10px 10px 5px 5px;
    -webkit-border-radius: 10px 10px 5px 5px;
    border-radius: 10px 10px 5px 5px;
    behavior: url(PIE.htc);
}

[oceane751]

ou sinon teste en mettant position:relative; à la div parente
et pas à #arrondi