Probleme d'affichage avec IE

Probleme d'affichage avec IE - HTML/CSS - Programmation

Marsh Posté le 12-03-2006 à 23:01:38    

Bonjour  a tous
 
j'ai un peit probleme d'affichage d' une page mise en forme à l'aide de tableau sous IE.
Avec Firefox cela fonctionne impecable mais pas avec IE.
Est ce que quelqu'un pourrait m'éclairer.
 
Voila le code :
 
 
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>Test Charte</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
 
<body bgcolor=#ffffff>
<center>
<!-- header -->
<table width=778 border=0 cellpadding=0 cellspacing=0 class="bordure1">
 <tr>
  <td colspan=4>
   <img src="images/m1.gif" width=193 height=17 alt=""></td>
  <td colspan=7 rowspan=9>
   <img src="images/main1.gif" width=336 height=204 alt=""></td>
  <td colspan=5 rowspan=10>
   <img src="images/main2.gif" width=246 height=272 alt=""></td>
  <td>
   <img src="images/spacer.gif" width=1 height=17 alt=""></td>
 </tr>
 
 <tr>
  <td colspan=2 rowspan=7>
   <img src="images/m2.gif" width=28 height=172 alt=""></td>
  <td colspan=2>
   <a href="index.html">
    <img name="home_page" src="images/home-page.gif" width=165 height=28 border=0 alt="Accueil"></a></td>
  <td>
   <img src="images/spacer.gif" width=1 height=28 alt=""></td>
 </tr>
 <tr>
  <td colspan=2>
   <a href="historique.html">
   <img name="historique" src="images/historique.gif" width=165 height=24 border=0 alt="Historique"></a></td>
  <td>
   <img src="images/spacer.gif" width=1 height=24 alt=""></td>
 </tr>
 
 <tr>
  <td colspan=2>
   <a href="#">
    <img name="services" src="images/services.gif" width=165 height=24 border=0 alt="services"></a></td>
  <td>
   <img src="images/spacer.gif" width=1 height=24 alt=""></td>
 </tr>
 
 <tr>
  <td colspan=2>
   <a href="#">
    <img name="products" src="images/products.gif" width=165 height=24 border=0 alt="products"></a></td>
  <td>
   <img src="images/spacer.gif" width=1 height=24 alt=""></td>
 </tr>
 
 <tr>
  <td colspan=2>
   <a href="#">
    <img name="support" src="images/support.gif" width=165 height=24 border=0 alt="support"></a></td>
  <td>
   <img src="images/spacer.gif" width=1 height=24 alt=""></td>
 </tr>
 
 <tr>
  <td colspan=2>
   <a href="#">
    <img name="news" src="images/news.gif" width=165 height=24 border=0 alt="news"></a></td>
  <td>
   <img src="images/spacer.gif" width=1 height=24 alt=""></td>
 </tr>
 
 <tr>
  <td colspan=2>
   <a href="#">
    <img name="contacts" src="images/contacts.gif" width=165 height=24 border=0 alt="contacts"></a></td>
  <td>
   <img src="images/spacer.gif" width=1 height=24 alt=""></td>
 </tr>
 
 <tr>
  <td colspan=4 rowspan=2>
   <img src="images/m3.gif" width=193 height=83 alt=""></td>
  <td>
   <img src="images/spacer.gif" width=1 height=15 alt=""></td>
 </tr>
 
 <tr>
  <td colspan=2>
   <img src="images/main3.gif" width=33 height=68 alt=""></td>
  <td colspan=5 align="left" valign="top" background="images/b_main.gif" class="text8">
   <span class="text7">blablablabla</span> blablablablabla </td>
  <td>
   <img src="images/spacer.gif" width=1 height=68 alt=""></td>
 </tr>
</table>
<!-- fin header -->
 
<!-- corps -->
<table width=778 height=300 border=0 cellpadding=0 cellspacing=0 class="bordure2">
<tr >
<td colspan=17>
ici le corps
</td>
</tr>
</table>
<!-- fin corps -->
 
 
</center>
</body>
</html>
 
 
Merci d'avance.

Reply

Marsh Posté le 12-03-2006 à 23:01:38   

Reply

Marsh Posté le 12-03-2006 à 23:12:14    

[:grandvampire]  hum ça pique bien les yeux
 
 
1_ Balise code SVP
2_ Mise en page tableau pour données non tabulaire : [:skeye]  
3_ ça donne pas du tout envie de corriger ce code....

Reply

Marsh Posté le 13-03-2006 à 09:34:36    

