Problème a:hover avec IE

SAM

27/02/2008 à 12:44

Bonjour le code ci-dessous est sensé faire apparaitre la bordure basse du
lien
Fonctionne avec FF avec Opéra et Safari pour Windows
Ne fonctionne pas avec IE7 et IE6

J'ai fait un essai avec Jquery idem

Ha oui !
Jquery ... c'est sûr ... pour des CSS ... ça doit bien aider ! ;-)

Quand on enlève le doctype cela fontionne !!!

Comment faire fonctionner sur IE en conservant le doctype?

Coder en relation avec le doctype ?

Que disent les 3 chiottes ?
<http://validator.w3.org/#validate_by_input+with_options>

Verdict : "This page is not Valid XHTML 1.0 Transitional!"
Line 24, Column 8: XML Parsing Error: AttValue: " or ' expected.

<a href=#> monlien</a>
à changer en :
<a href="#"> monlien</a>

Merci

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style type="text/css">
<!--

esayer en virant : 

<style type="text/css">

a {
text-decoration:none;
}
a:hover {
border: 3px solid #FF0000;
border-width: 0 0 3px 0;
}

</style>

beuk beurk beurk
ça doit sautiller au survol, non ?

Voir aussi (en plus) : passer en HTML4.01

<!DOCTYPE HTML PUBLIC "-//W3C//Dspan HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dspan">
<html>

ou :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

--
sm

Pascal

29/02/2008 à 14:46

Merci mai je n'y suis pas arrivé avec uniquement des CSS mais par contre
avec Jquery j'ai trouvé mon bonheur
http://gmarwaha.com/blog/?p=7 (rubrique Bonus)

"Pascal" a écrit dans le message de news:
47c52fea$0$26563$

Bonjour le code ci-dessous est sensé faire apparaitre la bordure basse du
lien
Fonctionne avec FF avec Opéra et Safari pour Windows
Ne fonctionne pas avec IE7 et IE6

J'ai fait un essai avec Jquery idem

Quand on enlève le doctype cela fontionne !!!

Comment faire fonctionner sur IE en conservant le doctype?

Merci

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>

<style type="text/css">

</style>
</head>

<body>
<a href=#> monlien</a>
</body>
</html>

SAM

01/03/2008 à 02:17

Merci mai je n'y suis pas arrivé avec uniquement des CSS mais par contre
avec Jquery j'ai trouvé mon bonheur
http://gmarwaha.com/blog/?p=7 (rubrique Bonus)

Pour faire ça je n'ai besoin d'aucun JS
(si on se passe de l'effet de rebond)

Peux-tu me dire ce que donne ceci dans IE :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
#menu {
position: relative;
height: 26px; width: 550px;
padding: 8px 15px; margin: 10px 0;
border: 1px solid;
}
/* Force the list to flow horizontally */
#menu li {
float: left;
list-style: none;
margin: auto 10px;
}
/* reglages de l'item de menu */
#menu li a {
display: block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: black; letter-spacing: 1px;
text-align: center;
padding: 0 10px;
height: 30px;
}

/* Represents the UNDERLINE of the menu-item. */
#menu li a span {
position: absolute;
background: blue;
width: 100%; height: 5px; top: 18px; left: 0;
display: none;
}
#menu li a:hover span {
display: block;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#"><span></span>Home</a></li>
<li><a href="#"><span></span>Plant a tree</a></li>
<li><a href="#"><span></span>Travel</a></li>
<li><a href="#"><span></span>Ride an elephant</a></li>
</ul>
</body>
</html>

On pourra supprimer les affreux span des liens et utiliser quand même un
*tout petit* JS :

<script type="text/javascript">
function hop(quoi) {
var larg = quoi.offsetWidth;
quoi = quoi.getElementsByTagName('SPAN')[0];
elargir(quoi, larg, 10);
}
function elargir(quoi, larg, dim) {
if(dim<larg) {
dim += Math.round(larg/100);
quoi.style.width = dim +'px';
setTimeout(function(){elargir(quoi, larg, dim)},10);
}
}
window.onload = function() {
var A = document.getElementById('menu').getElementsByTagName('A');
for(var i=0; i<A.length; i++) {
var S = document.createElement('SPAN');
A[i].insertBefore(S, A[i].firstChild);
A[i].onmouseover = function() { hop(this); };
}
}
</script>

--
sm

Merci mai je n'y suis pas arrivé avec uniquement des CSS mais par contre
avec Jquery j'ai trouvé mon bonheur
http://gmarwaha.com/blog/?p=7 (rubrique Bonus)

Pour faire ça je n'ai besoin d'aucun JS
(si on se passe de l'effet de rebond)

Peux-tu me dire ce que donne ceci dans IE :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
#menu {
position: relative;
height: 26px; width: 550px;
padding: 8px 15px; margin: 10px 0;
border: 1px solid;
}
/* Force the list to flow horizontally */
#menu li {
float: left;
list-style: none;
margin: auto 10px;
}
/* reglages de l'item de menu */
#menu li a {
display: block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: black; letter-spacing: 1px;
text-align: center;
padding: 0 10px;
height: 30px;
}

