IE fait de mon site un vrai carnage !

help ! au secours !

Sujet résolu

12 avril 2006 à 21:56:43

Bon, voici mon site. Si vous le regardez sous Firefox, tout est nickel, si vous utilisez ce grztblb de IE, vous voyez l'intestin d'un chat après la deuxième guerre mondial ! J'aimerai donc savoir pourquoi ça fait autant que fouilli. Voici le code css qui défini les positions :

#m_droite
{
background: #002b58;
position: absolute;
padding: 5px;
top: 18%;
width: 12%;
right: 1%;
border: 10px outset;
}
#ban
{
position: absolute;
text-align: center;
border: 1px solid white;
top: 5px;
height: 90px;
left: 1%;
right: 1%;
width: 98%;
cursor: pointer;
z-index: 5;
}
#ban img
{
border: none;
z-index: 5;
width: 100%;
height: 100%;
}

#contenu
{
background: #004d7f;
position: absolute;
border: solid 2px;
top: 18%;
left: 1%;
right: 16.5%;
padding-left: 20px;
padding-right: 20px;
z-index: 1;
}

#chatbox
{
font-size: 0.7em;
background: #2d3a65;
overflow: auto;
height: 185px;
border: dotted 1px;
}

Pourquoi ce code pose autant de problèmes sous IE ?

pascall

12 avril 2006 à 23:21:14

bonsoir
meme avec FF en 800x600 il y a un petit problème.

j'ai trifouillé un peu le css et j'obtiens ça :

html
{
background: #00aabb;
font-family: Verdana, serif;
font-size:13px;
color: white;
}
acronym
{
border-bottom: dotted 1px;
cursor: help;
}
.logs
{
margin-bottom: -15px;
}
a
{
text-decoration: underline;
color: white;
}
a:hover
{
font-style: italic;
background: black;
}
a:active
{
border: 1px inset;
text-decoration: underline overline;
}
#ban
{
margin:auto;
text-align: center;
border: 1px solid white;
top: 5px;
height: 90px;
left: 1%;
right: 1%;
width: 98%;
cursor: pointer;
z-index: 5;
}
#ban img
{
border: none;
z-index: 5;
width: 100%;
height: 100%;
}

#copy
{
text-align:center;
font-style: italic;
font-weight: bold;
z-index: 2;
text-decoration: underline;
}
#contenu
{
background: #004d7f;
sition: absolute;
border: solid 2px;
top: 18%;
left: 1%;
right: 16.5%;
padding-left: 20px;
padding-right: 20px;
z-index: 1;
}

#chatbox
{
font-size: 0.7em;
background: #2d3a65;
overflow: auto;
height: 185px;
border: dotted 1px;
}

#news
{
border: 1px solid white;
border-collapse: collapse;
width:81%;
}
#news td
{
border: 1px solid white;
}
#news hr
{
width: 40%;
}
#news ins
{
text-align: left;
}
.smiley
{
vertical-align: middle;
border: none;
}
.quest
{
text-decoration: underline;
font-size: 1.2em;
cursor: help;
color: #0066ff;
}
.quest:before
{
float: left;
font-weight: bold;
font-size: 2em;
content: '?? : ';
}
.rep
{
font-size: 1.0em;
font-weight: bold;
cursor: default;
}

.signature
{
font-weight: bold;
font-size: 0.95em;
font-style: italic;
text-indent: 50px;
}
#mdp
{
cursor: pointer;
border: outset 2px white;
color: #009f2b;
font-size: 0em;
display: inline;
}
#mdp:hover
{
border: outset 2px white;
font-size: 0.9em;
display:inline;
}

.html
{
font-family: Verdana, serif;
margin: 3px;
padding: 3px;
border: #ff8c00 solid 2px;
background: #FFFFFF;
color: black;
font-size: 0.9em;
text-indent: 0px;
z-index:-1;
}

#m_droite
{
background: #002b58;
float:right;
padding: 5px;
top: 18%;
width: 12%;
right: 1%;
border: 10px outset;
}
.pseudo
{
text-decoration: underline;
font-weight: bold;
}
.m_titre
{
margin: 2px;
color: white;
font-size: 1.1em;
font-weight: bold;
}
input[class=val]
{
margin-top: 3px;
background: url(../imgs/valider.gif);
width: 30px;
border: #2C3149 solid 1px;
}
input[class=val]:hover
{
border-color: #5B6697;
cursor: pointer;
}
input[class=val]:active
{
border-style: inset;
}
input[class=delete]
{
margin-top: 3px;
background: url(../imgs/reset.gif);
border-color: #2C3149;
}
input[class=delete]:hover
{
cursor: pointer;
}
input[class=delete]:active
{
border-style: inset;
}

ins
{
text-decoration: none;
}
#forum_table
{
border: 1px solid #00bb00;
border-collapse: collapse;
width: 100%;
}
#forum_table tbody td
{
border: 1px solid #00bb00;
}

.td_forum:hover
{
background: #00557f;
}
.td_forum:active
{
background: #00668f;
}

#vt_table
{
background: #002d54;
border: 1px solid white;
border-collapse: collapse;
width: 100%;
}
#vt_table td
{
border: 1px solid white;
}
.vt_msg
{
text-align: left;
vertical-align: top;
}
.vt_msg p
{
text-align: left;
margin: 10px;
}
.vt_msg hr
{
width: 60%;
}

j'ai supprimé des position:absolute, j'ai mis un width:81% au #news
j'ai centré la bannière
et j'obtiens une présentation à peu près correcte

AurelFreaky

12 avril 2006 à 23:23:25

Bien, je vais voir ça, merci

Edit : on va éviter Image utilisateur

c'est pire ! Le menu n'est pas affiché dans sa div, les news n'ont plus de bordure...

Edit2 : c'est bon, j'ai bidouiller un peu en m'inspirant du code de pascall (merci

) et ça m'a l'air à peu près ok !

pascall

13 avril 2006 à 0:01:38

tu es sur ??
voilà ce que ca donne chez moi

avec FF
et
avec IE
as tu bien recopié le code ?