Problème a:hover avec IE

Le
Pascal
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">
<!--
a {
text-decoration:none;
}
a:hover {
text-decoration:none;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FF0000;
}
-->
</style>
</head>

<body>
<a href=#> monlien</a>
</body>
</html>
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #1132861
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 ?

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">
<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 : <!-- et -->

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

<style type="text/css">
<!--
a {
text-decoration:none;
}
a:hover {
text-decoration:none;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #FF0000;
}
-->
</style>
</head>

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



SAM
Le #1171676
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
Le #1173217

(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 :

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
Le #1173716
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 :


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
Le #1183176
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 :



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


Publicité
Poster une réponse
Anonyme