Probleme de css ou js avec IE8 (et IE8 seulement)

Sujet résolu

13 décembre 2010 à 19:20:27

Bonjour !

Voici mon probleme: je m'arrache les cheveux depuis ce midi avec ce truc insoluble ! Je ne saisis pas du tout ce qui ne va pas.

Voici trois fichiers: un html, un js, un css

Juste des onglets dans une liste pour le html.
Le css pour un peu de beauté.
Avec js, au chargement de la page (ici la page c), l'onglet correspondant a la page active se leve de quelques pixels pour indiquer au lecteur dans quelle page il se trouve.

Mais une illustration vaut mieux qu'un long disours ! Je vous propose d'essayer avec Safari, FF, Chrome, Opera, IE7, IE9, MAIS PAS IE8 !

http://glp.lescigales.org/essai.html

Vous voyez, c'est tres bô !

Par contre avec IE8 , ¡Ola Cabron de Miguelito! tous les onglets montent !?

J'ai tout essayé je crois: j'ai tenté des trucs aberrants dans les css, des alerts dans tous les sens dans le js...

Je ne vois pas !
¿Porque ?

Voici les 3 contenus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
		<title>Essai</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" href="test.css" type="text/css"/>
		<script type="text/javascript" src="test.js"></script>
	</head>
	<body>
		<div id="en_tete">
			<ul id="onglets">
				<li><a href="a.php?lang=en">a</a></li>
				<li><a href="b.php?lang=en">b</a></li>
				<li class="active"><a href="c.php?lang=en">c</a></li>
				<li><a href="d.php?lang=en">d</a></li>
				<li><a href="e.php?lang=en">e</a></li>
				<li><a href="f.php?lang=en">f</a></li>
				<li><a href="g.php?lang=en">g</a></li>
			</ul>
		</div>
		<div id="section_centrale">

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

