Discussion :

[legillou]

Bonjour tout le monde,

Je sais pas si j'ai posté dans la bonne partie du forum car mon probleme se trouve certe dans le javascript mais concerne la gestion de style CSS.
Mon probleme (qui a la surprise generale, n'existe pas avec FF) concerne le "switch" de style pour des onglets.

Voici mon code de "switch" :

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
<script language="javascript">
function up(id,MaxNbreOnglet)
{
 
	for(i=1;i<=MaxNbreOnglet;i++)
	{
		var tab = document.getElementById('current'+i);
		if (i==id) /// METTRE COMME ACTIF
		{
			tab.style.color="#000";
			tab.style.borderBottom="4px solid #000";
			tab.style.paddingBottom="2px";
		}
		else  
		{
			tab.style.color="";
			tab.style.borderBottom="";
			tab.style.paddingBottom="";
		}
	}
}
-->
</script>

L'effet souhaité :
-souligner l'onglet actif et ecrit en noir.
-l'onglet inactif ecrit en gris sans soulignement.
-Au survol, montrer comme si il etait actif
Mais avec IE, si je clique une fois sur un onglet, le survol des autres ne marche que a moitié (seulement la couleur du lien change, mais aucun soulignement).
Avez vous une idée ??

Au fait si vous voulez voir le CSS:

Code :

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

1
2
3
4
5
6
7
a:link, a:visited, a:hover
{
border-bottom: 4px solid #000;
padding-bottom: 2px;
background: transparent;
color: #000;
}

PS: Il me semble que IE n'aime pas trop ce type de changement : tab.style.borderBottom="";
J'ai l'impression que cette ligne supprime totalement l'effet du CSS concernant le border.

[FremyCompany]

Bonjour,

Je crois bon de rappeler que le style présent sur un élément est prioritaire à ceux définis dans la classe CSS...

borderBottom="" va annuler toutes les directives CSS appliquées à ce bord, me semble-t-il...

Il est toujours préférable de n'éditer à chaque fois qu'un propriété unique et précise (style:boder:bottomxx)

Une autre précision importante :
#0000 n'est pas dans un format valide...
#000000 lui l'est...

Sinon j'avoue ne pas trop voir ou peut se situer le problème...

A suivre..

[legillou]

Ouais j'avais reperer que les couleurs n'etaient pas en format standard, mais bon j'avais recuperer ce script d'un site, et vu que ca marchait je me suis pas fait chier a les rechanger.

FF garde toujours par default les proprietes enonces dans le fichier CSS, pendant que IE reste bloque sur le code.
Il y aurait pas un moyen de contourner ce probleme ?
IL n'y a pas une fonction javacrispt qui permet de remettre le style par defaut a l'element?? Au lieu que je le bidouille pour qu'il fasse semblant

[FremyCompany]

Crée deux classes CSS...

Solution comme ca (à essayer) :

Code :

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

1
2
3
4
5
6
7
.obj {
    // bla bla bla (en CSS)
}
 
.obj:hover {
    // bla bla bla (en CSS)
}

ou sinon (le changement de class se fait avec JS au moyen de className):

Code :

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

1
2
3
4
5
6
7
.obj {
    // bla bla bla (en CSS)
}
 
.obj_hover {
    // bla bla bla (en CSS)
}