problème de positionnement css avec IE7

Version imprimable

31/08/2006, 23h37
rasleboldesid

problème de positionnement css avec IE7

La page que je viens d'écire contient des liens qui ne s'affichent pas correctement (ou qui ne réagissent pas du tout) avec IE7 (je n'ai pas testé avec IE6) alors qu'il n'y a aucun problème sous Opéra ou Firefox. Je les ai positionné avec des feuilles de styles (avec des id spécifiques pour chaque liens décrivant leurs tailles et leurs positions). Je me suis tout d'abord dis qu'il devait y avoir des chevauchements entre zones "actives" que IE7 ne gérait pas (8O ). Mais après vérification ce n'est pas le cas. J'ai pensé avoir ommis des déclarations nécéssaires à cette prise en charge par IE7 (genre padding/margin pour les id ou un truc genre display:block pour les balises <a> etc.), mais là encore, ça n'a rien résolu !!! Je suis vraiment perdu là ! Quelqu'un pourrait-il m'aider ? Merci !!!!!
01/09/2006, 12h19
MasterOfChakhaL

Je pense qu'un petit bout de code serait le bienvenue pour nous permettre de réfléchir...

ok :

Exemple de code css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#conseils {
height: 150px;
width: 65px;
top: 140px;
left: 90px;
padding: 0px 0px 0px 0px;
}
 
#conseils:hover{
height: 187px;
width: 83px;
top: 101px;
left: 69px;
background: url(conseils.gif) no-repeat;
padding: 0px 0px 0px 0px;
 
}

Exemple de code html :

Code:

1
2
3
<ul>
<li><a id="conseils" title="conseils" accesskey="1" href="conseils.html"></a></li>
</ul>

01/09/2006, 14h34
MasterOfChakhaL

bizarre...

les propriétés width et height s'appliquent aux éléments blocs...
un petit display:block; ...

les propriétés top et left s'appliquent aux éléments positionnés...
un petit position:relative; (ou absolute) ...

je vois qu'au survol, tu déplace, tes liens vers le bas...
est-ce que tes liens restent inactifs si tu les survols en arrivant par le bas

et-ce que l'état hover se déclenche?
01/09/2006, 14h46
rasleboldesid
alors voilà ce que j'ai par ailleurs :
Code:

1 2 3 4 a{ position:absolute; display:block; }
et
Code:

1 2 3 4 5 6 7 8 9 ul{ position:relative; list-style:none; padding: 0px; margin: 0px; width:800px; height:600px; background: url(pageprincipale.jpg) no-repeat; }
Sous IE, certains liens sont totalement inactif, d'autres se réduisent quasiment à un simple point !!! Sinon, mais j'interprète peut-être mal ce que tu me dis, j'aurais plutôt dis que mes liens se déplacent vers le haut au survol de la souris (de top:140px; à top:110px; ). L'état hover se déclenche très bien sous opéra et firefox, beaucoup plus difficilement sous IE, voire pas du tout pour certeins...
01/09/2006, 14h49
MasterOfChakhaL
j'essaierais ceci (mais ton histoire me semble bizarre, il doit y avoir des choses qui interfèrent):
Code:

1 2 3 ul { z-index:1; } a { z-index:2; }
tu peux aussi rajouter ca pour localiser un peu tes éléments

Code:

* { border: 1px solid red; }
01/09/2006, 14h52
rasleboldesid

Le mieux c'est que je te colle l'ensemble de mes feuilles, je les enlèverais par la suite si ça fait trop long :

précision : la page qui me pose pb c'est la pageprincipale.html .
le hover doit amener une reproduction agrandi d'une partie de l'image du fond.
01/09/2006, 15h01
MasterOfChakhaL

j'avais pas fait attention, mais a part ton lien "présentations", tous tes liens sont vides

le problème doit venir de là je pense (rajoute des   partout)

si tu as un exemple en ligne, je veux bien regarder...
01/09/2006, 15h10
rasleboldesid

je viens de le mettre en ligne (après test : il fonctionne très bien sous firefox et opéra, mais très mal sous IE).

Le &nbsp du liens "présentations" est rest de test, mais qui n'a rien changé...