html
{	background-color:#1a1a1a;}
body
{	font-size: 12px;
	background-color: transparent;
	width: 1000px;
	margin: auto;
	margin-top: 20px;
	color: #cccccc;
	font-family: verdana,Arial,Verdana,sans-serif;
	font-weight: normal;}

#section_centrale
{	position: relative;
	width: 998px;
	height: 739px;
	border-bottom: 1px solid #aaaaaa;
	border-left: 1px solid #888888;
	border-right: 1px solid #888888;
	border-top: 1px solid #bbbbbb;
	padding-top: 15px;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	background-color: #000000;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	-moz-box-shadow: 2px 3px 30px black;
	-webkit-box-shadow: 2px 3px 30px black;
	box-shadow: 2px 3px 30px black;
	z-index:1;}

/*************** Onglets ************************/
#en_tete
{	background-color: transparent;
	width: 100%;
	padding-bottom: 25px;
	height:0px;
	margin:5px solid green;}

#onglets
{	width: 700px;
	position: absolute;
	padding: 0;
	font: bold 11px arial, serif;
	list-style-type : none;
	left: 50%;
	margin-left: -200px;
	margin-top: 0px;
	margin-bottom: 0px;
	border: 0px solid transparent;
	z-index:20;
	height:28px;}
#onglets li
{	float: left;
	width: 75px;
	height : 21px;
	background-image: url("ressources/fond_onglets.png");
	margin : 3px 5px 2px 5px;
	border : 1px solid #bbbbbb;
	border-bottom : 1px solid transparent;
	background-color: black;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	-moz-box-shadow: 1px 0px 15px black;
	-webkit-box-shadow: 1px 0px 15px black;
	box-shadow: 1px 0px 15px black;}
#onglets li.wide
{	width:98px;
	background-image: url("ressources/fond_onglets_wide.png");}
#onglets li.active
{	border-bottom: 1px solid black;
	background-image: url("ressources/fond_onglet_actif.gif");
	background-repeat: no-repeat;
	height: 21px;
	margin-top: 3px;}
#onglets li.active.wide
{	background-image: url("ressources/fond_onglet_actif_wide.gif");}
#onglets a
{	display : block;
	color : #888888;
	text-decoration : none;
	padding-left : 12px;
	padding-right : 12px;
	padding-top: 4px;
	padding-bottom: 3px;}
#onglets li.active a
{	color: #cccccc;
	text-shadow: 0px 0px 5px #cccccc;}
#onglets a:hover, #onglets a:focus
{	background-image: url("ressources/fond_onglet_hover.gif");
	background-repeat: repeat;
	color: #eeeeee;
	text-shadow: 0px 0px 5px #eeeeee;}
#onglets li.wide a:hover, #onglets li.wide a:focus
{	background-image: url("ressources/fond_onglet_hover_wide.gif");}
/***********************************************************************/

//Section Tabs Up/////////////////////////////////////////////////////////////////////////////
var steps = new Array (13,12,10,7,4,2,1); //(Chacun des increments, en pixels)
var stpNb = steps.length;

var ongletsLiMarginTop=3;   		//la margin-top de depart
var ongletsLiHeight=21;				//la height de départ

function lancement_up(){			//la fonction qui lance la montée de l'onglet actif
	var onglets = document.getElementsByTagName('li');      //on liste tous les "li"
	for (var i=0; i<onglets.length; i++){					//Si il y en a un qui a la classe "active", on lui atribue l'id 'ongletActif'
		if((onglets[i].className).search(/active/)!=-1){
			onglets[i].id='ongletActif';
			(function(arg){moveUp(arg);})(onglets[i]);		//Sur ce meme onglet actif, et sur lui seul, on lance la fonction qui va le monter par incréments
		}
	}
}

function moveUp(elt){                   //Voila ladite fonction
	if (stpNb>0){					//Tant qu'on a pas fait le tour de tous les incréments,
//alert(elt.id+"\n"+stpNb+"\n"+steps[stpNb-1]);
			elt.style.marginTop=(ongletsLiMarginTop-steps[stpNb-1])+'px';  //on diminue la margin-top
			elt.style.height=(ongletsLiHeight+steps[stpNb-1])+'px';			//et on augmente la height
			stpNb-=1;													
			setTimeout(function(){moveUp(elt);},40);						//et on recommence avec le step d'apres...
	}
}
//Section Tabs Up/////////////////////////////////////////////////////////////////////////////


//Section Lancement Onload////////////////////////////////////////////////////////////////////////////////////////////////////
function addEvent(obj, event, fct) {
	if (obj.attachEvent) //Est-ce IE ?
		obj.attachEvent("on" + event, fct); //Ne pas oublier le "on"
	else
		obj.addEventListener(event, fct, true);
}

function lancer(fct) {
    addEvent(window, "load", fct);
}

lancer(lancement_up);

[mode mélodrame]
C'est dans un élan de desespoir profond matiné de résignation que je m'adresse à vous, chers zéros, dans le but d'obtenir, pourquoi pas?, un peu d'aide ou même l'esquisse d'une solution afin de m'aider à retrouver le sommeil ces prochains jours...
A vot' bon cœur !
[mode mélodrame OFF]

Golmote

13 décembre 2010 à 20:31:48

Ton problème est très étrange...

Le plus rigolo étant que si tu appliques le style margin:3px 5px 2px aux <li> une fois l'animation terminée, ils reviennent gentiment à leur place...
Et pourtant leur margin n'avait pas bougé d'un iota durant l'animation. C'est à s'arracher les cheveux !

Enfin bref, ceci n'étant pas une solution propre, je te conseille autre chose.

Mets l'onglet actif en position:relative et modifie le "top" plutôt que le "marginTop".

function lancement_up() { //la fonction qui lance la montée de l'onglet actif
    var onglets = document.getElementsByTagName('li'); //on liste tous les "li"
    for (var i = 0; i < onglets.length; i++) { //Si il y en a un qui a la classe "active", on lui atribue l'id 'ongletActif'
        if ((onglets[i].className).search(/active/) != -1) {
            onglets[i].id = 'ongletActif';
            onglets[i].style.position = 'relative';
            moveUp(onglets[i]); //Sur ce meme onglet actif, et sur lui seul, on lance la fonction qui va le monter par incréments
        }
    }
}

function moveUp(elt) { //Voila ladite fonction
    if (stpNb > 0) { //Tant qu'on a pas fait le tour de tous les incréments,
        //alert(elt.id+"\n"+stpNb+"\n"+steps[stpNb-1]);
        elt.style.top = -steps[stpNb - 1] + 'px'; //on diminue la margin-top
        elt.style.height = (ongletsLiHeight + steps[stpNb - 1]) + 'px'; //et on augmente la height
        stpNb -= 1;
        setTimeout(function () {
            moveUp(elt);
        }, 40); //et on recommence avec le step d'apres...
    }
}

Gwenouille

13 décembre 2010 à 21:31:22

Interessant !
J'aurais jamais pensé à ça… Joli contournement !
Cela dit, le fait que tu utilise "top" plutot que margin-top montre bien qu'il y a un soucis avec margin-top sous IE8
Mais diantre, vraiment je ne vois pas…

Autre chose de bizarre: IE 9 est censé être archi rapide en js, non ?
Mais cette tâche justement le met a genou !
C'est lent et saccadé…

Pour résumer: Merci Golmote: je vais passer à autre chose grâce à toi, mais ça me laisse qd même un goût bizarre de ne pas avoir réussi avec margin-top...
C'est dingue !

Golmote

13 décembre 2010 à 21:40:52

Pour IE9, j'en sais rien, je l'ai pas...

Au fait, j'ai enlevé la closure que tu utilisais dans la boucle, puisqu'elle ne servait à rien

. Vu que tu passes l'élément en paramètre d'une fonction, sa valeur est copiée dans le paramètre et donc sauvegardée.

Pense à mettre ton sujet en résolu, s'il l'est, à l'aide du bouton approprié

EDIT : Personnellement, j'ai souvent remarqué que les positionnements relatifs et absolus posaient souvent bien moins de problèmes de compatibilités que les margins...

Gwenouille

13 décembre 2010 à 21:45:49

Pour la closure: certes, elle est inutile, mais j'ai tellement de mal à cerner quand c'est utile, à quoi ça sert etc, que j'essaie, juste pour voir...
En plus, ça me permet de me remémorer la syntaxe.

Je te conseille d'essayer la Beta de IE9.
C'est assez bien foutu je trouve: on peut utiliser le rendu de IE7, IE8 et meme le Quirk mode.
Il y a une sorte de Firebug à la Microsoft.

Cela dit, comme je viens de IE6 (pas connu 7 ni 8), je trouve la marche qualitative assez dingue !

Je vais mettre le sujet en résolu, mais j'ai qd meme un arriere gout amer...

Je vais essayer de comprendre pourquoi IE9 rame avec mon code...

Golmote

13 décembre 2010 à 21:54:51

Je peux pas installer IE9. Déjà essayé, ça plante avec mon vieux Windows... :-°

M'enfin c'est pas grave, j'aime bien IE7.

Gwenouille

13 décembre 2010 à 22:19:31

Dommage...

Pour la lenteur de IE9, en tous cas dans mon cas, je sais: c'est box-shadow. Sans lui, c'est tres nettement mieux !