Problèm de DIV sous IE
Scalpweb
-
Hannes -
Hannes -
Bonjour à tous !
Voici le site sur lequel je travail actuellement :
www.devavoirlesite.fr/Emilie
Il fonctionne comme je le désire sur firefox, mais sous IE, le texte du menu est décallé d'une case, impossible de savoir pourquoi...
Pourriez-vous me donner un coup de main ?
Merci d'avance,
Scalp
Voici le site sur lequel je travail actuellement :
www.devavoirlesite.fr/Emilie
Il fonctionne comme je le désire sur firefox, mais sous IE, le texte du menu est décallé d'une case, impossible de savoir pourquoi...
Pourriez-vous me donner un coup de main ?
Merci d'avance,
Scalp
7 réponses
salut,
je n'ai pas trouvé le décalage mais tu devrais penser à une mise en page sans tableaux tu auras moins de soucis.
tutos W3C et AlsaCréations
et tu devrais enregistrer tes images en "png" plutôt qu'en "bmp".
je n'ai pas trouvé le décalage mais tu devrais penser à une mise en page sans tableaux tu auras moins de soucis.
tutos W3C et AlsaCréations
et tu devrais enregistrer tes images en "png" plutôt qu'en "bmp".
Chez moi j'ai bien un décalage...
Tout les texte sont décalé d'un bouton, ce qui donne que le dernier texte n'ets sur aucun bouton...
Tout les texte sont décalé d'un bouton, ce qui donne que le dernier texte n'ets sur aucun bouton...
oui moi aussi j'ai le décalage mais je n'ai pas trouvé pourquoi…
et je n'ai pas le temps maintenant d'éplucher le code.
et je n'ai pas le temps maintenant d'éplucher le code.
Ca se résume au code si-dessous :
Sous IE, le texte n'est pas sur le bouton, sous firefox oui :
<html>
<body>
<table>
<tr>
<td style="z-index: 1; height: 60px; background-image: url(./Images/fond_haut_menu.bmp);">
<img id="B1" style="z-index: 1; position: relative;" src="Images/fond_bouton.bmp" align="left" alt="" />
<div style="width: 79px; padding-top: 5px; z-index: 100; position: absolute;">
<center><font size="2" color="white" face="Comic Sans MS">
<a href="" onmouseout="SetFond('B1');" onmouseover="SetBouton('B1');">Accueil</a>
</font></center>
</div>
</td>
</tr>
</table>
</body>
</html>
Sous IE, le texte n'est pas sur le bouton, sous firefox oui :
<html>
<body>
<table>
<tr>
<td style="z-index: 1; height: 60px; background-image: url(./Images/fond_haut_menu.bmp);">
<img id="B1" style="z-index: 1; position: relative;" src="Images/fond_bouton.bmp" align="left" alt="" />
<div style="width: 79px; padding-top: 5px; z-index: 100; position: absolute;">
<center><font size="2" color="white" face="Comic Sans MS">
<a href="" onmouseout="SetFond('B1');" onmouseover="SetBouton('B1');">Accueil</a>
</font></center>
</div>
</td>
</tr>
</table>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
tu joues avec les "position:relative" et position:absolute" il ne doit pas aimer.
tu ferais mieux de mettre l'image en background du "<a>" avec un {display:block;}.
et pour le comportement tu changes le 'background-image" avec le sélecteur "a:hover".
c'est la technique classique en html/css.
des exemples ici et là.
et comme ça la sémantique de ton document sera plus correcte.
tu ferais mieux de mettre l'image en background du "<a>" avec un {display:block;}.
et pour le comportement tu changes le 'background-image" avec le sélecteur "a:hover".
c'est la technique classique en html/css.
des exemples ici et là.
et comme ça la sémantique de ton document sera plus correcte.
SALUT
je ne sais pas si cela vient de la mais il y as beaucoup d erreurs dans ton code et l utilisations de table et du "style" embarque :((((((((((
des <div> et un css externe aurais ete bien mieux ! mais bon
essaye avec le code pas mal nettoye
il reste quelque probleme de height et backround sur les tables (une dixaine) mais essaye si tu as toujours le decalage avec ce code ??
RAD
je ne sais pas si cela vient de la mais il y as beaucoup d erreurs dans ton code et l utilisations de table et du "style" embarque :((((((((((
des <div> et un css externe aurais ete bien mieux ! mais bon
essaye avec le code pas mal nettoye
il reste quelque probleme de height et backround sur les tables (une dixaine) mais essaye si tu as toujours le decalage avec ce code ??
<!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" />
<meta name="description" content="emilie" />
<meta name="keywords" content="" />
<meta name="author" content="scalpweb" />
<meta name="identifier-url" content="http://www.devavoirlesite.fr/emilie" />
<meta name="copyright" content="©2007 mugnier pascal" />
<title> emilie - test
</title>
<link rel="stylesheet" type="text/css" href="includes/style.css" />
<script type="text/javascript" src="includes/script.js">
</script>
<style type="text/css"> /* /*
/*
<![CDATA[*/
body {
background-color: black;
}
td.c9 {
padding-top: 15px;
padding-left: 40px;
padding-right: 40px;
}
td.c8 {
height: 29px;
background-image: url(./Images/fond_haut_menu.bmp);
}
img.c7 {
z-index: 1;
position: relative;
}
td.c6 {
z-index: 1;
height: 60px;
background-image: url(./Images/fond_haut_menu.bmp);
}
div.c5 {
width: 79px;
padding-top: 5px;
z-index: 100;
position: absolute;
}
img.c4 {
z-index: 1;
}
td.c3 {
width: 50%;
height: 29px;
background-image: url(./Images/fond_haut_menu.bmp);
}
td.c2 {
padding-top: 8px;
}
div.c1 {
display: none;
}
/*]]> */
</style>
</head>
<body>
<div class="c1">
<img src="Images/bouton.bmp" alt="Image" />
</div>
<table cellspacing="0" height="100%" width="100%">
<tbody>
<tr valign="middle">
<td width="100%">
<table cellspacing="0" width="90%" height="100%">
<tbody>
<tr valign="top" height="100%">
<td width="373" class="c2">
<img src="Images/fond_gauche_2.JPG" alt="Image" /></td>
<td width="100%">
<table cellspacing="0" >
<tbody>
<tr valign="middle">
<td class="c3"></td>
<td class="c6">
<img id="B1" class="c4" src="Images/fond_bouton.bmp" align="left" alt="Image" />
<div class="c5">
<a href="#" onmouseout="SetFond('B1');" onmouseover="SetBouton('B1');">Accueil</a><br />
</div></td>
<td class="c8">
<img id="B2" class="c7" src="Images/fond_bouton.bmp" align="left" alt="Image" />
<div class="c5">
<a href="#" onmouseout="SetFond('B2');" onmouseover="SetBouton('B2');">News</a><br />
</div></td>
<td class="c8">
<img id="B3" class="c7" src="Images/fond_bouton.bmp" align="left" alt="Image" />
<div class="c5">
<a href="#" onmouseout="SetFond('B3');" onmouseover="SetBouton('B3');">Bio</a><br />
</div></td>
<td class="c8">
<img id="B4" class="c7" src="Images/fond_bouton.bmp" align="left" alt="Image" />
<div class="c5">
<a href="#" onmouseout="SetFond('B4');" onmouseover="SetBouton('B4');">Médias</a><br />
</div></td>
<td class="c8">
<img id="B5" class="c7" src="Images/fond_bouton.bmp" align="left" alt="Image" />
<div class="c5">
<a href="#" onmouseout="SetFond('B5');" onmouseover="SetBouton('B5');">Groupe</a><br />
</div></td>
<td class="c8">
<img id="B6" class="c7" src="Images/fond_bouton.bmp" align="left" alt="Image" />
<div class="c5">
<a href="#" onmouseout="SetFond('B6');" onmouseover="SetBouton('B6');">Presse</a><br />
</div></td>
<td class="c8">
<img id="B7" class="c7" src="Images/fond_bouton.bmp" align="left" alt="Image" />
<div class="c5">
<a href="#" onmouseout="SetFond('B7');" onmouseover="SetBouton('B7');">Liens</a><br />
</div></td>
<td class="c8">
<img id="B8" class="c7" src="Images/fond_bouton.bmp" align="left" alt="Image" />
<div class="c5">
<a href="#" onmouseout="SetFond('B8');" onmouseover="SetBouton('B8');">Livre d'Or</a><br />
</div></td>
<td class="c8">
<img id="B9" class="c7" src="Images/fond_bouton.bmp" align="left" alt="Image" />
<div class="c5">
<a href="#" onmouseout="SetFond('B9');" onmouseover="SetBouton('B9');">Contact</a><br />
</div></td>
<td class="c3"></td>
</tr>
<tr>
<td colspan="11" class="c9">
<!-- Case centrale -->
<table cellspacing="0" height="500">
<tr height="4">
<td width="4">
<img src="Images/tab_hg.bmp" alt="Image" /></td>
<td width="100%" background="Images/tab_h.bmp"></td>
<td width="4">
<img src="Images/tab_hd.bmp" alt="Image" /></td>
</tr>
<tr height="490">
<td width="4" background="Images/tab_g.bmp"></td>
<td width="100%" background="Images/tab_f.bmp">
<h4>Titre de la page en cours</h4>
<h5>Sous-menu éventuel</h5>
<div class="centralText"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<h6> Copyright Pascal Mugnier 2007
</h6></td>
<td width="4" background="Images/tab_d.bmp"></td>
</tr>
<tr>
<td width="4">
<img src="Images/tab_bg.bmp" alt="Image" /></td>
<td width="100%" background="Images/tab_b.bmp"></td>
<td width="4">
<img src="Images/tab_bd.bmp" alt="Image" /></td>
</tr>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table><br /></td>
</tr>
</tbody>
</table>
</body>
</html>
RAD
