Salut.
J'ai un problème assez frustrant. Pour une fois que j'utilise des liens tout à fait normaux dans une liste, IE refuse tout simplement de les activer ou de réagir au survol.
Quand je dis normaux, je veux dire qu'ils sont en "display: inline". Avec juste un changement de couleur au survol. Point barre.
Voilà le code html :
et la feuille de style (allégée) :
et enfin la feuille de style pour IE :
Dans cette dernière feuille de style, j'ai corrigé la hauteur de ma page & un décalage dû au "three pixels jog" (bug d'IE). Le "position: relative" sur les liens est là parce que j'ai lu quelque part que l'utilisation de filter:... pouvait rendre les liens inopérants, mais qu'on pouvait y remédier en leur appliquant cette propriété ...
Je sèche un peu là
Quelqu'un voit ce qui cloche ?
Edit Miracle, je me suis rappelé de mon mot de passe
et j'ai pu mettre la page en ligne
Modifié par Sopo (16 Aug 2006 - 16:46)
J'ai un problème assez frustrant. Pour une fois que j'utilise des liens tout à fait normaux dans une liste, IE refuse tout simplement de les activer ou de réagir au survol.
Quand je dis normaux, je veux dire qu'ils sont en "display: inline". Avec juste un changement de couleur au survol. Point barre.
Voilà le code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
<head>
<title>Sopo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/style-ie.css" media="screen" /><![endif]-->
</head>
<body>
<div id="global">
<div id="header">
<p id="evitement"><a href="#contenu" title="accès direct au contenu de la page">contenu</a>, <a href="#menu" title="accès direct au menu de navigation principal">navigation</a></p>
<h1 id="title"><a href="<? pxInfo('url'); ?>" title="Sopo's playground"><img src="logo.jpg" alt="Sopo's playground" /></a></h1>
</div>
<div id="sidebar">
<h3>Navigation</h3>
<a name="menu"></a>
<ul>
<li><a href="#" title="retour en page d'accueil">Accueil</a></li>
<li><a href="#" title="retour en page d'accueil">Accueil</a></li>
<li><a href="#" title="retour en page d'accueil">Accueil</a></li>
</ul>
</div>
<div id="filAriane">
Fil d'Ariane
</div>
<div id="main">
<h2>Bienvenue</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nec dolor. Phasellus vulputate pede eget nunc. Maecenas et sem. Quisque suscipit nisi et ipsum. Vivamus consequat leo eu est. Fusce sit amet magna nec odio tincidunt commodo. Praesent lorem. Aliquam tincidunt, ligula sit amet ultrices vehicula, tellus nulla gravida lacus, et consectetuer odio dui id ligula. Nullam vitae ipsum. Duis tincidunt, odio id molestie vehicula, tellus magna scelerisque leo, a placerat quam odio commodo odio.
</p>
</div>
<div id="footer">
Pied de page
</div>
</div>
</body>
</html>et la feuille de style (allégée) :
html, body {
height: 100%;
margin: 0;
padding: 0;
}
html {
background: url(maquette_01.png);
}
body {
font: 90% "Trebuchet MS", Helvetica, sans-serif;
}
a img {
border: 0;
}
#global {
position: relative;
min-height: 100%;
width: 770px;
padding: 0 10px;
margin: 0 auto;
background: url(maquette_04.png) repeat-y;
}
/* Barre latérale avec menu de navigation, liens, etc. */
#sidebar {
float: left;
width: 170px;
padding: 10px;
}
#sidebar h3 {
color: #fff;
font-size: 1.2em;
font-family: Helvetica, sans-serif;
font-variant: small-caps;
text-align: center;
margin: 8px 0;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 5px 0 5px 22px;
background: url(liens.png) no-repeat center left;
border-bottom: 1px solid #666;
}
#sidebar li a {
font: 0.9em "Lucida Sans",sans-serif;
color: #fff;
text-decoration: none;
}
#sidebar a:hover {
color: #f93;
}et enfin la feuille de style pour IE :
#global {
height: 100%;
background: none;
background-repeat: repeat-y;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='css/maquette_04.png');
}
#main {
zoom: 1;
margin-left: 192px;
margin-top: 18px;
}
#sidebar ul li a {
position: relative;
}Dans cette dernière feuille de style, j'ai corrigé la hauteur de ma page & un décalage dû au "three pixels jog" (bug d'IE). Le "position: relative" sur les liens est là parce que j'ai lu quelque part que l'utilisation de filter:... pouvait rendre les liens inopérants, mais qu'on pouvait y remédier en leur appliquant cette propriété ...
Je sèche un peu là
Quelqu'un voit ce qui cloche ?Edit Miracle, je me suis rappelé de mon mot de passe
et j'ai pu mettre la page en ligne Modifié par Sopo (16 Aug 2006 - 16:46)
