Quelques petits problèmes de CSS principalement pour ie6 et 7

**newty** · 09/12/2008, 01h53

Bonjour,

Je suis en train de réaliser un site pour des amis mais j'ai quelques bugs que j'ai du mal à résoudre n'étant pas un pro en la matière.

Le site passe donc assez bien sous FireFox, Chrome, Opera et Safari. Par contre, ie6 et 7, c'est autre chose... (vivement leur disparition j'ai envie de dire). J'ai résolu pas mal de problèmes mais il m'en reste. J'espère que vous pourrez m'aider.

Problème général :

- background également sur l'accueil (pour le menu). J'avais fait un class="premier" mais ça ne fonctionnait pas.

ie6 :

- Pas de lien sur le logo
- Menu déroulant qui ne fonctionne pas
- Décalage à droite pour conteneurariane il me semble
- Copyright et liens trop haut

ie7 :

- Copyright et liens trop haut

Merci beaucoup pour votre aide. Et n'hésitez pas à demander si vous avez besoin de screens ou autre wink

MAJ : on m'a conseillé d'utiliser Superfish (js) pour le menu mais ça pose problème sur IE6. Je pense à un problème de width mais je ne trouve pas d'où ça vient...

http://adnpc.free.fr/site-jiangxo/ (sans js)
http://adnpc.free.fr/site-jiangxo-menujs/ (avec js)

MAJ 2 :

j'essaie toujours avec le menu superfish. J'ai refait les manips 3 fois mais j'ai toujours la même chose sous IE6 à savoir 3 erreurs :

- Line : 13 | Char : 2 | Error : 'JQuery' is undefined
- Line : 17 | Char : 2 | Error : 'JQuery' is undefined
- Line : 14 | Char : 5 | Error : Object expected

Du coup, pas de menu déroulant....

Mon code :

Code html :

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!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="fr" lang="fr">
    <head>
        <title>Titre</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
 
<script type="text/javascript" src="hoverIntent.js"></script> 
<script type="text/javascript" src="superfish.js"></script> 
<script type="text/javascript" src="supersubs.js"></script> 
 
<script type="text/javascript"> 
 
    $(document).ready(function(){ 
        $("ul.sf-menu").supersubs({ 
            minWidth:    12, 
            maxWidth:    27,
            extraWidth:  1
        }).superfish(); 
    }); 
 
</script>
 
 
 
    </head>    
    <body>
<ul id="sample-menu-5" class="sf-menu">
                    <li class="current">
                        <a class="sf-with-ul" href="#a">menu item<span class="sf-sub-indicator"> »</span></a>
                        <ul>
                            <li>
                                <a href="#aa">menu item that is quite long</a>
 
                            </li>
                            <li class="current">
                                <a class="sf-with-ul" href="#ab">menu item<span class="sf-sub-indicator"> »</span></a>
                                <ul>
                                    <li class="current"><a href="#">menu item that is even longer still!</a></li>
                                    <li><a href="#aba">menu item</a></li>
                                    <li><a href="#abb">menu item</a></li>
 
                                    <li><a href="#abc">menu item</a></li>
                                    <li><a href="#abd">menu item</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
                                <ul>
 
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                </ul>
 
                            </li>
                            <li>
                                <a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
                                <ul>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
 
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">menu item</a>
 
                    </li>
                    <li>
                        <a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
                        <ul>
                            <li>
                                <a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
                                <ul>
 
                                    <li><a href="#">short</a></li>
                                    <li><a href="#">short</a></li>
                                    <li><a href="#">short</a></li>
                                    <li><a href="#">short</a></li>
                                    <li><a href="#">short</a></li>
                                </ul>
 
                            </li>
                            <li>
                                <a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
                                <ul>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
 
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
                                <ul>
 
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                </ul>
 
                            </li>
                            <li>
                                <a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
                                <ul>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
 
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                </ul>
                            </li>
                            <li>
                                <a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> »</span></a>
                                <ul>
 
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                    <li><a href="#">menu item</a></li>
                                </ul>
 
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">menu item</a>
                    </li>    
                </ul>
    </body>
</html>

**Bovino** · 09/12/2008, 10h30

Il faut que tu ajoutes le framework jQuery à tes pages pour que cela fonctionne !

**devyan** · 09/12/2008, 10h32

Salut,

Je te conseille de "couper" ton message en 2 parties bien distinctes que tu pourra poster sur les forums correspondants...

Ici uniquement ce qui concerne la présentation

Dans le forum JavaScript la partiequi concerne ta dynamique de menu

**newty** · 09/12/2008, 11h22

Envoyé par Bovino

Il faut que tu ajoutes le framework jQuery à tes pages pour que cela fonctionne !

T'es sûr ? dans les exemples superfish, ce n'est pas précisé (http://users.tpg.com.au/j_birch/plug...fish/#examples)

J'ai tout de meme ajouté le fichier jquery-1.2.6.min.js à la racine mais ça me met les mêmes erreurs

**Bovino** · 09/12/2008, 11h45

Envoyé par newty

T'es sûr ? dans les exemples superfish, ce n'est pas précisé (http://users.tpg.com.au/j_birch/plug...fish/#examples)

Ah... et ça, c'est quoi ?

Envoyé par En tête de ton lien

Superfish v1.4.8 – jQuery menu plugin by Joel Birch

Plus le gros logo jQuery à droite...

J'ai tout de meme ajouté le fichier jquery-1.2.6.min.js à la racine mais ça me met les mêmes erreurs

Tu as rajouté le lien dans ta page ?

Code :

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

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

**newty** · 09/12/2008, 11h57

Oui je l'ai bien ajouté :

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
 
<head>
		<title>Jiangxo, le cheval lusitanien</title>
 
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
 
<script type="text/javascript" src="jquery.hoverIntent.js"></script> 
<script type="text/javascript" src="superfish.js"></script> 
<script type="text/javascript" src="supersubs.js"></script>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
 
<script type="text/javascript"> 
 
    $(document).ready(function(){ 
        $("ul.sf-menu").supersubs({ 
            minWidth:    12, 
            maxWidth:    27,
            extraWidth:  1
        }).superfish(); 
    }); 
 
</script>
 
 
 
	</head>

**Bovino** · 09/12/2008, 12h14

jQuery doit être placé en premier !

Code :

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

1
2
3
4
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script> 
<script type="text/javascript" src="superfish.js"></script> 
<script type="text/javascript" src="supersubs.js"></script>

Car les autres scripts en dépendent.

**newty** · 09/12/2008, 12h24

je vois je vois

ça marche merci !

**newty** · 09/12/2008, 14h36

ah par contre en l'intégrant vite fait sur le site existant ça ne fonctionne pas pour ie6. ça fonctionne un court instant puis ça déploie les sous menus....

Sous les autres navigateurs (ie7, FF, opera, chrome & safari), ça fonctionne même si j'ai quelques modifications a faire

Le site

**newty** · 12/12/2008, 16h44

:bounce:

**devyan** · 12/12/2008, 16h49

Envoyé par Bovino

jQuery doit être placé en premier !

Code :

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

1
2
3
4
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script> 
<script type="text/javascript" src="superfish.js"></script> 
<script type="text/javascript" src="supersubs.js"></script>

Car les autres scripts en dépendent.

Salut,

+1 Pour avoir rencontré le problème...

JQuery doit effectivement être placé en premier. De plus, les scripts ne doivent être inclus qu'une seule fois

Quelques petits problèmes de CSS principalement pour ie6 et 7

CSS

Discussions similaires

Partager

Partager