Bonjour à tous,
alors voila, j'ai un léger problème avec le site que je suis entrain de faire pour mon employeur.
Je ne suis pas un codeur et affronte donc de multiples problèmes que j'ai jusqu'à présent résolu en bidouillant (oh le gros mots!) ma feuille de style ou mon php.
L'ultime problème que je rencontre est le suivant:
Lorsque je navigue sous safari ou firefox je ne rencontre aucun problème d'affichage.
Mais lorsque je visite mon site sous IE, lors du passage de la souris sur mon menu de gauche, le site entier subit un décalage d'un fraction de seconde puis se remet en place, et cela à chaque passage.
voici le lien: http://cercledemidi.fr
J'utilise un thème wordpress modifié.
Je joins à ce message mon code html:
<!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 profile="http://gmpg.org/xfn/11">
<title>Le Cercle de Midi » Qui sommes nous?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="WordPress 2.3" /> <!-- leave this for stats -->
<style type="text/css" media="screen">
@import url( http://cercledemidi.fr/wp-content/themes/anarchy/style.css );
</style>
<link rel="stylesheet" type="text/css" media="print" href="http://cercledemidi.fr/print.css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://cercledemidi.fr/?feed=rss2" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://cercledemidi.fr/?feed=rss" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://cercledemidi.fr/?feed=atom" />
<link rel="pingback" href="http://cercledemidi.fr/xmlrpc.php" />
<link rel='archives' title='janvier 2008' href='http://cercledemidi.fr/?m=200801' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://cercledemidi.fr/xmlrpc.php?rsd" />
</head>
<div id="header">
<a href='http://www.cercledemidi.fr' target="blank"><img src="http://cercledemidi.fr/wp-content/themes/anarchy/img/header3.jpg"
width='800' height='127' title="Retour acceuil"alt=""/></a>
</div>
</body>
<div id="wrap"><!-- for the whole page -->
<div id="content"></div>
<div id="menu">
<ul>
<li> <li class="page_item page-item-2 current_page_item "><a href="http://cercledemidi.fr" title="Qui sommes nous?">Qui sommes nous?</a></li>
<li class="page_item page-item-3"><a href="http://cercledemidi.fr/?page_id=3" title="Contacts">Contacts</a></li>
<li class="page_item page-item-5"><a href="http://cercledemidi.fr/?page_id=5" title="Région en Scène">Région en Scène</a></li>
<li class="page_item page-item-7"><a href="http://cercledemidi.fr/?page_id=7" title="Adhérents">Adhérents</a></li>
<li class="page_item page-item-9"><a href="http://cercledemidi.fr/?page_id=9" title="Revue de presse">Revue de presse</a></li>
<li class="page_item page-item-10"><a href="http://cercledemidi.fr/?page_id=10" title="Partie réservée">Partie réservée</a></li>
<li class="page_item page-item-13"><a href="http://cercledemidi.fr/?page_id=13" title="Forum">Forum</a></li>
</li>
</ul>
<p class="credit"><!--16 queries. 0.234 seconds. --></p>
</div>
<div class="post">
<h3 class="storytitle" id="post-2"><a href="http://cercledemidi.fr" rel="bookmark" title="Permanent Link: Qui sommes nous?">Qui sommes nous?</a></h3>
<div class="storycontent">
<h1>Les objectifs du Cercle de Midi</h1>
<p align="center"><embed quality="high" bgcolor="#ffffff" height="217" width="255" src="http://cercledemidi.fr/wp-content/themes/anarchy/img/DIAPORAMA.swf" name="DIAPORAMA" style="width: 255px; height: 217px"></embed></p>
<p align="center"> </p>
<p style="margin: 0cm 0cm 0pt" class="MsoNormal">Vous êtes sur le site du CERCLE DE MIDI, Le réseau des programmateurs de spectacles vivants en région Provence Alpes Côte d’Azur.</p>
<p style="margin: 0cm 0cm 0pt" class="MsoNormal">Vous êtes programmateur et souhaitez soutenir la création artistique émergente de la région, en favorisant le repérage et en proposant une programmation lors du festival annuel <a href="http://cercledemidi.fr/?page_id=5">REGION EN SCENES</a>. Vous souhaitez aussi mutualiser vos moyens pour favoriser l’accès aux spectacles vivants en vous rapprochant de structures dont les problématiques sont proches.</p>
<p style="margin: 0cm 0cm 0pt" class="MsoNormal">Vous êtes artistes, compagnies, producteurs, en région, informez nous de votre actualité et appuyez vous sur les <a href="http://cercledemidi.fr/?page_id=7">adhérents</a> proches de votre territoire pour vous faire connaître, et éventuellement participer au festival.</p>
<p style="margin: 0cm 0cm 0pt" class="MsoNormal">Le repérage artistique se fait dès février à avril dans chaque département et le choix du plateau final en mai. Cependant, nous allons voir des spectacles tout au long de l’année, dans les salles ou les festivals y compris pendant l’été.</p>
<p style="margin: 0cm 0cm 0pt" class="MsoNormal">Notre réseau est l’une des 11 fédérations régionales du réseau national <a href="http://www.reseau-chainon.com/">Chaînon / Fédération des Nouveaux Territoires des Arts Vivants</a>, qui compte près de 300 adhérents et qui s’appuie sur un projet politique axé sur l’échange et la mutualisation.</p>
<p align="left"> </p>
</div>
</div>
<div id="footer">
<p class="credit"><!--18 queries. 0.245 seconds. -->
<cite>Conception <a href='http://benoitheymann.fr'>Benoit Heymann</a><br><a href='http://wordpress.org' title='Wordpress'><strong>-W-</strong></a></cite></p>
</div>
</div> <!-- #content -->
</div>
<div style="clear:both;height:1px;"> </div>
</div><!-- #wrap -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-62594-10";
urchinTracker();
</script>
</body>
</html>
</body>
</html>
et voici mon css:
html, body {
margin-left : 0;
height : 100%;
width : 100%;
overflow : auto;
}
h3 {
display : none;
}
body {
border : none;
font-family : arial, verdana;
margin : 0;
padding : 0;
text-align : center;
margin-left : auto;
margin-right : auto;
}
a {
text-decoration : none;
}
a img {
border : 0;
}
a:link {
color : #5a5a5a;
text-decoration : none;
}
a:visited {
color : #5a5a5a;
}
a:hover {
color : #ffcc00;
}
a:active {
color : #ffcc00;
}
acronym, abbr {
margin-bottom : 0;
}
acronym, abbr, span.caps {
cursor : help;
}
blockquote {
border-left : 5px solid #fff;
margin-left : 1.5em;
padding-left : 5px;
}
p, li {
font : 7pt arial, verdana;
}
h2.the-date {
font : 10pt arial, verdana;
color : #333;
font-weight : normal;
margin : 2em 0 0 0;
padding-bottom : 2px;
text-align : right;
}
cite {
font-style : normal;
}
#content {
padding-left : 5px;
float : right;
margin-left : 190px;
padding-right : 25px;
margin-top : 10px;
}
#wrap {
background : url(img/BACKGROUND.gif);
text-align : left;
margin-left : auto;
margin-right : auto;
margin-top : 10px;
min-height : 80%;
width : 800px;
top : 230px;
border : none;
}
#bonus {
display : none;
}
#header {
font : 24pt arial, verdana;
margin-left : auto;
margin-right : auto;
text-align : left;
width : 800px;
height : 127px;
}
#header a {
color : #000;
width : 100%;
height : 100%;
text-decoration : none;
border-bottom : 0;
}
#sidebar {
display : none;
}
#main {
width : 100%;
height : 100px;
background : url(img/body.jpg);
margin-top : 233px;
float : left;
}
#footer {
background : url(img/footer1.jpg);
display : inline;
height : 35px;
width : 100%;
margin-right : auto;
margin-left : auto;
text-align : right;
}
#footer p.credit {
background : url(img/footer1.jpg);
height : 35px;
margin-top : 300px;
text-align : right;
}
.feedback {
color : #ccc;
text-align : right;
clear : both;
font : 11pt arial, verdana;
}
.feedback a {
color : #666;
font-size : 10pt;
}
.feedback a:hover {
color : #f30;
}
.storytitle {
margin : 0;
font : 14pt arial, verdana;
font-weight : bold;
}
.storytitle a, .storytitle a:visited {
text-decoration : none;
font : 14pt arial, verdana;
font-weight : bold;
color : #000;
}
div.post {
padding : 2px;
padding-right : 10px;
margin-left : 160px;
}
div.storycontent, div.feedback, div.storycontent p {
font : 11pt arial, verdana;
background-color : #fff;
padding-left : 10px;
padding-right : 10px;
}
#commentform #name, #commentform #email, #commentform #url {
border : 1px solid #999;
padding : 0.2em;
}
#commentform textarea {
width : 100%;
height : 50%;
font : 11pt arial, verdana;
}
#commentlist li ul {
border-left : 1px solid #999;
font-size : 110%;
list-style-type : none;
}
ol#comments li p {
font-size : 100%;
}
h3 {
color : #f00;
margin-top : 0;
}
h3#comments {
font : 11pt arial, verdana;
font-weight : bold;
}
h3#respond {
font : 11pt arial, verdana;
font-weight : bold;
}
.meta li, ul.post-meta li {
display : inline;
}
.meta ul {
display : inline;
list-style : none;
margin : 0;
padding : 0;
}
.meta, .meta a {
color : #f30;
font-weight : normal;
letter-spacing : 0;
font : 10pt arial, verdana;
}
#menu {
float : left;
list-style-type : none;
top : 0;
left : 0;
width : 130px;
z-index : 1;
padding : 0 0 0 0;
}
#menu h2 {
display : none;
}
#menu ul {
border : 0;
color : white;
list-style-type : none;
font-weight : normal;
text-align : left;
}
#menu ul ul {
font-variant : normal;
font-weight : normal;
line-height : 100%;
list-style-type : none;
margin : 0;
padding : 0;
text-align : left;
}
.page_item {
font : 11pt arial, verdana;
letter-spacing : 0;
margin : 2px 0 5px 0;
padding : 0;
color : #fff;
text-align : left;
}
.page_item a {
display : block;
color : #000;
height : auto;
width : 100%;
border : 0;
padding : 0 5px 3px 5px;
background-color : #fff;
}
.page_item a:hover {
background-color : #fcc311;
color : #fff;
}
#menu ul ul ul.children {
font-size : 11pt;
}
#menu form {
margin : 0;
}
#menu input#s {
width : 116px;
border : 0 solid #333;
color : #000;
font-family : arial, verdana;
padding : 0 2px 2px 2px;
background-color : #5a5a5a;
}
#wp-calendar {
border : none;
empty-cells : show;
font-size : 9pt;
margin : 0;
width : 90%;
}
#wp-calendar #next a {
padding-right : 10px;
text-align : right;
}
#wp-calendar #prev a {
padding-left : 10px;
text-align : left;
}
#wp-calendar a {
display : block;
text-decoration : none;
}
#wp-calendar caption {
color : #ccc;
font-size : 11pt;
font-weight : bold;
text-align : center;
}
#wp-calendar td {
color : #ccc;
font : 9pt arial, verdana;
letter-spacing : normal;
padding : 2px 0;
text-align : left;
}
#wp-calendar #today {
border : 1px solid #333;
color : #fff;
}
#wp-calendar th {
font-style : normal;
text-transform : capitalize;
}
#wp-calendar a {
border-bottom : 0;
}
.credit {
color : #444;
font-size : 9px;
margin : 0 0 0 40px;
clear : both;
}
.credit a:link, .credit a:hover {
color : #000;
}
Voila, ça fait un bien long message..désolé
alors voila, j'ai un léger problème avec le site que je suis entrain de faire pour mon employeur.
Je ne suis pas un codeur et affronte donc de multiples problèmes que j'ai jusqu'à présent résolu en bidouillant (oh le gros mots!) ma feuille de style ou mon php.
L'ultime problème que je rencontre est le suivant:
Lorsque je navigue sous safari ou firefox je ne rencontre aucun problème d'affichage.
Mais lorsque je visite mon site sous IE, lors du passage de la souris sur mon menu de gauche, le site entier subit un décalage d'un fraction de seconde puis se remet en place, et cela à chaque passage.
voici le lien: http://cercledemidi.fr
J'utilise un thème wordpress modifié.
Je joins à ce message mon code html:
<!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 profile="http://gmpg.org/xfn/11">
<title>Le Cercle de Midi » Qui sommes nous?</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="generator" content="WordPress 2.3" /> <!-- leave this for stats -->
<style type="text/css" media="screen">
@import url( http://cercledemidi.fr/wp-content/themes/anarchy/style.css );
</style>
<link rel="stylesheet" type="text/css" media="print" href="http://cercledemidi.fr/print.css" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://cercledemidi.fr/?feed=rss2" />
<link rel="alternate" type="text/xml" title="RSS .92" href="http://cercledemidi.fr/?feed=rss" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://cercledemidi.fr/?feed=atom" />
<link rel="pingback" href="http://cercledemidi.fr/xmlrpc.php" />
<link rel='archives' title='janvier 2008' href='http://cercledemidi.fr/?m=200801' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://cercledemidi.fr/xmlrpc.php?rsd" />
</head>
<div id="header">
<a href='http://www.cercledemidi.fr' target="blank"><img src="http://cercledemidi.fr/wp-content/themes/anarchy/img/header3.jpg"
width='800' height='127' title="Retour acceuil"alt=""/></a>
</div>
</body>
<div id="wrap"><!-- for the whole page -->
<div id="content"></div>
<div id="menu">
<ul>
<li> <li class="page_item page-item-2 current_page_item "><a href="http://cercledemidi.fr" title="Qui sommes nous?">Qui sommes nous?</a></li>
<li class="page_item page-item-3"><a href="http://cercledemidi.fr/?page_id=3" title="Contacts">Contacts</a></li>
<li class="page_item page-item-5"><a href="http://cercledemidi.fr/?page_id=5" title="Région en Scène">Région en Scène</a></li>
<li class="page_item page-item-7"><a href="http://cercledemidi.fr/?page_id=7" title="Adhérents">Adhérents</a></li>
<li class="page_item page-item-9"><a href="http://cercledemidi.fr/?page_id=9" title="Revue de presse">Revue de presse</a></li>
<li class="page_item page-item-10"><a href="http://cercledemidi.fr/?page_id=10" title="Partie réservée">Partie réservée</a></li>
<li class="page_item page-item-13"><a href="http://cercledemidi.fr/?page_id=13" title="Forum">Forum</a></li>
</li>
</ul>
<p class="credit"><!--16 queries. 0.234 seconds. --></p>
</div>
<div class="post">
<h3 class="storytitle" id="post-2"><a href="http://cercledemidi.fr" rel="bookmark" title="Permanent Link: Qui sommes nous?">Qui sommes nous?</a></h3>
<div class="storycontent">
<h1>Les objectifs du Cercle de Midi</h1>
<p align="center"><embed quality="high" bgcolor="#ffffff" height="217" width="255" src="http://cercledemidi.fr/wp-content/themes/anarchy/img/DIAPORAMA.swf" name="DIAPORAMA" style="width: 255px; height: 217px"></embed></p>
<p align="center"> </p>
<p style="margin: 0cm 0cm 0pt" class="MsoNormal">Vous êtes sur le site du CERCLE DE MIDI, Le réseau des programmateurs de spectacles vivants en région Provence Alpes Côte d’Azur.</p>
<p style="margin: 0cm 0cm 0pt" class="MsoNormal">Vous êtes programmateur et souhaitez soutenir la création artistique émergente de la région, en favorisant le repérage et en proposant une programmation lors du festival annuel <a href="http://cercledemidi.fr/?page_id=5">REGION EN SCENES</a>. Vous souhaitez aussi mutualiser vos moyens pour favoriser l’accès aux spectacles vivants en vous rapprochant de structures dont les problématiques sont proches.</p>
<p style="margin: 0cm 0cm 0pt" class="MsoNormal">Vous êtes artistes, compagnies, producteurs, en région, informez nous de votre actualité et appuyez vous sur les <a href="http://cercledemidi.fr/?page_id=7">adhérents</a> proches de votre territoire pour vous faire connaître, et éventuellement participer au festival.</p>
<p style="margin: 0cm 0cm 0pt" class="MsoNormal">Le repérage artistique se fait dès février à avril dans chaque département et le choix du plateau final en mai. Cependant, nous allons voir des spectacles tout au long de l’année, dans les salles ou les festivals y compris pendant l’été.</p>
<p style="margin: 0cm 0cm 0pt" class="MsoNormal">Notre réseau est l’une des 11 fédérations régionales du réseau national <a href="http://www.reseau-chainon.com/">Chaînon / Fédération des Nouveaux Territoires des Arts Vivants</a>, qui compte près de 300 adhérents et qui s’appuie sur un projet politique axé sur l’échange et la mutualisation.</p>
<p align="left"> </p>
</div>
</div>
<div id="footer">
<p class="credit"><!--18 queries. 0.245 seconds. -->
<cite>Conception <a href='http://benoitheymann.fr'>Benoit Heymann</a><br><a href='http://wordpress.org' title='Wordpress'><strong>-W-</strong></a></cite></p>
</div>
</div> <!-- #content -->
</div>
<div style="clear:both;height:1px;"> </div>
</div><!-- #wrap -->
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-62594-10";
urchinTracker();
</script>
</body>
</html>
</body>
</html>
et voici mon css:
html, body {
margin-left : 0;
height : 100%;
width : 100%;
overflow : auto;
}
h3 {
display : none;
}
body {
border : none;
font-family : arial, verdana;
margin : 0;
padding : 0;
text-align : center;
margin-left : auto;
margin-right : auto;
}
a {
text-decoration : none;
}
a img {
border : 0;
}
a:link {
color : #5a5a5a;
text-decoration : none;
}
a:visited {
color : #5a5a5a;
}
a:hover {
color : #ffcc00;
}
a:active {
color : #ffcc00;
}
acronym, abbr {
margin-bottom : 0;
}
acronym, abbr, span.caps {
cursor : help;
}
blockquote {
border-left : 5px solid #fff;
margin-left : 1.5em;
padding-left : 5px;
}
p, li {
font : 7pt arial, verdana;
}
h2.the-date {
font : 10pt arial, verdana;
color : #333;
font-weight : normal;
margin : 2em 0 0 0;
padding-bottom : 2px;
text-align : right;
}
cite {
font-style : normal;
}
#content {
padding-left : 5px;
float : right;
margin-left : 190px;
padding-right : 25px;
margin-top : 10px;
}
#wrap {
background : url(img/BACKGROUND.gif);
text-align : left;
margin-left : auto;
margin-right : auto;
margin-top : 10px;
min-height : 80%;
width : 800px;
top : 230px;
border : none;
}
#bonus {
display : none;
}
#header {
font : 24pt arial, verdana;
margin-left : auto;
margin-right : auto;
text-align : left;
width : 800px;
height : 127px;
}
#header a {
color : #000;
width : 100%;
height : 100%;
text-decoration : none;
border-bottom : 0;
}
#sidebar {
display : none;
}
#main {
width : 100%;
height : 100px;
background : url(img/body.jpg);
margin-top : 233px;
float : left;
}
#footer {
background : url(img/footer1.jpg);
display : inline;
height : 35px;
width : 100%;
margin-right : auto;
margin-left : auto;
text-align : right;
}
#footer p.credit {
background : url(img/footer1.jpg);
height : 35px;
margin-top : 300px;
text-align : right;
}
.feedback {
color : #ccc;
text-align : right;
clear : both;
font : 11pt arial, verdana;
}
.feedback a {
color : #666;
font-size : 10pt;
}
.feedback a:hover {
color : #f30;
}
.storytitle {
margin : 0;
font : 14pt arial, verdana;
font-weight : bold;
}
.storytitle a, .storytitle a:visited {
text-decoration : none;
font : 14pt arial, verdana;
font-weight : bold;
color : #000;
}
div.post {
padding : 2px;
padding-right : 10px;
margin-left : 160px;
}
div.storycontent, div.feedback, div.storycontent p {
font : 11pt arial, verdana;
background-color : #fff;
padding-left : 10px;
padding-right : 10px;
}
#commentform #name, #commentform #email, #commentform #url {
border : 1px solid #999;
padding : 0.2em;
}
#commentform textarea {
width : 100%;
height : 50%;
font : 11pt arial, verdana;
}
#commentlist li ul {
border-left : 1px solid #999;
font-size : 110%;
list-style-type : none;
}
ol#comments li p {
font-size : 100%;
}
h3 {
color : #f00;
margin-top : 0;
}
h3#comments {
font : 11pt arial, verdana;
font-weight : bold;
}
h3#respond {
font : 11pt arial, verdana;
font-weight : bold;
}
.meta li, ul.post-meta li {
display : inline;
}
.meta ul {
display : inline;
list-style : none;
margin : 0;
padding : 0;
}
.meta, .meta a {
color : #f30;
font-weight : normal;
letter-spacing : 0;
font : 10pt arial, verdana;
}
#menu {
float : left;
list-style-type : none;
top : 0;
left : 0;
width : 130px;
z-index : 1;
padding : 0 0 0 0;
}
#menu h2 {
display : none;
}
#menu ul {
border : 0;
color : white;
list-style-type : none;
font-weight : normal;
text-align : left;
}
#menu ul ul {
font-variant : normal;
font-weight : normal;
line-height : 100%;
list-style-type : none;
margin : 0;
padding : 0;
text-align : left;
}
.page_item {
font : 11pt arial, verdana;
letter-spacing : 0;
margin : 2px 0 5px 0;
padding : 0;
color : #fff;
text-align : left;
}
.page_item a {
display : block;
color : #000;
height : auto;
width : 100%;
border : 0;
padding : 0 5px 3px 5px;
background-color : #fff;
}
.page_item a:hover {
background-color : #fcc311;
color : #fff;
}
#menu ul ul ul.children {
font-size : 11pt;
}
#menu form {
margin : 0;
}
#menu input#s {
width : 116px;
border : 0 solid #333;
color : #000;
font-family : arial, verdana;
padding : 0 2px 2px 2px;
background-color : #5a5a5a;
}
#wp-calendar {
border : none;
empty-cells : show;
font-size : 9pt;
margin : 0;
width : 90%;
}
#wp-calendar #next a {
padding-right : 10px;
text-align : right;
}
#wp-calendar #prev a {
padding-left : 10px;
text-align : left;
}
#wp-calendar a {
display : block;
text-decoration : none;
}
#wp-calendar caption {
color : #ccc;
font-size : 11pt;
font-weight : bold;
text-align : center;
}
#wp-calendar td {
color : #ccc;
font : 9pt arial, verdana;
letter-spacing : normal;
padding : 2px 0;
text-align : left;
}
#wp-calendar #today {
border : 1px solid #333;
color : #fff;
}
#wp-calendar th {
font-style : normal;
text-transform : capitalize;
}
#wp-calendar a {
border-bottom : 0;
}
.credit {
color : #444;
font-size : 9px;
margin : 0 0 0 40px;
clear : both;
}
.credit a:link, .credit a:hover {
color : #000;
}
Voila, ça fait un bien long message..désolé