/* Represents the UNDERLINE of the menu-item. */
#menu li a span {
position: absolute;
background: blue;
width: 100%; height: 5px; top: 18px; left: 0;
display: none;
}
#menu li a:hover span {
display: block;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#"><span></span>Home</a></li>
<li><a href="#"><span></span>Plant a tree</a></li>
<li><a href="#"><span></span>Travel</a></li>
<li><a href="#"><span></span>Ride an elephant</a></li>
</ul>
</body>
</html>

On pourra supprimer les affreux span des liens et utiliser quand même un
*tout petit* JS :

<script type="text/javascript">
function hop(quoi) {
var larg = quoi.offsetWidth;
quoi = quoi.getElementsByTagName('SPAN')[0];
elargir(quoi, larg, 10);
}
function elargir(quoi, larg, dim) {
if(dim<larg) {
dim += Math.round(larg/100);
quoi.style.width = dim +'px';
setTimeout(function(){elargir(quoi, larg, dim)},10);
}
}
window.onload = function() {
var A = document.getElementById('menu').getElementsByTagName('A');
for(var i=0; i<A.length; i++) {
var S = document.createElement('SPAN');
A[i].insertBefore(S, A[i].firstChild);
A[i].onmouseover = function() { hop(this); };
}
}
</script>

--
sm

Vous avez filtré cet utilisateur ! Consultez son message

Merci mai je n'y suis pas arrivé avec uniquement des CSS mais par contre
avec Jquery j'ai trouvé mon bonheur
http://gmarwaha.com/blog/?p=7 (rubrique Bonus)

Pour faire ça je n'ai besoin d'aucun JS
(si on se passe de l'effet de rebond)

Peux-tu me dire ce que donne ceci dans IE :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<style type="text/css">
#menu {
position: relative;
height: 26px; width: 550px;
padding: 8px 15px; margin: 10px 0;
border: 1px solid;
}
/* Force the list to flow horizontally */
#menu li {
float: left;
list-style: none;
margin: auto 10px;
}
/* reglages de l'item de menu */
#menu li a {
display: block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: black; letter-spacing: 1px;
text-align: center;
padding: 0 10px;
height: 30px;
}

/* Represents the UNDERLINE of the menu-item. */
#menu li a span {
position: absolute;
background: blue;
width: 100%; height: 5px; top: 18px; left: 0;
display: none;
}
#menu li a:hover span {
display: block;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#"><span></span>Home</a></li>
<li><a href="#"><span></span>Plant a tree</a></li>
<li><a href="#"><span></span>Travel</a></li>
<li><a href="#"><span></span>Ride an elephant</a></li>
</ul>
</body>
</html>

On pourra supprimer les affreux span des liens et utiliser quand même un
*tout petit* JS :

<script type="text/javascript">
function hop(quoi) {
var larg = quoi.offsetWidth;
quoi = quoi.getElementsByTagName('SPAN')[0];
elargir(quoi, larg, 10);
}
function elargir(quoi, larg, dim) {
if(dim<larg) {
dim += Math.round(larg/100);
quoi.style.width = dim +'px';
setTimeout(function(){elargir(quoi, larg, dim)},10);
}
}
window.onload = function() {
var A = document.getElementById('menu').getElementsByTagName('A');
for(var i=0; i<A.length; i++) {
var S = document.createElement('SPAN');
A[i].insertBefore(S, A[i].firstChild);
A[i].onmouseover = function() { hop(this); };
}
}
</script>

--
sm

SAM

01/03/2008 à 12:42

(snip une page de code)

Quelqu'un peut-il me dire si le code suivant, variante du précédent,
fonctionne chez lui :
- avec IE
- avec Firefox et autres
- avec ET sans javascript activé

à voir direct ici :
<http://cjoint.com/?dbmFtdKd3p>

ou à copier/coller :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<script type="text/javascript">
function hop(quoi) {
var larg = quoi.larg;
quoi.className = 'ovr';
quoi = quoi.over;
elargir(quoi, larg, 10);
}
function elargir(quoi, larg, dim) {
if(dim<larg) {
dim += Math.round(larg/50);
// le style left est facultatif (centrage de l'effet)
quoi.style.left = (larg-dim)/2 +'px';
quoi.style.width = dim +'px';
setTimeout(function(){elargir(quoi, larg, dim)},10);
}
}
function nop(quoi) {
quoi.className = '';
}
window.onload = function() {
var A = document.getElementById('menu').getElementsByTagName('LI');
for(var i=0; i<A.length; i++) {
var L = A[i].getElementsByTagName('A')[0];
L.className = 'menu';
var S = document.createElement('SPAN');
A[i].insertBefore(S, L);
A[i].over = S;
A[i].larg = L.offsetWidth;
A[i].onmouseover = function() { hop(this); };
A[i].onmouseout = function() { nop(this); };
}
}
</script>
<style type="text/css">
#menu {
position: relative;
height: 26px; width: 550px;
padding: 8px 15px; margin: 10px 0;
border: 1px solid;
}
/* Force the list to flow horizontally */
#menu li {
float: left;
position: relative;
list-style: none;
margin: auto 10px;
}
/* reglages de l'item de menu */
#menu li a {
display: block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: black; letter-spacing: 1px;
text-align: center;
padding: 0 10px;
height: 20px;
background: #fff;
border-bottom: 4px solid white;
}
#menu li a:hover { /* fond du bouton et soulignement */
background: #eee;
border-bottom: 4px solid blue;
}

