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

Question

newty

28 Nov 2008 à 12:18

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

Le site
La feuille de style

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

fvsch

28 Nov 2008 à 13:19

Bonjour,

Le menu déroulant est réalisé à l'aide du sélecteur d'enfant (>) et de la pseudo-classe :hover sur un élément LI. Deux choses qu'IE6 ne comprend pas. Donc il ne sera tout simplement pas compatible avec IE6.

Les menus déroulants sont assez complexes à réaliser, car en plus de maitriser un minimum le positionnement CSS il faut gérer les incompatibilités avec les anciens navigateurs (IE6 pour l'essentiel) et améliorer certains points d'ergonomie ou d'accessibilité. Tout cela se fait avec du JavaScript en plus de HTML et CSS. Au final, un menu déroulant réussi est une réalisation professionnelle qui demande les compétences qui vont bien.

Pour les débutants/amateurs/hobbyistes, on ne saurait trop conseiller de se limiter à des menus plus simples (pas déroulants).

Artefacus

28 Nov 2008 à 13:31

Bonjour,

j'ai aussi un petit problème de menu déroulant ........ avec ie, Florent V, es-ce que tu aurais un lien ou deux, avec des menus utilisant le JavaScript ??

Merci

newty

28 Nov 2008 à 14:06

Je suis également prêt à m'y mettre Smiley lol

Un tuto ?

fvsch

28 Nov 2008 à 14:19

Il y a l'inévitable (et simpliste) Suckerfish Dropdown, ou le plus évolué Superfish utilisant jQuery (ou encore Fatfish, toujours avec jQuery).

newty

28 Nov 2008 à 15:12

J'ai trouvé ça : http://users.tpg.com.au/j_birch/plugins/superfish/

Je regarde ça...

newty

30 Nov 2008 à 12:40

Bonjour bonjour,

J'ai essayé d'intégrer le menu js tout a l'heure et ça pose problème sur IE6. Je pense à un problème de width mais je ne trouve pas d'où ça vient.

Le site

Une idée ? Smiley biggrin

newty

2 Dec 2008 à 10:59

up

newty

2 Dec 2008 à 16:25

les nouveaux liens car les anciens sont down :

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

newty

3 Dec 2008 à 15:48

quelqu'un peut il m'aider ? Après plusieurs essais, je n'arrive toujours pas au résultat souhaité...

newty

5 Dec 2008 à 10:12

newty

7 Dec 2008 à 23:58

Toujours personne pour me filer un coup de main ?

newty

8 Dec 2008 à 20:36

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 :


<!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"> &#187;</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"> &#187;</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"> &#187;</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"> &#187;</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"> &#187;</span></a>
						<ul>
							<li>
								<a class="sf-with-ul" href="#">menu item<span class="sf-sub-indicator"> &#187;</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"> &#187;</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"> &#187;</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"> &#187;</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"> &#187;</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>

Sujet clos