le liens : http://tirel.adrien.neuf.fr

Ton truc de localiser les éléments :
* { border: 1px solid red; }

c'est génial ! ça me sera toujours utile, je vais d'ailleurs te mettre cette version en ligne : ça t'aidera peut-e^tre...
En tous cas c super sympa à toi de te pencher un peu sur mon pb !!!!

ça me fait comprendre que ya plein de chose que je comprens pas....
pourquoi toutes ces lignes correspondant à aux balises ul sous IE alors qu'elles n'apparaissent pas sous Opéra ou Firefox ???? Pourquoi j'ai un cadre plus grand pour mes images de fond (qui font 800x600), alors que j'ai défini ce cadre à... 800x600 !!!!
Pas clair tout ça...

accessoirement, je viens de faire le test du W3C qui me signale :

This Page Is Valid XHTML 1.0 Strict!

8O :aie:

mais le plus drôle c'est ça :

you have taken the care to create an interoperable Web page

"interoperable" 8O
01/09/2006, 15h43
MasterOfChakhaL

oui,

j'ai pas trouvé, mais c'est vrai qu'il y a des trucs que je ne comprends pas...
notamment les lignes des li mais aussi, quand tu fais CTRL+A, c'est bizarre la forme de la sélection

(je n'ai qu'IE6 mais le problème semble identique)

Je suppose que tu as remarqué que le problème se situait au niveau des liens qui sont dans la zone de ces fameuses lignes...

Tu remarqueras aussi que si on commence par un endroit ou le lien marche comme il faut et qu'on fait le tour de la fleur, la plupart des fois, ca fonctionne.

Les bodures te permettent également de voir que, quand un pétale est agrandi, tu n'as plus beaucoup de zone "libre" pour activer les voisins (essentiellement pour les pétales en diagonal)

je fais une petite pause et te laisse mariner un peu et je m'y repencherai plus tard.

PS: l'astuce du border m'a également changé la vie (mais attention, pour un positionnement précis au pixel près, ca peut occasionner des décalages... il faut en avoir consience)
01/09/2006, 15h57
rasleboldesid

Citation:

Envoyé par MasterOfChakhaL

oui,

Je suppose que tu as remarqué que le problème se situait au niveau des liens qui sont dans la zone de ces fameuses lignes...

pour la plupart, ça foncionne à peu prêt. Mais plus on est à l'intérieur de cette zone, plus çà merdouille, en effet...

Citation:

Envoyé par MasterOfChakhaL

Tu remarqueras aussi que si on commence par un endroit ou le lien marche comme il faut et qu'on fait le tour de la fleur, la plupart des fois, ca fonctionne

Tout à fait : sauf pour celui qui est vertical tout en haut... Et pourtant, la structure du code le concernant est pareille partout !!!

Citation:

Envoyé par MasterOfChakhaL

Les bodures te permettent également de voir que, quand un pétale est agrandi, tu n'as plus beaucoup de zone "libre" pour activer les voisins (essentiellement pour les pétales en diagonal)

c'est vrai, mais ça tourne bien sous les autres navigateurs...

Citation:

Envoyé par MasterOfChakhaL

je fais une petite pause et te laisse mariner un peu et je m'y repencherai plus tard.

Je marine, pour sûr ;) ;)

Citation:

Envoyé par MasterOfChakhaL

PS: l'astuce du border m'a également changé la vie (mais attention, pour un positionnement précis au pixel près, ca peut occasionner des décalages... il faut en avoir consience)

Bien noté ;) !

PS : J'ai retiré les codes, suite à demande du modérateur... Je les remettrai en pièces jointes si tu en as besoin.
Encore merci à toi :D
01/09/2006, 20h11
rasleboldesid

C'est bon !
J'ai trouvé !
Sur le code dont je m'étais inspiré, il y avait des balises <li> : je les ai viré et ça marche nickel chrome !

Je vais faire une pause dans la construction de ce site, avancer dans ma connaissance du css/xhtml et vérifier si je ne peux pas synthétiser la feuille de style qui me semble bien longue...

Merci de ton aide !