IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Bordures de tableaux sous IE


Sujet :

HTML

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    20
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 20
    Par défaut Bordures de tableaux sous IE
    Bonjour, voila j'ai créé une page en xHTML/CSS qui contient des tableaux. Sous firefox tout s'affiche correctement, par contre sous IE je n'ai pas les bordures de droites :S j'ai éssayé pas mal de solutions, rien a faire.

    Je laisse mon code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    <style type="text/css" media="all">
    BODY {
    	MARGIN:0px 0px 0px 0px;
    	PADDING:0px 0px 0px 0px;
    	background-image: url(<a href="http://www.adarinnovations.com/images/bg.gif);" target="_blank">http://www.adarinnovations.com/images/bg.gif);</a>
    	background-repeat:repeat-x;
    	BACKGROUND-COLOR:#FFFFFF;
    	text-align:center;
    }
    table {
    	border:0px;
    	border-collapse:collapse;
    	width:100%;
    	margin:auto;
    }
    td {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	color:#464646;
    	background-color:#FFFFFF;
    	border:1px solid #000000;
    	padding:5px;
    }
    .fonce { border:0; padding-left:0; }
    .title { font-size:14px; color:#2A4EB4; }
    </style>
    <title>Les lunettes du futur</title>
    <body>
    <br>
    <table>
      <tr>
        <td>
        <div style="float:left; padding-right:20px;"><img src="http://www.adarinnovations.com/images/adar.gif" alt="Adar Innovations" border="0" /></div>
        Sarl ADAR Innovations<br />
        13, Imp Théodore Lenotre<br />
     
        31500 Toulouse<br />
        <strong>Siret :</strong> 498 475 334 00013</td>
        <td width="220"><strong>Contact :</strong> Mr PADER St&eacute;phane<br />
          <strong>Email : </strong>stephane@adarinnovations.com<strong><br />
     
    T&egrave;l :</strong> +339 53 47 07 88<br />
    <strong>URL :</strong> http://www.adarinnovations.com</td>
      </tr>
    </table>
    <br />
    <table><tr><td class="title" style="text-align:center; padding:10px;"><p><strong>Fiche de Quotation : Les lunettes du futur </strong> (R&egrave;f RARG2-D)</p></td></tr></table>
     
    <br />
    <table>
      <tr>
        <td colspan="2" align="center" valign="middle"> <div style="position:absolute; width:350px; height:300px; background-color:#0000CC; float:left; margin:0; padding:0; left:5px;">
        IMAGE 350px max</div>
        <div style="margin-left:360px; text-align:left;">
          <p class="title"><u><strong>Sp&eacute;cifications Techniques :</strong></u></p>
          <p align="justify">tdhdghdgh df hdgh dg hdf hdhg dg hdf hdfhdf hdf hdfh df hgdf hdfhdfhdfhdf hdfh dhg dfh dfh dfh df hdfh gdf hdf hdf hdfh dfh dfh dfh dfh dfh dfh gf hdfh dfhdfhdfhdfh dfh dfh fdh dfh dfh dfh dfh d dfhdfhdfhfgh dfh dhgdfhdfhd dfh dfhdfhdfhdfhdfh</p>
     
          <table>
            <tr>
              <td colspan="4" class="fonce"><p class="title"><u><strong>Certificats</strong></u></p></td>
            </tr>
            <tr>
              <td width="95"><strong>CE</strong></td>
              <td colspan="3" >18/06/2007</td>
     
            </tr>
            <tr>
              <td><strong>ROHS</strong></td>
              <td colspan="3">19/06/2007</td>
            </tr>
            </table>
          <br />
            <table>
     
              <tr>
                <td colspan="4" class="fonce"><p class="title"><u><strong>Packaging</strong></u></p></td>
              </tr>
              <tr>
                <td><strong>Type :</strong></td>
                <td colspan="3">Boite color&eacute;e</td>
              </tr>
     
              <tr>
                <td><strong>Couleur(s) :</strong></td>
                <td colspan="3">Vert / Bleu / Rouge</td>
              </tr>
              <tr>
                <td width="95"><strong>Dimmensions :</strong></td>
                <td style="text-align:center;"><strong>l*L*H (cm)</strong></td>
     
                <td style="text-align:center;"><strong>Qt&eacute;/carton</strong></td>
                <td style="text-align:center;"><strong>Poids</strong></td>
              </tr>
              <tr>
                <td><strong>Packaging :</strong></td>
                <td style="text-align:center;">26.5*12*36</td>
     
                <td style="text-align:center;">1</td>
                <td style="text-align:center;">2 kg</td>
              </tr>
              <tr>
                <td><strong>Packing : </strong></td>
                <td style="text-align:center;">55*13*25</td>
                <td style="text-align:center;">8</td>
     
                <td style="text-align:center;">30 kg</td>
              </tr>
                            </table>
          <br />
            <table>
              <tr>
                <td colspan="2" class="fonce"><p class="title"><u><strong>Container</strong></u></p></td>
              </tr>
     
              <tr>
                <td width="95"><strong>Qt&eacute; / 20''</strong></td>
                <td>2000 PCS</td>
              </tr>
              <tr>
                <td><strong>Qt&eacute; / 40''</strong></td>
     
                <td>4000 PCS</td>
              </tr>
              <tr>
                <td><strong>Qt&eacute; / 40'' HQ</strong></td>
                <td>4800 PCS</td>
              </tr>
     
              <tr>
                <td><strong>Temps de prod.</strong></td>
                <td>30 jours</td>
              </tr>
              <tr>
                <td><strong>MOQ</strong></td>
                <td>1000 PCS</td>
     
              </tr>
             </table>
            </div></td>
      </tr>
      <tr>
        <td width="350" style="border-right:0;">
        <table>
          <tr>
            <td colspan="2" class="fonce"><p class="title"><strong><u>Offre</u></strong></p></td>
     
          </tr>
          <tr>
            <td width="50%"><strong>Quantit&eacute;</strong></td>
            <td width="50%">1000</td>
          </tr>
          <tr>
            <td><strong>Prix :</strong></td>
     
            <td>35.6</td>
          </tr>
          <tr>
            <td><strong>Devise :</strong></td>
            <td>USD</td>
          </tr>
          <tr>
     
            <td><strong>Incoterm :</strong></td>
            <td>FOB</td>
          </tr>
          <tr>
            <td><strong>Terme de payment :</strong></td>
            <td>TT</td>
          </tr>
     
          <tr>
            <td><strong>Port de chargement :</strong></td>
            <td>GUANG ZHOU</td>
          </tr>
        </table></td>
        <td align="left" valign="top" style="border-left:0;"><p class="title"><u><strong>Commentaires :</strong></u></p>
          <p>bla bla bla bla</p>
     
          <p style="position:absolute; bottom:0px; right:0px;">Offre valable jusqu'au <strong>12/12/2007</strong></p>
        </td>
      </tr>
    </table>
    <br />
    </body>
    Si jamais quelqu'un a déja été confronté a ce problème, ça m'intéresse, parce que là, ça fait un bon moment que je coince.

    Merci d'avance

  2. #2
    Membre éclairé Avatar de StAfX
    Profil pro
    Étudiant
    Inscrit en
    Novembre 2007
    Messages
    63
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Novembre 2007
    Messages : 63
    Par défaut
    Salut,

    si tu supprimes
    border-collapse:collapse;

    de ton tag 'table', pour moi ça s'affiche normalement sour IE7 et FF.

    je ne vois pas d'autre pbs.



    Stef.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Avril 2007
    Messages
    20
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2007
    Messages : 20
    Par défaut
    Non ça ne change rien :/

  4. #4
    Membre éclairé Avatar de copin
    Homme Profil pro
    Webmaster
    Inscrit en
    Mai 2005
    Messages
    231
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mai 2005
    Messages : 231
    Par défaut
    La fermeture de ton </div> n'est pas placé au bon endroit.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
     
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css" media="all">
    BODY {
    MARGIN:0px 0px 0px 0px;
    PADDING:0px 0px 0px 0px;
    background-image: url(http://www.adarinnovations.com/images/bg.gif);
    background-repeat:repeat-x;
    BACKGROUND-COLOR:#FFFFFF;
    text-align:center;
    }
    table {
    border:0px;
    border-collapse:collapse;
    width:100%;
    margin:auto;
    }
    td {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#464646;
    background-color:#FFFFFF;
    border:1px solid #000000;
    padding:5px;
    }
    .fonce { border:0; padding-left:0; }
    .title { font-size:14px; color:#2A4EB4; }
     
    .table2{width:70%}
    </style>
    <title>Les lunettes du futur</title>
    </head>
    <body>
    <br>
    <table>
    <tr>
    <td>
    <div style="float:left; padding-right:20px;"><img src="http://www.adarinnovations.com/images/adar.gif" alt="Adar Innovations" border="0" /></div>
    Sarl ADAR Innovations<br />
    13, Imp Théodore Lenotre<br />
     
    31500 Toulouse<br />
    <strong>Siret :</strong> 498 475 334 00013</td>
    <td width="220"><strong>Contact :</strong> Mr PADER St&eacute;phane<br />
    <strong>Email : </strong>stephane@adarinnovations.com<strong><br />
     
    T&egrave;l :</strong> +339 53 47 07 88<br />
    <strong>URL :</strong> http://www.adarinnovations.com</td>
    </tr>
    </table>
    <br />
    <table><tr><td class="title" style="text-align:center; padding:10px;"><p><strong>Fiche de Quotation : Les lunettes du futur </strong> (R&egrave;f RARG2-D)</p></td></tr></table>
     
    <br />
     
    <table>
    <tr>
    <td colspan="2" align="center" valign="middle"> <div style="position:absolute; width:350px; height:300px; background-color:#0000CC; float:left; margin:0; padding:0; left:5px;">
    IMAGE 350px max</div>
    <div style="margin-left:360px; text-align:left;">
    <p class="title"><u><strong>Sp&eacute;cifications Techniques :</strong></u></p>
    <p align="justify">tdhdghdgh df hdgh dg hdf hdhg dg hdf hdfhdf hdf hdfh df hgdf hdfhdfhdfhdf hdfh dhg dfh dfh dfh df hdfh gdf hdf hdf hdfh dfh dfh dfh dfh dfh dfh gf hdfh dfhdfhdfhdfh dfh dfh fdh dfh dfh dfh dfh d dfhdfhdfhfgh dfh dhgdfhdfhd dfh dfhdfhdfhdfhdfh</p>
    </div>
    <div align="right">
          <table class="table2">
            <tr>
    <td colspan="4" class="fonce"><p class="title"><u><strong>Certificats</strong></u></p></td>
    </tr>
    <tr>
    <td width="95"><strong>CE</strong></td>
    <td colspan="3" >18/06/2007</td>
     
    </tr>
    <tr>
    <td><strong>ROHS</strong></td>
    <td colspan="3">19/06/2007</td>
    </tr>
    </table>
    <br />
    <table class="table2">
     
    <tr>
    <td colspan="4" class="fonce"><p class="title"><u><strong>Packaging</strong></u></p></td>
    </tr>
    <tr>
    <td><strong>Type :</strong></td>
    <td colspan="3">Boite color&eacute;e</td>
    </tr>
     
    <tr>
    <td><strong>Couleur(s) :</strong></td>
    <td colspan="3">Vert / Bleu / Rouge</td>
    </tr>
    <tr>
    <td width="95"><strong>Dimmensions :</strong></td>
    <td style="text-align:center;"><strong>l*L*H (cm)</strong></td>
     
    <td style="text-align:center;"><strong>Qt&eacute;/carton</strong></td>
    <td style="text-align:center;"><strong>Poids</strong></td>
    </tr>
    <tr>
    <td><strong>Packaging :</strong></td>
    <td style="text-align:center;">26.5*12*36</td>
     
    <td style="text-align:center;">1</td>
    <td style="text-align:center;">2 kg</td>
    </tr>
    <tr>
    <td><strong>Packing : </strong></td>
    <td style="text-align:center;">55*13*25</td>
    <td style="text-align:center;">8</td>
     
    <td style="text-align:center;">30 kg</td>
    </tr>
    </table>
    <br />
    <table class="table2">
    <tr>
    <td colspan="2" class="fonce"><p class="title"><u><strong>Container</strong></u></p></td>
    </tr>
     
    <tr>
    <td width="95"><strong>Qt&eacute; / 20''</strong></td>
    <td>2000 PCS</td>
    </tr>
    <tr>
    <td><strong>Qt&eacute; / 40''</strong></td>
     
    <td>4000 PCS</td>
    </tr>
    <tr>
    <td><strong>Qt&eacute; / 40'' HQ</strong></td>
    <td>4800 PCS</td>
    </tr>
     
    <tr>
    <td><strong>Temps de prod.</strong></td>
    <td>30 jours</td>
    </tr>
    <tr>
    <td><strong>MOQ</strong></td>
    <td>1000 PCS</td>
     
    </tr>
    </table>
    </div>
        </td>
    </tr>
    <tr>
    <td width="350" style="border-right:0;">
    <table>
    <tr>
    <td colspan="2" class="fonce"><p class="title"><strong><u>Offre</u></strong></p></td>
     
    </tr>
    <tr>
    <td width="50%"><strong>Quantit&eacute;</strong></td>
    <td width="50%">1000</td>
    </tr>
    <tr>
    <td><strong>Prix :</strong></td>
     
    <td>35.6</td>
     
    </tr>
    <tr>
    <td><strong>Devise :</strong></td>
    <td>USD</td>
    </tr>
    <tr>
     
    <td><strong>Incoterm :</strong></td>
    <td>FOB</td>
    </tr>
    <tr>
    <td><strong>Terme de payment :</strong></td>
    <td>TT</td>
    </tr>
     
    <tr>
    <td><strong>Port de chargement :</strong></td>
    <td>GUANG ZHOU</td>
    </tr>
    </table></td>
    <td align="left" valign="top" style="border-left:0;"><p class="title"><u><strong>Commentaires :</strong></u></p>
    <p>bla bla bla bla</p>
     
    <p style="position:absolute; bottom:0px; right:0px;">Offre valable jusqu'au <strong>12/12/2007</strong></p>
    </td>
    </tr>
    </table>
    <br />
    </body>
    Dans le code tu remonte la fermeture du </div>
    J'ai créé une class="table2" pour spécifier une taille de tableau
    Ensuite t'es 3 tableau tu les places dans une div que tu alignes à droite.

    edit: Pour FF, tu peux virer le margin:auto de la balise <table>, c'est ca qui te centre les tableaux.

    Petit conseil: Evite d'utiliser les tableaux pour de la mise en page. Privilégie l'utilisation de <div>

    Essai de mettre tout tes styles dans la css (par exemple le style de ton <div> bleu) afin d'éclaircir le code.

  5. #5
    Membre éclairé Avatar de EIN-LESER
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mai 2008
    Messages
    703
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Marne (Champagne Ardenne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Service public

    Informations forums :
    Inscription : Mai 2008
    Messages : 703
    Par défaut
    Au risque de mettre les pieds dans le plat et de passer pour un rabat-joie:
    Habitus toi à mettre ton code CSS dans une page CSS a part.
    Non seulement sa facilite la lecture et le codage mais en plus quand tu a un soucis comme sa te permets de faire tes tests plus facilement en changent simplement la page CSS attaché.

Discussions similaires

  1. Réponses: 4
    Dernier message: 14/04/2011, 11h28
  2. [css] [XHTML 1.1] bordures sans tableaux
    Par chillansky dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 13/06/2006, 13h06
  3. Réponses: 3
    Dernier message: 03/04/2006, 09h51
  4. [W3C] Parlons bordure et positionnement sous IE6.0 et FF
    Par bébé dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 02/10/2005, 19h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo