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 :

[IE 7] fieldset et legend probleme hauteur


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre très actif
    Profil pro
    Inscrit en
    Février 2006
    Messages
    235
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Février 2006
    Messages : 235
    Par défaut [IE 7] fieldset et legend probleme hauteur
    Bonjour,

    Voila j'ai remarquer un problème très ennuyeux avec IE7

    Dans ce code j'affiche un bête fieldset qui prend 100% de la hauteur de la page. Et ce fieldset contient une table de hauteur 100%.

    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html>
    <head>
    <style>
    html, body
    {
        height:100%;
        margin:0;
        padding:0;
    }
     
    </style>
    </head>
     
    <body>
     
    <fieldset style="height:100%;">
    <legend>titre</legend>
        <table style="height:100%;border:solid 1px red;" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    test
                </td>
            </tr>
        </table>
    </fieldset>
     
    </body>
    </html>

    Dans IE6 il s'affiche correctement, mais dans IE7 le tableau depasse le fieldset !!!! (n'importe nawak !). Si je retire le <legend>, le tableau ne depasse plus le fieldset.

    Quelqu'un peut m'aider à résoudre ce problème. Merci d'avance !

  2. #2
    Membre émérite Avatar de fallais
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Juillet 2006
    Messages
    858
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux

    Informations forums :
    Inscription : Juillet 2006
    Messages : 858
    Par défaut
    Met des padding a ton fieldset

  3. #3
    Membre très actif
    Profil pro
    Inscrit en
    Février 2006
    Messages
    235
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Février 2006
    Messages : 235
    Par défaut
    j'y ai pensé mais le problème c'est que la taille n'est plus à 100% mais 100%+padding et j'ai de joli ascensseur...

    donc ce n'est pas vraiment une solution pour moi

  4. #4
    Membre très actif
    Profil pro
    Inscrit en
    Février 2006
    Messages
    235
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations forums :
    Inscription : Février 2006
    Messages : 235
    Par défaut
    Je viens de faire mon propre fieldset qui regle le problème !

    Je poste ma solution pour ceux à qui cela pouraient interessé !

    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
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <style>
    html, body
    {
            height:100%;
            margin:0px;
    }
     
    .myFieldset
    {
            padding-top:5px;
            border:solid 1px blue;
            vertical-align:top;
    }
     
    .myLegend
    {
            display: inline;
            position:relative;
            top: -15px;
            left:10px;
            vertical-align:top;
            background-color:white;
    }
    </style>
     
    </head>
    <body>
     
    <br />
     
    <div class="myFieldset" style="height:40%;">
    	<div style="position:absolute;"><div class="myLegend" style=" ">TITRE</div></div>
    	<table style="display:inline;height:100%; left:0; position:relative;" border="1"><tr><td>TEST</td></tr></table>
    </div>
     
    <br />
     
    <div class="myFieldset" style="height:40%;">
    	<div style="position:absolute;"><div class="myLegend">TITRE</div></div>
    	<table style="display:inline; height:100%;" border="1"><tr><td>TEST</td></tr></table>
    </div>
     
    </body>
    </html>
    note : adapté la couleur des 'legend' selon votre site...

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Probleme Hauteur de div
    Par bentsen dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 16/08/2008, 18h31
  2. probleme hauteur d une cellule
    Par fantomas261 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 31/07/2007, 15h55
  3. [HTML] Fieldset et Legend
    Par lenoil dans le forum Balisage (X)HTML et validation W3C
    Réponses: 6
    Dernier message: 05/12/2006, 17h18
  4. probleme bizarre de hauteur auto d'une ligne dans un tableau
    Par zax-tfh dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 17/01/2005, 23h34
  5. Problème hauteur div avec IE
    Par keup dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 25/11/2004, 12h20

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