Débutant pb d'affichage sur IE PC

Question

kikidoux

19 Apr 2005 à 12:28

Bonjour,
je travaille actuellement sur une charte graphique avec css. Elle s'affiche correctement sur tous nav sauf sur IE PC. SOS je comprends pas ! Merci pour votre aide !

voici le code html :

<html>
<head>
<title>charte-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="stylebrique.css" rel="stylesheet" type="text/css">
<body style="background-color:#FFFFFF;">

<table class="chartebriquesqcss-01">
<tr>
<td class="chartebriquesqcss-01"><img src="images/elements_03.gif" width="80" height="79">
</tr>
</table>

<table class="chartebriquesqcss-02">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-03">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-04">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-05" cellspacing="0" border="0" cellpadding="0" style="width: 336px; height: 49px">
<tr>
<td class="titre" height="29">Ma petite entreprise
</tr>
<tr>
<td class="slogan">Slogan de la société
</tr>
</table>

<table class="chartebriquesqcss-06">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-07">
<tr>
<td colspan="2" class="navigo"> <a href="#">Navig1</a> <a href="#"></a> <a href="#">Navig3</a>
<a href="#">Navig4</a> <a href="#">Navig5</a>
<td colspan="2" width="136" class="drapeau"> <a href="#"><img src="images/elements_09.gif" width="20" height="13" hspace="2" border="0"></a><a href="#"><img src="images/elements_11.gif" width="20" height="13" hspace="2" border="0"></a><a href="#"><img src="images/elements_13.gif" width="20" height="13" hspace="2" border="0"></a><a href="#"><img src="images/elements_15.gif" width="20" height="13" hspace="2" border="0"></a><a href="#"><img src="images/elements_17.gif" width="20" height="13" hspace="2" border="0"></a>
</tr>
</table>

<table class="chartebriquesqcss-08">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-09">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-10">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-11" style="width: 591px; height: 10px" cellpadding="0" cellspacing="0">
<tr>
<td class="navigmid"><a href="#">Sous-nav1</a> <a href="#">Sous-nav2</a> <a href="#">Sous-nav3</a>
</tr>
</table>

<table class="chartebriquesqcss-12">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-13">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-14" cellspacing="0">
<tr>
<td class="titremenu" height="21">Thème global
</tr>
<tr valign="top">
<td class="menou" height="2">
<a href="#">Famille 1</a><br>
<a href="#">S-famille 1</a><br>
<a href="#">S-famille 2</a><br>
<a href="#">S-famille 3<br>
</a><a href="#">S-famille 4 </a>
<tr>
<td class="titremenu" height="21">Thème global
</tr>
<tr valign="top">
<td class="menou"> <a href="#">Famille 2</a><br>
<a href="#">S-famille 1</a><br>
<a href="#">S-famille 2</a><br>
<a href="#">S-famille 3</a>
</tr>
</table>

<table class="chartebriquesqcss-15" cellspacing="0" style="width: 631px; height: 39px">
<tr>
<td class="corpstitre" height="16">L'analyse de Nostradamus vue par Trajan
</tr>
<tr>
<td class="corpstitre">
</tr>
<tr> </tr>
<tr>
<td class="corps">Que penser d'une telle thèse cryptographique,
chère à un Roger Frontenac, cité par Trajan ? Il
s'agirait donc grâce à une clef, contenue donc dans I, 1,
de renuméroter les quatrains : car pour rendre le décryptage
plus difficile hop <a href="#">Lien</a> </td>
</tr>
</table>

<table class="chartebriquesqcss-16">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-17">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-18">
<tr>
</tr>
</table>

<table class="chartebriquesqcss-19">
<tr>
</tr>
</table>
</body>
</html>

Et le code css :

Body {
font: normal 9pt verdana, helvetica, sans-serif;
}

P {
font: normal 9pt verdana, helvetica, sans-serif;
}

TD {
color: #000000;
font: normal 9pt verdana, helvetica, sans-serif;
}

.corpstitre
{
font-family:verdana;
font-size:11pt;
color:#993333;
background-color:transparent;
font-weight: bold;
text-align:left;
margin-left:0px;
margin-right:0px;}

.corps
{
font-family:verdana, sans-serif;
font-size:9pt;
color:black;
background-color:transparent;
text-align:left;
margin-left:0px;
margin-right:0px;}

.navigo
a:link {
font-family:verdana, sans-serif;
font-size:10pt;
color:#FFFFFF;
vertical-align: top;
background-image: url(images/elements_06b.gif);
background-repeat: no-repeat;
background-position:1% 40%;
padding-left:20px;
background-color:transparent;
text-decoration:none;
}

.navigo
a:visited {
font-family:verdana, sans-serif;
font-size:10pt;
color:#CCCCCC;
background-image: url(images/elements_06b.gif);
background-repeat: no-repeat;
background-position:1% 40%;
padding-left:20px;
background-color:transparent;
text-decoration:none;
}

.navigo
a:hover {
font-family:verdana, sans-serif;
font-size:10pt;
font-weight: bold;
color:#990000;
vertical-align: top;
background-color:transparent;
text-decoration:none;
}

.navigmid
a:link {
font-family:verdana, sans-serif;
font-size:9pt;
color:#999999;
background-color:transparent;
text-decoration:none;
}

.navigmid
a:visited {
font-family:verdana, sans-serif;
font-size:9pt;
color:#CCCCCC;
background-color:transparent;
text-decoration:none;
}

.navigmid
a:hover {
font-family:verdana, sans-serif;
font-size:10pt;
font-weight: bold;
color:#990000;
background-image: url(images/elementsfeleche.gif);
background-repeat: no-repeat;
background-position:1% 70%;
padding-left:11px;
background-color:transparent;
text-decoration:none;
}

.menou
a:link {
font-family:verdana, sans-serif;
font-size:8pt;
text-decoration:none;
color:#CCCCCC;
font-weight: normal;
background-color:transparent;
padding-left:5px;
}

.menou
a:visited {
font-family:verdana, sans-serif;
font-size:8pt;
color:#999999;
font-weight: normal;
background-color:transparent;
padding-left:5px;
text-decoration:none;
}

.menou
a:hover {
font-family:verdana, sans-serif;
font-size:8pt;
font-weight: bold;
color:#FFFFFF;
background-image: url(images/puce.gif);
background-repeat: no-repeat;
background-position:1% 70%;
padding-left:17px;
background-color:transparent;
text-decoration:none;
}

.corps
a:link {
font-family:verdana, sans-serif;
font-size:9pt;
font-weight: bold;
color:#990000;
background-color:transparent;
text-decoration:none;
}

.corps
a:visited {
font-family:verdana, sans-serif;
font-size:9pt;
color:#AE4848;
background-color:transparent;
text-decoration:none;
}

.corps
a:hover {
font-family:verdana, sans-serif;
font-size:9pt;
font-weight: bold;
color:#CCCCCC;
background-color:transparent;
text-decoration:none;
}

.drapeau {
text-align: right;
vertical-align: middle;
padding-right: 5px;}

.chartebriquesqcss-01 {
position:absolute;
left:0px;
top:0px;
width:220px;
height:87px;
background-image: url(images/chartebriquesqcss_01.gif);
padding-left: 5px;
padding-top:3px;
}

.chartebriquesqcss-02 {
position:absolute;
left:220px;
top:0px;
width:8px;
height:87px;
background-image: url(images/chartebriquesqcss_02.gif);
}

.chartebriquesqcss-03 {
position:absolute;
left:228px;
top:0px;
width:572px;
height:29px;
background-image: url(images/chartebriquesqcss_03.gif);
}

.chartebriquesqcss-04 {
position:absolute;
left:228px;
top:29px;
width:123px;
height:58px;
background-image: url(images/chartebriquesqcss_04.gif);
}

.titre
{
font-family: verdana;
font-size: 14pt;
font-style: normal;
font-weight: bold;
color: #666666;
letter-spacing: normal;
text-align: center;
vertical-align: middle;
word-spacing: normal;
font-variant: small-caps;
text-transform:lowercase; line-height: normale;}

.slogan
{
font-family: Verdana;
font-size: 10pt;
font-style: normal;
font-weight: bold;
color: #CCCCCC;
letter-spacing: normal;
text-align: center;
font-style: italic;
word-spacing: normal;
font-variant: normal; vertical-align: top; line-height: 5pt;}

.chartebriquesqcss-05 {
position:absolute;
left:351px;
top:29px;
width:336px;
height:58px;
background-image: url(images/chartebriquesqcss_05.gif);}

.chartebriquesqcss-06 {
position:absolute;
left:687px;
top:29px;
width:113px;
height:58px;
background-image: url(images/chartebriquesqcss_06.gif);
}

.chartebriquesqcss-07 {
position:absolute;
left:0px;
top:87px;
width:800px;
height:23px;
background-image: url(images/chartebriquesqcss_07.gif);}

