Merci IE 1H de perdue

[dorian53]

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)

<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>

 

[sonikbuzz]

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 .

 

[david96]

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 !

<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 ;-)

 

[dorian53]

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 :?

 

[e-kiwi]

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)

 

[sonikbuzz]

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)

css power mais sans IE et j'ai bien peur que ca ne s'arrange pas avec la version 7 ....

 

[narayana]

Si tu as des données ordonnées à afficher alors des tableaux
Si tu as du texte à afficher alors css
:wink:

 

[e-kiwi]

>> css power mais sans IE

? aucun problemes avec ie

 

[dorian53]

Injouable, ce sont des données tabulaires, et les floats ne sont pas exempt de tout reproche, loin de là.

 

[e-kiwi]

>> et les floats ne sont pas exempt de tout reproche, loin de là.

un exemple ?

 

[animostab]

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

 

[sonikbuzz]

>> et les floats ne sont pas exempt de tout reproche, loin de là.
un exemple ?

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 :

.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.

 

[dorian53]

>> et les floats ne sont pas exempt de tout reproche, loin de là.

un exemple ?

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 }

 

[e-kiwi]

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

 

[dorian53]

et tu parles de données tabulaire, mais dans ton exemple donné, je ne vois pas en quoi ce sont des données tabulaires

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 )

<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

 

[rog]

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

 

[dorian53]

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.

 

[narayana]

>> et les floats ne sont pas exempt de tout reproche, loin de là.
un exemple ?

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 :

.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;}
/* */

C'est quoi tous ces hack 8O
tu mets pas ca par hasard au début de ton css

* {padding:0;margin:0}