/* following are corrections if javascript */
/* la suite = corrections si javascript */
#menu li a.menu, #menu li a.menu:hover {
background: none;
border-bottom: none;
height: 30px;
}
#menu li span {
position: absolute;
/* ici le background des boutons au survol */
background: #eee;
/* ici le soulignement des boutons au survol */
border-bottom: 4px solid blue;
width: 0; height: 20px; top: 0px; left: 0;
display: none;
}
#menu li.ovr span {
display: block;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>
</body>
</html>

--
sm

Vous avez filtré cet utilisateur ! Consultez son message

(snip une page de code)

Quelqu'un peut-il me dire si le code suivant, variante du précédent,
fonctionne chez lui :
- avec IE
- avec Firefox et autres
- avec ET sans javascript activé

à voir direct ici :
<http://cjoint.com/?dbmFtdKd3p>

ou à copier/coller :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Untitled</title>
<script type="text/javascript">
function hop(quoi) {
var larg = quoi.larg;
quoi.className = 'ovr';
quoi = quoi.over;
elargir(quoi, larg, 10);
}
function elargir(quoi, larg, dim) {
if(dim<larg) {
dim += Math.round(larg/50);
// le style left est facultatif (centrage de l'effet)
quoi.style.left = (larg-dim)/2 +'px';
quoi.style.width = dim +'px';
setTimeout(function(){elargir(quoi, larg, dim)},10);
}
}
function nop(quoi) {
quoi.className = '';
}
window.onload = function() {
var A = document.getElementById('menu').getElementsByTagName('LI');
for(var i=0; i<A.length; i++) {
var L = A[i].getElementsByTagName('A')[0];
L.className = 'menu';
var S = document.createElement('SPAN');
A[i].insertBefore(S, L);
A[i].over = S;
A[i].larg = L.offsetWidth;
A[i].onmouseover = function() { hop(this); };
A[i].onmouseout = function() { nop(this); };
}
}
</script>
<style type="text/css">
#menu {
position: relative;
height: 26px; width: 550px;
padding: 8px 15px; margin: 10px 0;
border: 1px solid;
}
/* Force the list to flow horizontally */
#menu li {
float: left;
position: relative;
list-style: none;
margin: auto 10px;
}
/* reglages de l'item de menu */
#menu li a {
display: block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: black; letter-spacing: 1px;
text-align: center;
padding: 0 10px;
height: 20px;
background: #fff;
border-bottom: 4px solid white;
}
#menu li a:hover { /* fond du bouton et soulignement */
background: #eee;
border-bottom: 4px solid blue;
}

/* following are corrections if javascript */
/* la suite = corrections si javascript */
#menu li a.menu, #menu li a.menu:hover {
background: none;
border-bottom: none;
height: 30px;
}
#menu li span {
position: absolute;
/* ici le background des boutons au survol */
background: #eee;
/* ici le soulignement des boutons au survol */
border-bottom: 4px solid blue;
width: 0; height: 20px; top: 0px; left: 0;
display: none;
}
#menu li.ovr span {
display: block;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Plant a tree</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Ride an elephant</a></li>
</ul>
</body>
</html>

--
sm

YD

01/03/2008 à 16:01

Quelqu'un peut-il me dire si le code suivant, variante du précédent,
fonctionne chez lui :
- avec IE
- avec Firefox et autres
- avec ET sans javascript activé

à voir direct ici :
<http://cjoint.com/?dbmFtdKd3p>

Fonctionne de façon identique dans IE 7, Fx 2.0.0.12, Opera 9.26 et Safari 3.04
avec script (effet de rideau) et sans (simple hover).

--
Y.D.

SAM

01/03/2008 à 16:36

Quelqu'un peut-il me dire si le code suivant, variante du précédent,
fonctionne chez lui :
- avec IE
- avec Firefox et autres
- avec ET sans javascript activé

à voir direct ici :
<http://cjoint.com/?dbmFtdKd3p>

ou remonter le fil pour avoir le code-source
(Cjoint ne gardant pas longtemps les fichiers qui lui sont confiés)

Fonctionne de façon identique dans IE 7, Fx 2.0.0.12, Opera 9.26 et
Safari 3.04 avec script (effet de rideau) et sans (simple hover).

Merci du retour.

Si quelqu'un a une idée de simplification (moins de ) du code, toute
idée ou proposition est la bienvenue.

--
sm

Problème a:hover avec IE

6 réponses

Veuillez sélectionner un problème