porcinet_fr

[CSS]Problème calque height=100% Firefox et IE

Bonjour,

J'ai un petit problème d'affichage avec des calques sous firefox alors que sous IE tout marche parfaitement.

Internet Explorer :

Firefox :

Voici le source de ma page

<body bgcolor="#DFE4F2">
<div align="center">

<table cellpadding="0" cellspacing="0" border="1" width="300">
<tr>
<td style='height:100%;'>

<SPAN style='position: absolute; height:100%;'>
<table cellpadding=0 cellspacing=0 width=296 height=100%>
<tr>
<td bgcolor=#667ECE></td><td bgcolor=#677fce></td><td bgcolor=#6980ce></td><td bgcolor=#6a81cf></td>
<td bgcolor=#6c83cf></td><td bgcolor=#6d84d0></td><td bgcolor=#6f85d0></td><td bgcolor=#7087d1></td>
<td bgcolor=#7288d1></td><td bgcolor=#7389d2></td><td bgcolor=#758bd2></td><td bgcolor=#778cd3></td>
<td bgcolor=#788dd3></td><td bgcolor=#7a8ed4></td><td bgcolor=#7b90d4></td><td bgcolor=#7d91d5></td>
<td bgcolor=#7e92d5></td><td bgcolor=#8094d6></td><td bgcolor=#8195d6></td><td bgcolor=#8396d7></td>
<td bgcolor=#8498d7></td><td bgcolor=#8699d8></td><td bgcolor=#879ad8></td><td bgcolor=#899bd9></td>
<td bgcolor=#8b9dd9></td><td bgcolor=#8c9eda></td><td bgcolor=#8e9fda></td><td bgcolor=#8fa1db></td>
<td bgcolor=#91a2db></td><td bgcolor=#92a3dc></td><td bgcolor=#94a5dc></td><td bgcolor=#95a6dd></td>
<td bgcolor=#97a7dd></td><td bgcolor=#98a9de></td><td bgcolor=#9aaade></td><td bgcolor=#9cabdf></td>
<td bgcolor=#9dacdf></td><td bgcolor=#9faee0></td><td bgcolor=#a0afe0></td><td bgcolor=#a2b0e1></td>
<td bgcolor=#a3b2e1></td><td bgcolor=#a5b3e2></td><td bgcolor=#a6b4e2></td><td bgcolor=#a8b6e3></td>
<td bgcolor=#a9b7e3></td><td bgcolor=#abb8e4></td><td bgcolor=#adb9e4></td><td bgcolor=#aebbe5></td>
<td bgcolor=#b0bce5></td><td bgcolor=#b1bde6></td><td bgcolor=#b3bfe6></td><td bgcolor=#b4c0e7></td>
<td bgcolor=#b6c1e7></td><td bgcolor=#b7c3e8></td><td bgcolor=#b9c4e8></td><td bgcolor=#bac5e9></td>
<td bgcolor=#bcc6e9></td><td bgcolor=#bec8ea></td><td bgcolor=#bfc9ea></td><td bgcolor=#c1caeb></td>
<td bgcolor=#c2cceb></td><td bgcolor=#c4cdec></td><td bgcolor=#c5ceec></td><td bgcolor=#c7d0ed></td>
<td bgcolor=#c8d1ed></td><td bgcolor=#cad2ee></td><td bgcolor=#cbd4ee></td><td bgcolor=#cdd5ef></td>
<td bgcolor=#cfd6ef></td><td bgcolor=#d0d7f0></td><td bgcolor=#d2d9f0></td><td bgcolor=#d3daf1></td>
<td bgcolor=#d5dbf1></td><td bgcolor=#d6ddf2></td><td bgcolor=#d8def2></td><td bgcolor=#d9dff3></td>
<td bgcolor=#dbe1f3></td><td bgcolor=#dce2f4></td><td bgcolor=#dee3f4></td><td bgcolor=#e0e4f5></td>
<td bgcolor=#e1e6f5></td><td bgcolor=#e3e7f6></td><td bgcolor=#e4e8f6></td><td bgcolor=#e6eaf7></td>
<td bgcolor=#e7ebf7></td><td bgcolor=#e9ecf8></td><td bgcolor=#eaeef8></td><td bgcolor=#eceff9></td>
<td bgcolor=#edf0f9></td><td bgcolor=#eff1fa></td><td bgcolor=#f1f3fa></td><td bgcolor=#f2f4fb></td>
<td bgcolor=#f4f5fb></td><td bgcolor=#f5f7fc></td><td bgcolor=#f7f8fc></td><td bgcolor=#f8f9fd></td>
<td bgcolor=#fafbfd></td><td bgcolor=#fbfcfe></td><td bgcolor=#fdfdfe></td><td bgcolor=#feffff></td>
</tr>
</table>
</span>

<SPAN style='z-index:1;position: relative; top:0;'>
<b><div align=center>Veuillez vous identifier</div></b>
</span>
</td>

</tr>
<tr>
<td align="center"><br>
<form action="login2.php" method="post">
<b>Nom d'utilisateur : </b><input name="nom" type="text"><br>
<b>Mot de passe : </b><input name="pwd" type="password"><br><br>
<input name="" type="submit" value="Login">
</form>
</td>

</tr>
</table>

En faite j'ai crée un script qui génère un dégradé sous forme d'un tableau et j'utilise les calques <span> pour positionner le dégradé en arrière plan d'une cellule d'un tableau. Cet arrière plan doit être de la même hauteur que la cellule c'est pour celà que j'ai utilisé "100%".
Je cherche une solution qui soit compatible avec IE et firefox.

