28221 sujets

CSS et mise en forme, CSS3

TD.maclasse *:hover et IE

Bonjour,

j'ai un tableau et je voudrais que chaque ligne s'affiche avec 1 caractère de haut. Le problème c'est que le contenu de certaines colonnes est "trop large" et il y a donc des retours à la ligne qui augmentent la hauteur de la ligne.

Je voudrais que ces colonnes s'affichent avec un caractère de haut
.CSS_COLMN_TXTL0 span
{
display:block;
color:red;
height:1em;
overflow:hidden;
}

<td class="CSS_COLMN_TXTL0" >
<span id="DTG_GRID1__ctl3_Label1">ici du texte</span></td>


et qu'au survol de la case la totalité du contenu s'affiche
a écrit :
.CSS_COLMN_TXTL0 span:hover
{
color:blue;
height:auto;
}


Dans l'exemple fourni (qui ne fonctionne pas sous IE) le contenu du div est un span mais idéalement j'aimerai que cela fonctionne quel que soit le contenu de la TD
Quelque chose comme
a écrit :
.CSS_COLMN_TXTL0 *:hover ????
{
color:blue;
height:auto;
}



Ci-dessous mes essais infructueux


<html>
<head>
<style>
/* avant le survol la hauteur est limitée */
.CSS_COLMN_TXTL0 span,
.CSS_COLMN_TXTL1 span
{
display:block;
color:red;
height:1em;
overflow:hidden;
}

/* NE FONTIONNE PAS sous IE: au survol la hauteur devrait s'adapter au contenu*/
.CSS_COLMN_TXTL0 span:hover,
.CSS_COLMN_TXTL1 span:hover
{
color:blue;
height:auto;
}

</style>
</head>


<body>


<table cellspacing="0" rules="all" border="1" id="DTG_GRID1" style="border-collapse:collapse;">
<tr class="CSS_TABLE_LINE0">


<td class="CSS_COLMN_TXTC0" >
<span id="DTG_GRID1__ctl3_Label1">texte_court_0</span></td>

<td class="CSS_COLMN_TXTC1" >
<span id="DTG_GRID1__ctl3_Label4">texte_court_0</span></td>

<td class="CSS_COLMN_TXTL0" >
<span id="DTG_GRID1__ctl3_Label10">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</span>
</td>


</tr>
<tr class="CSS_TABLE_LINE1">


<td class="CSS_COLMN_TXTC0" >
<span id="DTG_GRID1__ctl3_Label1">texte_court_1</span></td>

<td class="CSS_COLMN_TXTC1" >
<span id="DTG_GRID1__ctl3_Label4">texte_court_1</span></td>

<td class="CSS_COLMN_TXTL0" >
<span id="DTG_GRID1__ctl3_Label10">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</span>
</td>


</tr>


</table>
</body>
</html>

D'avance merci

V1nce
Bonjour V1nce et bienvenue à toi sur le forum Alsacréations.

Tu as un lien vers ta page pour que l'on puisse voir facilement toute la dynamique de ton problème ?

Sinon, n'hésites pas à faire remonter ton sujet en postant à nouveau. Smiley cligne
Désolé la page "réelle" n'est pas en ligne actuellement. Mais la page "exemple" est fonctionnelle (copier/coller dans un fichier). Dans Moz au survol la dernière colonne se "déploie" (plusieurs lignes visibles). dans IE rien ne se passe.
Sujet clos
Aller à