Bah c'est surtout qu'il faudrait voir le contenu du css...
Et quitte a faire un css, pkoi ne pas mettre les parametres de tes table dedans (width height border etc.) ?

Reply

Marsh Posté le 13-03-2006 à 09:46:11    

Perso ce qui m'interpelle plus ce sont tous les:

Code :
  1. <a href="#"> ... </a>

qui doivent pas servir a grand chose ( ptet un hover dans la css remarque).

Reply

Marsh Posté le 13-03-2006 à 11:30:21    

En fait ce code n'est pas du tout fini .
Pour les <a href="#"> j'ai mis ça en attendant car les liens ne sont pas encore fait.
Sinon pour les paramètres de la table effectivement ça sera mis dans la css , j ai laissé ça en attendant.
 
Pour la mise en place sous forme de tableau je trouvais que c'était plus simple qu'avec des div
 
Donc je reviens à ma question initiale qui était  pourquoi cela ne fonctionne pas sous IE.
 
Pour la css j'ai juste mis des paramètres pour les polices, ça ne gène pas la mise en forme.

Reply

Marsh Posté le 13-03-2006 à 11:51:29    

Bin ... c'est à dire qu'en plus de ce que dis xtof_83

Citation :

Avec Firefox cela fonctionne impecable mais pas avec IE.


ça aide pas trop a voir ou est le problème...
 
Mais juste a regarder comme ça:
- dans le 1er tr tu as 17 cols ( 4+5+7+1)
- dans le 2eme 5 ( 2+2+1)
- dans le 3eme 3 ( 2+1)
...  
Je sais même pas comment ça peut marcher sous FF...

Message cité 1 fois
Reply

Marsh Posté le 13-03-2006 à 13:50:54    

anapajari a écrit :

Bin ... c'est à dire qu'en plus de ce que dis xtof_83

Citation :

Avec Firefox cela fonctionne impecable mais pas avec IE.


ça aide pas trop a voir ou est le problème...
 
Mais juste a regarder comme ça:
- dans le 1er tr tu as 17 cols ( 4+5+7+1)
- dans le 2eme 5 ( 2+2+1)
- dans le 3eme 3 ( 2+1)
...  
Je sais même pas comment ça peut marcher sous FF...


 
Oui tu as raison mais tu as oublié de tenir compte des rowspan donc on ne peut pas compter comme tu l'as fait.
Cela fonctionne bien sous firefox mais sous IE il y a un décalage des images; je n'ai pas bien saisi d'ou cela provenait.

Reply

Marsh Posté le 14-03-2006 à 15:45:33    

up

Reply

Marsh Posté le 14-03-2006 à 17:21:03    

Avec le code HTML assez moche meme très moche que tu nous as donné, la question ne se pose même plus.
Ton problème vient simplement du fait que tu veux utiliser une mise en page en tableau :/
Alors qu'une mise en page en CSS c'est super souple et très très très léger au niveau du code.
Si tu n'y arrives pas et ça ya pas de doute possible, tu poste ici la maquette de ton site ou ce que tu souhaite obtenir, sinon tu nous donne un lien vers ta page actuelle afin qu'on se fasse une idée de ce que tu cherches à faire et on peut te le faire. Ca te coute rien.

Reply

Marsh Posté le 16-03-2006 à 23:14:36    

ok j ai refais mon code avec des div et css.
cependant j'ai toujours un probleme qui est uniquement sur internet explorer.
 
Voila le code de ma page
 
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>test</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link href="css/styles2.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<center>
<div id="conteneur" >
 