.chartebriquesqcss-08 {
position:absolute;
left:0px;
top:110px;
width:132px;
height:11px;
background-image: url(images/chartebriquesqcss_08.gif);
}

.chartebriquesqcss-09 {
position:absolute;
left:132px;
top:110px;
width:37px;
height:440px;
background-image: url(images/chartebriquesqcss_09.gif);}

.chartebriquesqcss-10 {
position:absolute;
left:169px;
top:110px;
width:40px;
height:44px;
background-image: url(images/chartebriquesqcss_10.gif);}

.chartebriquesqcss-11 {
position:absolute;
left:209px;
top:110px;
width:591px;
height:44px;text-align: right;
background-image: url(images/chartebriquesqdur_11.gif);}

.chartebriquesqcss-12 {
position:absolute;
left:0px;
top:121px;
width:114px;
height:3px;
background-image: url(images/chartebriquesqdur_12.gif);}

.chartebriquesqcss-13 {
position:absolute;
left:114px;
top:121px;
width:18px;
height:131px;
background-image: url(images/chartebriquesqdur_13.gif);}

.chartebriquesqcss-14 {
position:absolute;
left:0px;
top:124px;
width:114px;
height:368px; background-image: url(images/chartebriquesqdur_12.gif); background-repeat: repeat;} .titremenu {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; font-style: normal; color: #FFFFFF; text-indent:1pt; font-weight: bold; padding-left:2px; text-decoration:underline; vertical-align:bottom;}

.chartebriquesqcss-15 {
position:absolute;
left:169px;
top:154px;
width:631px;
height:396px;background-image: url(images/chartebriquesqdur_15.gif);}

.chartebriquesqcss-16 {
position:absolute;
left:114px;
top:252px;
width:18px;
height:3px;background-image: url(images/chartebriquesqdur_16.gif);
}

.chartebriquesqcss-17 {
position:absolute;
left:114px;
top:255px;
width:18px;
height:237px;background-image: url(images/chartebriquesqdur_17.gif);
}

.chartebriquesqcss-18 {
position:absolute;
left:0px;
top:492px;
width:132px;
height:25px;background-image: url(images/chartebriquesqdur_18.gif);
}

.chartebriquesqcss-19 {
position:absolute;
left:0px;
top:517px;
width:132px;
height:33px;background-image: url(images/chartebriquesqdur_19.gif);
}
Modifié par kikidoux (19 Apr 2005 - 13:22)

robined

19 Apr 2005 à 12:59

salut,

Tout d'abord, c'est difficil de se faire un aperçu de ton site en n'ayant que le code. Si tu as une url à nous donner, ce serait sympa.

Quelques petites remarques tout de même:
- Tu utlises le css qu'en partie et donc, tu ne profites pas de ses atouts. Ca sert a rien de créer des classes css si tu t'en sert qu'avec des tableaux.

- tu rajoutes des propriétés css dans ta page, mets tout dans ton fichier de style.

- tu utilises des classes pour définir des objets uniques. Pense aux id

- pour tes tableaux, tu refermes jamais les balises <td> avec un </td>, cela peut provoquer des problemes d'affichage.

bon courage.

kikidoux

19 Apr 2005 à 13:05

voilà l'adresse :
http://dok2.laika-factory.net/charte1/chartebrique.html

Igor

19 Apr 2005 à 13:14

Bonjour kikidoux et bienvenue sur ce forum,

Merci de faire un passage sur Aides/Règles pour apprendre à présenter correctement du code dans le forum et d'éditer en conséquence ton premier post. Smiley cligne

Tu devrais également éditer ton titre pour préciser le problème que tu rencontres, car "Débutant pb d'affichage" ça n'évoque pas grand chose, et avec un tel titre tu risques de ne pas avoir beaucoups de réponses.

robined

19 Apr 2005 à 13:17

un premier element, il est possible que ca ne change rien mais bon...

Là où FireFox est un peu plus indulgent et IE intransigeant, c'est sur les cellules de tableau vides.

Une première solution (celle que je ne conseille pas):
Tu mets des cellules fermées et tu insére des espaces insécables ( ) à l'intérieur.

La deuxième ( un pau mieux):
Tu vires tes tableaux et tu utilises des div css dont tu gère la taille toi-même.

kikidoux

19 Apr 2005 à 13:21

merci j'envoie ça à mon graphiste pour qu'il regarde...
Modifié par kikidoux (20 Apr 2005 - 11:44)

Sujet clos