Quelques petits problèmes de CSS (ie 6 / 7)

newty -  
 newty -
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 ;)

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)
A voir également:

8 réponses

Réponse 1 / 8
newty
 
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]
<!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>
[/code]
1
Réponse 2 / 8
newty
 
personne pour m'aider ?
0
Réponse 3 / 8
newty
 
:(:(:(
0
Réponse 4 / 8
newty
 
Toujours personne pour me filer un coup de main ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
SALUT

pourquoi s emm.....er avec un js pour si peux d effet ???

un simple CSS ne ferais pas l affaire ???

voila un exemple ou j ai mis un css assez complet pour faciliter la customisation !

ensuite tu copie et sauvegarde le petit hack pour IE 6 et inferieur , tu le suvegarde avec l extention .htc il est relie a la page par ce lien dans la CSS
body {
behavior: url("csshover2.htc");
} 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>RAD ZONE Webcreation     
    </title>    
    <meta name="author" content="http://radservebeer.free.fr" />    
    <meta name="generator" content="PSPad editor, www.pspad.com" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
	behavior: url("csshover2.htc");
}
.rad_menu{ 400px;
	float: left;
	padding: 0;
	margin: 0;
	color: #0F57FF;
	background: #9FBCFF;
	border: solid 1px #cfdeff;
	clear: both;
}

.rad_menu  a, .rad_menu a:visited {width: 120px;
	font-family: Georgia, Times New Roman, serif;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	color: #0F57FF;
	background-color: #9FBCFF;
	text-decoration: none;
}
.rad_menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.rad_menu ul li {
	float: left;
	position: relative;
	z-index: auto !important;
	z-index: 1000;
	border-right: solid 1px #cfdeff;
	border-left: solid 1px #cfdeff;
}
.rad_menu ul li a {
	color: #0F57FF;
	background: #9FBCFF;
	float: none !important;
	float: left;
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0 10px 0 10px;
	text-decoration: none;
}
.rad_menu ul li ul {
	display: none;
	border: none;
	color: #0F57FF;
	background: #9FBCFF;
	width: 1px
}
.rad_menu ul li:hover a {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

.rad_menu ul li:hover ul {
	display: block;
	position: absolute;
	z-index: 999;
	top: 29px;
	margin-top: 1px;
	left: 0;
}
.rad_menu ul li:hover ul li a {
	display: block;
	width: 120px
	height: auto;
	line-height: 1.3em;
	margin-left: -1px;
	padding: 5px 10px 5px 10px;
	border-left: solid 1px #cfdeff;
	border-bottom: solid 1px #cfdeff;
	background-color: #9FBCFF;
	color: #0F57FF;
}

.rad_menu ul li:hover ul li a:hover {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

.rad_menu ul li a:hover {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

.rad_menu ul li a:hover ul {
	display: block;
	width: 9em;
	position: absolute;
	z-index: 999;
	top: 29px;
	left: 0;
}
.rad_menu ul li ul li a:visited {
	background-color: #9FBCFF;
	color: #0F57FF;
}

.rad_menu ul li a:hover ul li a {
	display: block;
	width: 9em;
	height: 1px;
	line-height: 1.3em;
	padding: 4px 16px 4px 16px;
	border-left: solid 1px #cfdeff;
	border-bottom: solid 1px #cfdeff;
	background-color: #9FBCFF;
	color: #0F57FF;
}
.rad_menu ul li a:hover ul li a:hover {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

</style>
  </head>
  <body>
    <div class="rad_menu "> 
      <ul><li>
        <a href="/">Home</a>
        <ul><li>
          <a href="#"  > sub-menu 1</a></li><li>
          <a href="#"  > sub-menu 2</a></li>
        </ul></li>
      </ul>
      <ul><li>
        <a href="#">BBB</a>
        <ul><li>
          <a href="#"  > sub-menu 3</a></li><li>
          <a href="#"  > sub-menu 4</a></li>
        </ul></li>
      </ul>
      <ul><li>
        <a href="#">CCC</a>
        <ul><li>
          <a href="#"  >sub-menu 5</a></li><li>
          <a href="#"  > sub-menu 6</a></li>
        </ul></li>
      </ul>
    </div>
  </body>
  </html>


HACK IE 6 tu sauvegarde sous le nom "csshover2.htc" tu l upload avec ta page 

<attach event="ondocumentready" handler="parseStylesheets" />
<script>
/**
 *	Whatever:hover - V2.02.060206 - hover, active & focus
 *	------------------------------------------------------------
 *	(c) 2005 - Peter Nederlof
 *	Peterned - https://peterned.home.xs4all.nl/
 *	License  - http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	Credits and thanks to:
 *	Arnoud Berendsen, Martin Reurings, Robert Hanson
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	------------------------------------------------------------
 */

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)(#.[^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'},
	onunknown:{on:'onfocus', off:'onblur'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;
		
		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
		var affected = select.replace(/:(hover|active|unknown).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
</script>


RAD
0
Réponse 6 / 8
newty
 
merci rad zone pour ta réponse. J'ai donc fait ce que tu m'as dit et ça fonctionne très bien pour IE 6 & 7.

Par contre sous chrome, firefox et safari, les sections Home, BBB et CCC ne sont pas horizontales.
0
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
OUI je viens de voir ca ??

bon je vais t en preparer un :-))

je te donne ca demain en fin de journee !

RAD
0
Réponse 7 / 8
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
VOILA DEJA LE MENU AVEC LE CSS CORRIGE !!

IL PASSE SUR FFX ET OPERA AUSSI MAINTENANT ,-))

N oublie pas le hack IE !csshover2.htc 

<!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">
<head>
<title>RAD ZONE Webcreation</title>
<meta name="author" content="http://radservebeer.free.fr" />
<meta name="generator" content="PSPad editor, www.pspad.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }

.menu {
	float:left;
	padding: 0;
	margin: 0;
	color: #0F57FF;
	background: #9FBCFF;
	border: solid 1px #cfdeff;
	width:400px; 
	clear:both; } 
.rad_menu  a, .rad_menu a:visited {width: 120px;
	font-family: Georgia, Times New Roman, serif;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	color: #0F57FF;
	background-color: #9FBCFF;
	text-decoration: none;
}
.rad_menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.rad_menu ul li {
	float: left;
	position: relative;
	z-index: auto !important;
	z-index: 1000;
	border-right: solid 1px #cfdeff;
	border-left: solid 1px #cfdeff;
}
.rad_menu ul li a {
	color: #0F57FF;
	background: #9FBCFF;
	float: none !important;
	float: left;
	display: block;
	height: 30px;
	line-height: 30px;
	padding: 0 10px 0 10px;
	text-decoration: none;
}
.rad_menu ul li ul {
	display: none;
	border: none;
	color: #0F57FF;
	background: #9FBCFF;
	width: 1px
}
.rad_menu ul li:hover a {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

.rad_menu ul li:hover ul {
	display: block;
	position: absolute;
	z-index: 999;
	top: 29px;
	margin-top: 1px;
	left: 0;
}
.rad_menu ul li:hover ul li a {
	display: block;
	width: 120px
	height: auto;
	line-height: 1.3em;
	margin-left: -1px;
	padding: 5px 10px 5px 10px;
	border-left: solid 1px #cfdeff;
	border-bottom: solid 1px #cfdeff;
	background-color: #9FBCFF;
	color: #0F57FF;
}

.rad_menu ul li:hover ul li a:hover {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

.rad_menu ul li a:hover {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

.rad_menu ul li a:hover ul {
	display: block;
	width: 9em;
	position: absolute;
	z-index: 999;
	top: 29px;
	left: 0;
}
.rad_menu ul li ul li a:visited {
	background-color: #9FBCFF;
	color: #0F57FF;
}

.rad_menu ul li a:hover ul li a {
	display: block;
	width: 9em;
	height: 1px;
	line-height: 1.3em;
	padding: 4px 16px 4px 16px;
	border-left: solid 1px #cfdeff;
	border-bottom: solid 1px #cfdeff;
	background-color: #9FBCFF;
	color: #0F57FF;
}
.rad_menu ul li a:hover ul li a:hover {
	background-color: #cfdeff;
	text-decoration: none;
	color: #0F57FF;
}

</style>
  </head>
  <body>
    <div class="rad_menu "> 
      <ul><li>
        <a href="/">Home</a>
        <ul><li>
          <a href="#"  > sub-menu 1</a></li><li>
          <a href="#"  > sub-menu 2</a></li>
        </ul></li>
      </ul>
      <ul><li>
        <a href="#">BBB</a>
        <ul><li>
          <a href="#"  > sub-menu 3</a></li><li>
          <a href="#"  > sub-menu 4</a></li>
        </ul></li>
      </ul>
      <ul><li>
        <a href="#">CCC</a>
        <ul><li>
          <a href="#"  >sub-menu 5</a></li><li>
          <a href="#"  > sub-menu 6</a></li>
        </ul></li>
      </ul>
    </div>
  </body>
  </html>




RAD
0
Réponse 8 / 8
newty
 
merci RAD :)
0
newty
 
Sinon, au fait, poour les autres problèmes, t as des solutions ?
0

Discussions similaires

Voxbone ? qui est-ce ?
fanfan54 -
ntrece13 -

159 réponses
Belote à 6 joueurs
Bererom -
Raymond PENTIER -

10 réponses
Règle du jeu
Anonyme -
georges97 -

1 réponse
grille de points pour belote
portos54 -
antoine.let -

7 réponses