Merci IE 1H de perdue

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par dorian53, 9 Septembre 2006.

  1. dorian53
    dorian53 WRInaute passionné
    Inscrit:
    10 Avril 2005
    Messages:
    1 886
    J'aime reçus:
    1
    Salut,

    Voici un code tout simplifié qui ne fonctionne pas du tout sous IE, quelle daube j'ai perdu 1 heure !
    La 2ème colonne ne fait pas 100px à cause du colspan ci-dessous avec beaucoup de texte (si le texte ne va pas au bout de la ligne pas de problème).

    Vous pouvez me confirmer que c'est bien un bug ? Ou y'a un pb sur le code ou chez moi.

    (Firefox pas de soucis)


    Code:
    <table style="width:100%;" border="1">
    <tr>
    <td>Pas de taille</td>
    <td style="width:100px;">100 px</td>
    </tr>
    <tr><td colspan="2">
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte 
    </td></tr>
    </table>
     
  2. sonikbuzz
    sonikbuzz WRInaute occasionnel
    Inscrit:
    21 Février 2005
    Messages:
    398
    J'aime reçus:
    0
    Salut,
    1 heure de perdu a cause d'IE ca va encore. Je dois en être à quelques jours de perdus avec des sites en full css :twisted: .

    J'ai pas de reponse à ta question mais je crois bien que c'est un des sales trucs d'IE .
     
  3. david96
    david96 WRInaute passionné
    Inscrit:
    28 Août 2005
    Messages:
    1 204
    J'aime reçus:
    0
    Tu emplois la taille en pourcentage pour le tableau (ce qui est très bien) et ensuite en pixel pour les colonnes !
    Continue sur la même lancée des pourcentages et ça fonctionne !

    Code:
    <table style="width:100%" border="1">
    <tr>
    <td style="width:90%" >Pas de taille</td>
    <td style="width:10%">10%</td>
    </tr>
    <tr>
    <td colspan="2">
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
    Texte Texte Texte Texte Texte Texte Texte Texte Texte Texte
    </td>
    </tr>
    </table>
    Et pour bien faire mieux vaut mettre ces attributs dans un fichier css ;-)
     
  4. dorian53
    dorian53 WRInaute passionné
    Inscrit:
    10 Avril 2005
    Messages:
    1 886
    J'aime reçus:
    1
    La feuille de style bien sûr, mais c'était pour l'exemple.

    J'ai un site redimensionnable donc 100% pour le <table.
    Et un titre de colonne à taille fixe ; donc je ne veux pas de pourcentages ; je ne veux pas d’une grande colonne (pour grandes résolutions - place perdue et moche), ou d’un titre sur deux lignes (pour les petites).

    Je suis obligé de faire des <tr des <table à part entiere.

    J'avais déjà rencontré des soucis avec IE mais pour réaliser des choses complexes. Là, c'est quelque chose de simple, (même sans interprétation css, la taille pourrait être en attribut du table) que IE n'est pas capable d'interprété.

    Affreux :?
     
  5. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    si tu veux que ca marches sur tous les navigateurs, vire ton tableau et gere ca avec 2 divs dont un en float:right (css power)
     
  6. sonikbuzz
    sonikbuzz WRInaute occasionnel
    Inscrit:
    21 Février 2005
    Messages:
    398
    J'aime reçus:
    0
    css power mais sans IE et j'ai bien peur que ca ne s'arrange pas avec la version 7 ....
     
  7. narayana
    narayana WRInaute impliqué
    Inscrit:
    28 Janvier 2005
    Messages:
    727
    J'aime reçus:
    0
    Si tu as des données ordonnées à afficher alors des tableaux
    Si tu as du texte à afficher alors css
    :wink:
     
  8. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    >> css power mais sans IE

    ? aucun problemes avec ie
     
  9. dorian53
    dorian53 WRInaute passionné
    Inscrit:
    10 Avril 2005
    Messages:
    1 886
    J'aime reçus:
    1
    Injouable, ce sont des données tabulaires, et les floats ne sont pas exempt de tout reproche, loin de là.
     
  10. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    >> et les floats ne sont pas exempt de tout reproche, loin de là.

    un exemple ? :)
     
  11. animostab
    animostab WRInaute discret
    Inscrit:
    14 Mai 2005
    Messages:
    133
    J'aime reçus:
    1
    Comme ce sont des données tabulaires c'est bien une balise table qui oit etre utilisée. Soit tu fais ton tableau entierement en pourcentage soit entierement en taille fixe mais evite de mélanger les deux.

    Pour le css on peux egalement donner des attributs css aux balises de tableau ce qui evite la lourdeur de code ds le html
     
  12. sonikbuzz
    sonikbuzz WRInaute occasionnel
    Inscrit:
    21 Février 2005
    Messages:
    398
    J'aime reçus:
    0
    Tu veux des exemples de hack obligatoire pour IE lorsqu'on utilise float entre autre ?
    Voila un extrait d'un de mes fichiers .css rempli de hack en tous genre juste pour faire en sorte que Mister IE (et IE mac 2 pour le prix d'un :lol: ) veuille bien afficher correctement des floats imbriqués :

    Code:
    .outer {
    position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
    margin-left: 172px;    /*** Critical left col dimension value ***/
    width: 524px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
    background: #fff url(images/brownswirl.gif);  /*** Sets background of center col***/
    border-left: 0px solid #000;   /*** Critical left divider dimension value ***/
    border-right: 0px solid #000;   /*** Critical right divider dimension value ***/
    }
    
    * html .outer {   /*** IE5.x/win box model fix ***/
    width: 526px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
    wid\th: 524px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
    }
    
    .float-wrap {
    float: left;
    width: 524px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
    margin-right: -1px;   /*** Static fix ***/
    }
    
    * html .float-wrap {
    width: 527px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
    
    }
    
    .center {
    float: right;
    width: 513px;   /*** Critical left and right col/divider dimension value (moves inversly) ***/
    margin-bottom: -1px;   /*** Fixes a variance in IE/win for the green AP bottom boxes ***/
    /* \*/
    margin-left: -1px; 
    /* Hidden from IE-mac */
    padding-left: 6px;
    padding-right: 5px;
    }
    * html .center {
    padding-right: 8px;
    }
    
    .left {
    position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
    width: 167px;    /*** Critical left col/divider dimension value ***/
    margin-left: -166px;    /*** Critical left col/divider dimension value ***/
    }
    
    * html .left {
    float:left;	
    }
    
    *>html .left {width:166px;}   /*** Fix only for IE/Mac ***/
    
    
    .right {
    float: left; 
    position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
    width: 167px;    /*** Critical right col/divider dimension value ***/
    margin-right: -165px;    /*** Critical right col/divider dimension value ***/
    margin-left: -1px;   /*** Static fix ***/
    }
    
    /* \*/
    * html .right {
    margin-left: 0px; 
    margin-right: -550px;
    mar\gin-right: -167px;
    }
    
    
    .container-right { 
    /* \*/width: 160px;/* Hidden from IE-Mac */   /*** Critical right col dimension value ***/
    margin-left: 4px;    /*** Critical right divider dimension value ***/
    padding-bottom: 0px;   /*** To keep content from going underneath the AP bottom boxes ***/
    background: #F1F1F1;
    }
    
    /* \*/
    * html .container-right {
    float: left;
    margin-left: 4px; 
    mar\gin-left: 0px;
    }
    /*** Static fixes ***/
    
    /*** Below is the Holly hack, and if IE/Win shows bugs it's a good idea to apply this hack to 
    	different elements and see if that fixes the problem. Sometimes it may be necessary 
    	to use "position: relative;" on certain elements, but it's hard to tell in advance which 
    	elements will need such fixes. Here it prevents IE5/Win from clipping the left ends 
    	of the headings. ***/
    /* \*/
    /** html h2 {height: 1%;}*/
    /* */
    
    
    /*** This is a fix for IE5/Win at the largest text size setting. ***/
    /* \*/
    * html .left {margin-right: -3px;}
    /* */
    
    Alors c'est vrai y'a pas de problème avec IE il suffit juste de faire un .css juste pour lui (et les personnes qui l'utilisent encore :twisted: ) .
    Et lorsque je vois ce qu'il se prepare avec IE7 ... je peux te dire que microsoft n'a encore abandonné l'idée d'imposer ses standard web.
     
  13. dorian53
    dorian53 WRInaute passionné
    Inscrit:
    10 Avril 2005
    Messages:
    1 886
    J'aime reçus:
    1

    Incapacité de définir la hauteur d'un float pour le bloc conteneur.

    <div id="bug">
    <img src="..." alt=".." style="float:left;" />
    </div>

    <div>Doit être en dessous</div>

    div#bug { est incapable de prendre en compte la hauteur de l'image en float }
     
  14. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    tu peux : http://www.aidenet.com/css/css38m.htm (dans ton cas, un <hr> en left)
    => css power :)

    et tu parles de données tabulaire, mais dans ton exemple donné, je ne vois pas en quoi ce sont des données tabulaires, c'est juste un "menu droite". à moins que ce soit pour autre chose. mais pour des données tabulaires, sans s'ennuyer faire un tableau, sinon en css avec des <span> et les bonnes classes css associées
     
  15. dorian53
    dorian53 WRInaute passionné
    Inscrit:
    10 Avril 2005
    Messages:
    1 886
    J'aime reçus:
    1
    Comme tu le dis, c'est un exemple.


    Le lien aidenet n'est pas représentatif des problèmes rencontrés puisqu'il indique des tailles à ses blocs float.

    Ce qui m'interesse, c'est le problème rencontré avec un float à contenu dynamique dont on ne connait pas la taille.

    Je refais référence au post précédent (même s'il est techniquement possible de connaitre la taille de l'image, encore une fois c'est un exemple :) )
    Code:
    <div id="bug">
    <img src="..." alt=".." style="float:left;" />
    </div>
    
    <div>Doit être en dessous</div>
    
    div#bug { est incapable de prendre en compte la hauteur de l'image en float }
    Pour bien faire affiche une bordure à #bug
     
  16. rog
    rog WRInaute passionné
    Inscrit:
    21 Septembre 2006
    Messages:
    1 346
    J'aime reçus:
    0
    j'ai toujours pas compris le probleme

    le colspan va fusionner tes cellules en lui attribuant une taille = à la somme des cellules fusionnées

    mais la taille d'une cellule n'est pas forcement égale à la declaration, elle va dependre aussi de ce que tu vas lui insérer

    eg : si tu declares une cellule width="25" et que tu lui mets un input ou une image plus grande, la cellule sera redimentionnée automatiquement

    rog
     
  17. dorian53
    dorian53 WRInaute passionné
    Inscrit:
    10 Avril 2005
    Messages:
    1 886
    J'aime reçus:
    1
    Le problème ne vient pas de la cellule fusionnée mais de celle du dessus qui possède une taille non respectée.

    L'idéal est que tu c/c l'exemple du premier post pour te rendre compte.
     
  18. narayana
    narayana WRInaute impliqué
    Inscrit:
    28 Janvier 2005
    Messages:
    727
    J'aime reçus:
    0
    C'est quoi tous ces hack 8O
    tu mets pas ca par hasard au début de ton css

    Code:
    * {padding:0;margin:0}
     
Chargement...
Similar Threads - perdue Forum Date
Rester positionné sur une requête perdue dans le contenu ! Débuter en référencement 26 Juillet 2012
Images des rich snippets perdues Problèmes de référencement spécifiques à vos sites 13 Janvier 2012
Indexer un nouveau site après changement d'URL...Ancienne URL perdue! Problèmes de référencement spécifiques à vos sites 29 Août 2011
J'ai perdue ma balise WRI Débuter en référencement 11 Mars 2011
Mon site n'apparait pas quand je tape les mots clefs, help, je suis perdue! Débuter en référencement 13 Janvier 2011
Je suis perdue... Débuter en référencement 26 Octobre 2010
Un peu perdue dans ma stratégie de référencement :o( Problèmes de référencement spécifiques à vos sites 27 Avril 2010
Referenceurs, devis, debutante. Je suis perdue Débuter en référencement 18 Février 2010
positions perdues une semaine sur deux Référencement Google 29 Décembre 2008
Indexation de ma page d'accueil perdue Problèmes de référencement spécifiques à vos sites 30 Août 2008
Je suis une débutante perdue et noyée dans l'info !!! Débuter en référencement 3 Avril 2008
je suis débutante et je suis perdue Débuter en référencement 22 Février 2008
1ère place de perdue... :'( Problèmes de référencement spécifiques à vos sites 14 Novembre 2007
de l'aide pour Preferred domain de Google, je suis perdue ! Crawl et indexation Google, sitemaps 1 Septembre 2007
mon url perdue ds les méandres du web chez google Crawl et indexation Google, sitemaps 1 Février 2007
Nouvelle et un peu perdue. Débuter en référencement 9 Janvier 2007
Formulaire de Contact GG -> perdue Crawl et indexation Google, sitemaps 21 Octobre 2006
Perdue dans phpMyAdmin 2.6.3-pl1 Développement d'un site Web ou d'une appli mobile 17 Mai 2006
Besoin d'aide svp , je suis completement perdue ... Débuter en référencement 2 Août 2005
Je suis perdue. Mon site phpbb. est inconnu URL Rewriting et .htaccess 12 Juillet 2005