par
cicom » 22 nov. 2006, 18:01
J'AI TROUVE LA SOLUTION!
Je vous explique, j'en avais marre de ce bug et donc pour me changer les idées j'ai continué à développer en php, puis arrivé un moment, affichant trop d'infos j'ai dû aggrandir mon design (il se déformait) et là ca a fait tilt! J'appliquais la classe text et la class info au tableau, Firefox s'en dépatouillait mais IE ne s'en sortais plus... Alors après quelques manipes je suis arrivé à avoir le même résultat sous IE et FF!
Je vous joind le code final (faites pas attention aux classes menuxx elles ont changé mais n'y sont pour rien)
Code : Tout sélectionner
body
{
background-color: #000000;
margin: 0;
padding: 0;
}
.contenu
{
margin: 0;
padding: 0;
height: 100%;
width: 800px;
border-spacing: 0;
border: 0;
}
.joker
{
width: *px;
}
.header
{
margin: 0;
padding: 0;
height: 220px;
width: 800px;
background-image: url(images/haedermodif.jpg);
background-repeat: no-repeat;
}
.menu01
{
width: 25px;
height: 800px;
background-image: url(images/menugauche.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
}
.menu02
{
width: 150px;
height: 800px;
background-image: url(images/menucentre.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
vertical-align: top;
}
.menu03
{
width: 25px;
height: 800px;
background-image: url(images/menudroit.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
}
.zone
{
width: 600px;
height: 800px;
background-image: url(images/zonetexte.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
vertical-align: top;
}
.footer01
{
width: 800px;
height: 130px;
background-color: #5d3f00;
padding: 0;
margin: 0;
}
.footer02
{
width: 800px;
height: 130px;
padding: 0;
margin: 0;
border-spacing: 0;
border: 0;
}
.jakfoot
{
width: 176px;
padding: 0;
margin: 0;
}
.footer03
{
width: 468px;
height: 30px;
padding: 0;
margin: 0;
}
.ban
{
width: 468px;
height: 60px;
padding: 0;
margin: 0;
vertical-align: top;
text-align: left;
}
.footer04
{
width: 468px;
height: 40px;
padding: 0;
margin: 0;
vertical-align: top;
}
.text {
text-align: left;
vertical-align: top;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
}
.text a {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
text-decoration: none;
}
.text a:hover {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
text-decoration: underline;
}
.copyright {
padding-bottom: 10px;
text-align: center;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
}
.copyright a {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
text-decoration: none;
}
.copyright a:hover {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
text-decoration: underline;
}
.info2
{
text-align: left;
vertical-align: top;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
a.info
{
text-decoration: none;
border: 0;
margin: 0;
padding: 0;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
margin: 0;
border: 0;
padding: 0;
}
a.info:hover span {
display: inline;
position: absolute;
background: orange;
text-align: left;
vertical-align: top;
color: #d1b5a5;
width: 198px;
height: 98px;
text-decoration: none;
margin: 0;
border: 0;
padding: 0;
}
img.map
{
height: 100px;
width: 100px;
border: 0;
padding: 0;
margin: 0;
}
et le tableau en html
Code : Tout sélectionner
<table style="width: 600px; height: 540px; border: 0; border-spacing: 0; vertical-align: center;" cellspacing="0" cellpadding="0" ><tr style="height: 20px;"><td> </td><td class="text"></td><td> </td><td class="text"></td><td> </td><td class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=1&yd=-1">Haut-droite</a></td><td></td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: cicom Nom: ville de cicom Clan: libertin Guilde : la fédération des 400 lieues Prime: 500" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: NSA Nom: ville de NSA Clan: neutre Prime: 0" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><a class="info" href="#"><img src="map/images/arm.jpg" class="map" /><span><p class="info2">Seigneur: Neckrar </p><p class="info2">Nom: Neckrasorus </p><p class="info2">Clan: neutre </p><p class="info2"> </p><p class="info2">Prime: 0</p></span></a></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: Ogui Nom: ville de Ogui Clan: neutre Prime: 0" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td width="50px" class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=-1&yd=0">Gauche</a></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><a class="info" href="#"><img src="map/images/arm.jpg" class="map" /><span><p class="info2">Seigneur: cicom </p><p class="info2">Nom: Défenseurs du sud! </p><p class="info2">Clan: libertin </p><p class="info2">Guilde : la fédération des 400 lieues </p><p class="info2">Prime: 0</p></span></a></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="50px" class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=1&yd=0">Droite</a></td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: cicom Nom: la cité des dieux Clan: libertin Guilde : la fédération des 400 lieues Prime: 20" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: silk Nom: ville de test3 Clan: libertin Guilde : la fédération des 400 lieues Prime: 0" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td> </td></tr><tr style="height: 20px;"><td></td><td class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=-1&yd=1">Bas-gauche</a></td><td> </td><td class="text"></td><td> </td><td class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=1&yd=1">Bas-droite</a></td><td></td></tr></table><br /><p class="text"><a href="controlc.php">Retour</a><br /></p></td></tr></table>
Voila merci pour toute votre aide! Je mets résolu!
J'AI TROUVE LA SOLUTION!
Je vous explique, j'en avais marre de ce bug et donc pour me changer les idées j'ai continué à développer en php, puis arrivé un moment, affichant trop d'infos j'ai dû aggrandir mon design (il se déformait) et là ca a fait tilt! J'appliquais la classe text et la class info au tableau, Firefox s'en dépatouillait mais IE ne s'en sortais plus... Alors après quelques manipes je suis arrivé à avoir le même résultat sous IE et FF!
Je vous joind le code final (faites pas attention aux classes menuxx elles ont changé mais n'y sont pour rien)
[code]
body
{
background-color: #000000;
margin: 0;
padding: 0;
}
.contenu
{
margin: 0;
padding: 0;
height: 100%;
width: 800px;
border-spacing: 0;
border: 0;
}
.joker
{
width: *px;
}
.header
{
margin: 0;
padding: 0;
height: 220px;
width: 800px;
background-image: url(images/haedermodif.jpg);
background-repeat: no-repeat;
}
.menu01
{
width: 25px;
height: 800px;
background-image: url(images/menugauche.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
}
.menu02
{
width: 150px;
height: 800px;
background-image: url(images/menucentre.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
vertical-align: top;
}
.menu03
{
width: 25px;
height: 800px;
background-image: url(images/menudroit.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
}
.zone
{
width: 600px;
height: 800px;
background-image: url(images/zonetexte.jpg);
background-repeat: no-repeat;
background-color: #5d3f00;
padding: 0;
margin: 0;
vertical-align: top;
}
.footer01
{
width: 800px;
height: 130px;
background-color: #5d3f00;
padding: 0;
margin: 0;
}
.footer02
{
width: 800px;
height: 130px;
padding: 0;
margin: 0;
border-spacing: 0;
border: 0;
}
.jakfoot
{
width: 176px;
padding: 0;
margin: 0;
}
.footer03
{
width: 468px;
height: 30px;
padding: 0;
margin: 0;
}
.ban
{
width: 468px;
height: 60px;
padding: 0;
margin: 0;
vertical-align: top;
text-align: left;
}
.footer04
{
width: 468px;
height: 40px;
padding: 0;
margin: 0;
vertical-align: top;
}
.text {
text-align: left;
vertical-align: top;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
}
.text a {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
text-decoration: none;
}
.text a:hover {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
text-decoration: underline;
}
.copyright {
padding-bottom: 10px;
text-align: center;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
}
.copyright a {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
text-decoration: none;
}
.copyright a:hover {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color: #d1b5a5;
text-decoration: underline;
}
.info2
{
text-align: left;
vertical-align: top;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
a.info
{
text-decoration: none;
border: 0;
margin: 0;
padding: 0;
}
a.info span {
display: none;
}
a.info:hover {
background: none; /* correction d'un bug IE */
margin: 0;
border: 0;
padding: 0;
}
a.info:hover span {
display: inline;
position: absolute;
background: orange;
text-align: left;
vertical-align: top;
color: #d1b5a5;
width: 198px;
height: 98px;
text-decoration: none;
margin: 0;
border: 0;
padding: 0;
}
img.map
{
height: 100px;
width: 100px;
border: 0;
padding: 0;
margin: 0;
}
[/code]
et le tableau en html
[code]
<table style="width: 600px; height: 540px; border: 0; border-spacing: 0; vertical-align: center;" cellspacing="0" cellpadding="0" ><tr style="height: 20px;"><td> </td><td class="text"></td><td> </td><td class="text"></td><td> </td><td class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=1&yd=-1">Haut-droite</a></td><td></td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: cicom Nom: ville de cicom Clan: libertin Guilde : la fédération des 400 lieues Prime: 500" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: NSA Nom: ville de NSA Clan: neutre Prime: 0" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><a class="info" href="#"><img src="map/images/arm.jpg" class="map" /><span><p class="info2">Seigneur: Neckrar </p><p class="info2">Nom: Neckrasorus </p><p class="info2">Clan: neutre </p><p class="info2"> </p><p class="info2">Prime: 0</p></span></a></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: Ogui Nom: ville de Ogui Clan: neutre Prime: 0" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td width="50px" class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=-1&yd=0">Gauche</a></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><a class="info" href="#"><img src="map/images/arm.jpg" class="map" /><span><p class="info2">Seigneur: cicom </p><p class="info2">Nom: Défenseurs du sud! </p><p class="info2">Clan: libertin </p><p class="info2">Guilde : la fédération des 400 lieues </p><p class="info2">Prime: 0</p></span></a></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="50px" class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=1&yd=0">Droite</a></td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: cicom Nom: la cité des dieux Clan: libertin Guilde : la fédération des 400 lieues Prime: 20" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/ville.jpg" class="map" title="Seigneur: silk Nom: ville de test3 Clan: libertin Guilde : la fédération des 400 lieues Prime: 0" /></td><td> </td></tr><tr style="height: 100px; font-size: 0; line-height: 0;"><td> </td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td width="100px"><img src="map/images/l.jpg" class="map" /></td><td> </td></tr><tr style="height: 20px;"><td></td><td class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=-1&yd=1">Bas-gauche</a></td><td> </td><td class="text"></td><td> </td><td class="text"><a href="controlc.php?page=mapgen1&idf=47&action=go&xd=1&yd=1">Bas-droite</a></td><td></td></tr></table><br /><p class="text"><a href="controlc.php">Retour</a><br /></p></td></tr></table>
[/code]
Voila merci pour toute votre aide! Je mets résolu!