<!-- header -->
 
        <ul id="menugauche">
           <li>
            <img src="images/haut.gif"  width=165 height=17 border=0 alt="bb">
           </li>
           <li>
               <a href="testdiv.html"><img name="home_page" src="images/home-page.gif" width=165 height=28 border=0 alt="home page"></a>
           </li>
         <li>
      <a href="historique.html"><img name="historique" src="images/historique.gif" width=165 height=24 border=0 alt="Historique"></a>
  </li>
                <li>
                     <a href="#"><img name="services" src="images/services.gif" width=165 height=24 border=0 alt="services"></a>
           </li>
           <li>
          <a href="#"><img name="products" src="images/products.gif" width=165 height=24 border=0 alt="products"></a>
           </li>
          <li>  
            <a href="#"><img name="support" src="images/support.gif" width=165 height=24 border=0 alt="support"></a>
           </li>
           <li>  
            <a href="#"><img name="news" src="images/news.gif" width=165 height=24 border=0 alt="news"></a>
           </li>
           <li>
            <a href="#"><img name="contacts" src="images/contacts.gif" width=165 height=24 border=0 alt="contacts"></a>
           </li>
           <li>
            <img name="m3" src="images/m3.gif" width=165 height=83 border=0 alt="">
           </li>
        </ul>
       
       
   <div id="droite">
         <img src="images/main2.gif" width=246 height=272 alt="">
        </div>
           
        <ul id="centre">
         <li>
          <img src="images/main1.gif" width=336 height=204 alt="">
         </li>
         
     <li id="textehaut">
      <span class="text7">blablablabal</span>  
     </li>  
       
    </ul>
 
 <!-- fin header -->  
   
  <!-- le coprs -->  
     
    <div id="corps">
        <p>blablablabla</p>
      </div>
 
 <!-- fin du corps -->
 
 <!-- footer -->
      <ul id="pied">
       <li class="text6">
  copyright 2006 &copy;  
 </li>    
 <li class="text6">  
   <a href="#">accueil</a> | <a href="#">plan du site</a> | <a href="#">mentions légales</a>  |  <a href="#">contact</a> | <a href="#">news</a>
 </li>
 </ul>
 
<!-- fin footer -->
     
</div>
</center>
</body>
 
</html>
 
 
 
et voici ma css  
 
 
body {
font-family: Verdana;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #525252;
padding: 0;
margin:0 ;
 
}
 
#conteneur {
width: 747px;
border: 1px solid black ;
}
 
 
#centre {
margin-left: 165px;
margin-right: 246px;
margin-top: 0px;
margin-bottom:10px;
padding: 0px;
border: 0px;
}
 
 
#centre li {
list-style-type: none;
}
 
 
#corps {
 
}
 
 
#textehaut {
width: 336px;
height: 68px;
font-family: tahoma;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
background-image:url("../images/main3.gif" );
}
 
 
#basheader {
margin-left: 165px;
padding: 0px;
border-width: 0px;
}
 
 
#gauche {
width:146px;
 
}
 
#droite {
 
float:right;
margin: 0px;
padding: 0px;
border-width: 0px;
display: inline;
}
 
 
 
#menugauche {
list-style-type: none;
margin-top: 5px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
float:left;
width: 165px;
border-width: 0px;
line-height: 0;
padding:0;
}
 
 
#menugauche li {
margin:0;
padding:0;
border:0;
display: inline;
 
}
 
#menugauche a {
color: #000000;
margin: 0px;
padding: 0px;
}
 
#menugauche a:hover {
text-decoration: none;
}
 
#menugauche img {
display: block;
}
 
#centre img {
display: block;
}
 
 
.text6 {
 font-family: tahoma;
 font-size: 10px;
 color: #000000;
 font-weight: bold;
}
 

Reply

Marsh Posté le 16-03-2006 à 23:14:36   

Reply

Marsh Posté le 17-03-2006 à 00:08:07    

:o  :o  :o  [:dahlia_noir]  :fou:  :fou:  :fou:  
 
Jamais tu vas les mettre tes balises CODE :

Code :
  1. [cpp] blablmbalablmabnkamna [/ cpp]

Reply

Marsh Posté le 17-03-2006 à 00:26:49    

sinon c'est quoi ton pb sous IE ?
au passage tu peux po uploader ton site sur le net ou juste ta page et les images, car la c'est galere a vouloir regarder ou est le probleme :o

Reply

Marsh Posté le 17-03-2006 à 09:18:31    

mon probleme sous IE est que la partie <ul id="centre">  dans le header ne s aligne pas avec les parties gauche et droite, elle est décalé en dessous, alors que sous firefox cela est bien aligné.
 
Sinon xtof_83 j'ai pas compris ce que tu as dis.

Message cité 1 fois
Reply

Marsh Posté le 17-03-2006 à 17:05:28    

achiou59 a écrit :

mon probleme sous IE est que la partie <ul id="centre">  dans le header ne s aligne pas avec les parties gauche et droite, elle est décalé en dessous, alors que sous firefox cela est bien aligné.
 
Sinon xtof_83 j'ai pas compris ce que tu as dis.


 
 
 :cry:  :cry:  :cry:  
 
Qu'on maméne une corde... vais me lyncher pendre.... :cry:  :cry:
 
EDIT: désolé je suis pas trés bon dans ce domaine... [:saulwilliams]


Message édité par xtof_83 le 17-03-2006 à 17:22:10
Reply

Marsh Posté le 17-03-2006 à 17:09:04    

la corde c'est pour se pendre à la base.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed