Probleme de compatiblité avec IE
Résolu
gaya_102
-
gaya_102 -
gaya_102 -
Bonjour,
voila ma page fonctionne très bien avec firefox mais du tout avec IE
http://www.sandrineetgwen.fr/emeline4.html
voila le code la page
voila le code html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>index emiline</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />
<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
function rollover(id) {
var img = document.getElementById("id_" + id);
if(img.alt == id + "_on") {
img.src = "image/" + id + "_off.jpg";
img.alt = id + "_off";
} else {
img.src = "image/" + id + "_on.jpg";
img.alt = id + "_on";
}
}
</script>
<!-- FIN DU SCRIPT -->
</head>
<body>
<!-- fond -->
<div id="unite">
<div class="en_tete">
<img src="image/bande_haut_index.jpg">
</div>
<div class="menu">
<img src="image/gauche_bouton.jpg">
<a href="emelinepresentation.html"><img src="image/presentation_off.jpg" id="id_presentation" alt="presentation_off" onmouseover="rollover('presentation')" onmouseout="rollover('presentation')" /></a>
<a href="emelinejourj.html"><img src="image/jourj_off.jpg" id="id_jourj" alt="jourj_off" onmouseover="rollover('jourj')" onmouseout="rollover('jourj')" /> </a>
<a href="emelineinfospratiques.html"><img src="image/infos_pratiques_off.jpg" id="id_infos_pratiques" alt="infos_pratiques_off" onmouseover="rollover('infos_pratiques')" onmouseout="rollover('infos_pratiques')" /> </a>
<a href="emelinecontact.html"><img src="image/contact_off.jpg" id="id_contact" alt="contact_off" onmouseover="rollover('contact')" onmouseout="rollover('contact')" /> </a>
<img src="image/droite_bouton.jpg">
</div>
<div class="bas_page">
<img src="image/bande_bas_index.jpg">
</div>
</div>
</body>
</html>
et voila mon code css
body
{
background-color: #FBE3DE;
}
img {
border:0;
}
#unite
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
#rubrique
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
.menu
{
width: 980px;
height: 126px;
}
.en_tete
{
width: 980px;
height: 173px;
}
.bas_page
{
width: 980px;
height: 243px;
}
/* pour le menu deroulant */
#menuderoulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuderoulant li
{
float: left;
margin: 0;
padding: 0;
border: 0;
}
#menuderoulant .sousmenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;background: yellow;
}
#menuderoulant .sousmenu li
{
margin: 0;
padding: 0;
border: 0;
}
/* on cache tout les menus avec la propriété display none*/
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
Pourquoi se problème
merci d'avance
voila ma page fonctionne très bien avec firefox mais du tout avec IE
http://www.sandrineetgwen.fr/emeline4.html
voila le code la page
voila le code html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>index emiline</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="design_emeline4.css" />
<!-- DEBUT DU SCRIPT -->
<script type="text/javascript">
function rollover(id) {
var img = document.getElementById("id_" + id);
if(img.alt == id + "_on") {
img.src = "image/" + id + "_off.jpg";
img.alt = id + "_off";
} else {
img.src = "image/" + id + "_on.jpg";
img.alt = id + "_on";
}
}
</script>
<!-- FIN DU SCRIPT -->
</head>
<body>
<!-- fond -->
<div id="unite">
<div class="en_tete">
<img src="image/bande_haut_index.jpg">
</div>
<div class="menu">
<img src="image/gauche_bouton.jpg">
<a href="emelinepresentation.html"><img src="image/presentation_off.jpg" id="id_presentation" alt="presentation_off" onmouseover="rollover('presentation')" onmouseout="rollover('presentation')" /></a>
<a href="emelinejourj.html"><img src="image/jourj_off.jpg" id="id_jourj" alt="jourj_off" onmouseover="rollover('jourj')" onmouseout="rollover('jourj')" /> </a>
<a href="emelineinfospratiques.html"><img src="image/infos_pratiques_off.jpg" id="id_infos_pratiques" alt="infos_pratiques_off" onmouseover="rollover('infos_pratiques')" onmouseout="rollover('infos_pratiques')" /> </a>
<a href="emelinecontact.html"><img src="image/contact_off.jpg" id="id_contact" alt="contact_off" onmouseover="rollover('contact')" onmouseout="rollover('contact')" /> </a>
<img src="image/droite_bouton.jpg">
</div>
<div class="bas_page">
<img src="image/bande_bas_index.jpg">
</div>
</div>
</body>
</html>
et voila mon code css
body
{
background-color: #FBE3DE;
}
img {
border:0;
}
#unite
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_emeline.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
#rubrique
{
width: 980px;
height: 542px;
margin: auto;
background-image : url("image/fond_rubrique.jpg");
background-repeat: no-repeat;
border :2px solid black;
}
.menu
{
width: 980px;
height: 126px;
}
.en_tete
{
width: 980px;
height: 173px;
}
.bas_page
{
width: 980px;
height: 243px;
}
/* pour le menu deroulant */
#menuderoulant
{
width: 644px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}
#menuderoulant li
{
float: left;
margin: 0;
padding: 0;
border: 0;
}
#menuderoulant .sousmenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;background: yellow;
}
#menuderoulant .sousmenu li
{
margin: 0;
padding: 0;
border: 0;
}
/* on cache tout les menus avec la propriété display none*/
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #3B4E77;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #F2462E; }
#menuDeroulant li a:active { background-color: #5F879D; }
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #F2462E;
}
Pourquoi se problème
merci d'avance
A voir également:
- Probleme de compatiblité avec IE
- Ie tab - Télécharger - Outils pour navigateurs
- Ie 11 - Télécharger - Navigateurs
- Ie 9 - Télécharger - Navigateurs
- Ie 8 - Télécharger - Navigateurs
- Gd group ie cork - Forum Consommation & Internet
6 réponses
Participe à la campagne stopie6.org ...
Oblige tes visiteurs à y réfléchir, moi je participe à cette campagne, viens sur mon site avec ton ie6 ... et tu verras petits message sympa àprès quelques secondes qui t'explique pourquoi c'est le moment de changer pour Ie7, ie8 , firefox, chrome, opera , safari .... y a le choix !!! et c'est gratuit
GreenCode ch
Oblige tes visiteurs à y réfléchir, moi je participe à cette campagne, viens sur mon site avec ton ie6 ... et tu verras petits message sympa àprès quelques secondes qui t'explique pourquoi c'est le moment de changer pour Ie7, ie8 , firefox, chrome, opera , safari .... y a le choix !!! et c'est gratuit
GreenCode ch
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question