Merci d'avance.

Firefox, Php, Internet Explorer

deltree

le 11 Juill. 05 à 15h49

tu utilise 100 colonnes différentes pour créer ton dégrédé, dans ce cas on devrais avoir un colspan=100 pour la 2ème ligne.

Sinon, ça m'a l'air d'une méthode "overkill" pour un dégradé

Edit: je n'y suis pas du tout, un tableau dans un tableau ok (argggg.)
mais c'est la hauteur 100% de ton tableau qui pose problème, j'ai mis 30 et ça commence à donner quelque chose.
Faut vraiment que j'ai rien d'autre à faire.

blackwizard74

le 11 Juill. 05 à 16h06

pour le dégradé:

Code :

FILTER: progid:DXImageTransform.Microsoft.Alpha( style=1,opacity=25,finishOpacity=100,startX=0,finishX=100,startY=100,finishY=0);

peut etre que ça c moins bourrin, mais ça marche avec ie only
.. quand microsoft invente ses css

bon apres moi j'ai juste chercher "css fade color" sur google
peut etre qu'avec d'autrs mots clés ..

porcinet_fr

le 11 Juill. 05 à 16h08

Le problème c'est que le texte peut éventuellement faire plusieurs lignes et à ce moment là si on défini une hauteur fixe height=30 le dégradé ne remplira pas toute la cellule

deltree

le 11 Juill. 05 à 16h21

porcinet_fr a écrit:
Le problème c'est que le texte peut éventuellement faire plusieurs lignes et à ce moment là si on défini une hauteur fixe height=30 le dégradé ne remplira pas toute la cellule

Pas trop de solution pour que ce soit tip-top dynamique, j'ai essayé de jouer avec les différents height=100% (y en a beaucoup) et FF a l'air d'utiliser 100% de l'écran plutôt que 100% de la ligne, peut-être à cause du absolute (mais ça marche pas en relative alors)...
La solution dégradée, c'est que tu t'arrange pour limiter la taille du texte à peu-pèrs et faire un nospan... ou alors une image en background de cellule.

Sans-Nom

le 11 Juill. 05 à 17h04

http://www.w3.org/TR/html4/struct/tables.html#edef-TABLE

(donc pas la peine de chercher)

height: 100% en CSS peut remplacer cela.

Modérateur Logiciel - Programmation

snowkhan

le 11 Juill. 05 à 18h15

je vais dire une connerie peut etre mais tu tiens vraiment à ton dégradé horizontal là ou un simple dégradé vertical avec une image de 1px de large serait plus propre ?

porcinet_fr

le 12 Juill. 05 à 15h52

Je me suis simplifié la tâche en créant un script php qui génère automatiquement une image.

Pour ceux que ça intéresse le voici :

Code :

<?
$largeur=$_GET['width'];
$color1=$_GET['color1'];
$color2=$_GET['color2'];

function splitstring($string,$len)
{
for($i=0;$i<ceil(strlen($string)/$len);$i++)
$rtnarr[$i]=substr($string, $len*$i, $len);
return($rtnarr);
}

//string color hexa => array color RVB
function color_hexa2rvb($couleur_hexa)
{
$couleur_hexa_rvb=splitstring($couleur_hexa,2);
$couleur_rvb=array(hexdec($couleur_hexa_rvb[0]),hexdec($couleur_hexa_rvb[1]),hexdec($couleur_hexa_rvb[2]));
return($couleur_rvb);
}

//RVB
$couleur1=color_hexa2rvb($color1);
$couleur2=color_hexa2rvb($color2);

//create img dégradé 100px
header ("Content-type: image/png"); 
$img = ImageCreate (100, 1) 
or die ("Erreur lors de la création de l'image"); 

for($i=0;$i<=2;$i++)
{
$pas[$i]=($couleur2[$i]-$couleur1[$i])/100;
}

$couleur_rvb=$couleur1; 


for($x=0;$x<100;$x++)
{
for($i=0;$i<=2;$i++)
{$couleur_rvb[$i]=$couleur_rvb[$i]+$pas[$i];}
$couleur=ImageColorAllocate ($img, $couleur_rvb[0], $couleur_rvb[1], $couleur_rvb[2]);
ImageSetPixel ($img, $x, 0, $couleur);
}

//redimension degradé 
$img2 = imagecreatetruecolor($largeur, 1);
imagecopyresampled($img2, $img, 0, 0, 0, 0, $largeur, 1, 100, 1);
ImagePng ($img2); 
?>

Merci pour toutes vos réponses.

blackwizard74

le 13 Juill. 05 à 19h02

moi je voudrais bien savoir c'est quoi toutes les fonctions Image_machin d'ou elle sortent, c dans une extension particulière?

Sans-Nom

le 13 Juill. 05 à 19h31

Extension gd, voir doc. php?

Modérateur Logiciel - Programmation

snowkhan

le 18 Juill. 05 à 10h11

GD c'est magique...

j'ai réussi à générer dynamiquement une carte de france. Bon j'ai passé quelques heures pour dessiner mes polygones de chaque département, mais le résultat est vraiment encourageant, j'arrive à afficher une carte dynamique avec une échelle variable.

Ceux que ça branche, jetez un oeil ici : Carte de Localisation des membres snow-fr

blackwizard74

le 18 Juill. 05 à 10h56

oki !! je l'avais oubliée celle là, .. et vu que ct pas précisé
un jour faudra que j'essaie ça

[CSS]Problème calque height=100% Firefox et IE

Sujets Similaires: