28220 sujets

CSS et mise en forme, CSS3

Css - image - pourcentage et mozilla

Bonjour,

J'ai une page déclaré de cette façon: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>



Une feuille de style de ce type: 

.bloc a{ height: 70px; width: 400px; 
padding-top: 0px ; padding-right: 0px ; padding-bottom: 0px ; padding-left: 0px ; 
display:block ; 
background-color: #eaeaea; 
border: 1px #CCCCCC solid; 
background-attachment: fixed; 
background-image: url(img3.jpg); 
background-repeat: no-repeat; 
background-position: right center}



La déclaration du doc à permis un affichage identique sur ie et mozilla pour ce qui est de la taille des blocs, par contre, sur Mozilla l'image n'apparaît plus.

Deuxième soucis, la page ne prend plus en compte les hauteurs en pourcentage, si bien que je n'arrive plus à étaler ma page vers le bas. J'ai bien tenté de rajouter un style et de la rajouter à mon tableau: 

.hauteur {height: 100%; 
}

mais cela ne change rien sur ie, et decalle complètement l'affichage sur mozilla.

Si quelqu'un à une idée.... merci Smiley smile
Pour les images, j'ai trouvé:

il faut simplement enlever la ligne: 

background-attachment: fixed;



et ça passe très bien sur les 2 navigateurs.


Par contre, pour les hauteurs en pourcentage, je sèche...
Modifié par yankey (23 Nov 2005 - 14:43)
La hauteur en % étant bien entendu relative à l'élément conteneur, il faudrait observer la structure du document pour t'aider.
j'ai un peu avancé depuis tout à l'heure...

En rajoutant ce style sur ma page:
<style type="text/css"> 
html, body { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
border: none 
} 
.centpourcent { 
height: 100%; 
} 
</style>


et en mettant ceci dans les lignes tableau:

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="centpourcent">


j'arrive à un affichage nickel sur Mozilla, mais sur IE maintenant mon tableau descend bien au délà des 100%.... Smiley ohwell
je ne trouve pas exactement dans cette page...

Le problème apparemment se situe ici:
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border: none
}
et je ne trouve pas ce qu'il faut ajouter ou enlever pour que sous IE la page ne s'etire pas du double vers le bas...
même question...
si on ne voit pas l'intégralité de ton document, il est difficile de comprendre sa structure et donc de t'aider...
Voici un code simplifié de cette page, sous Mozilla le tableau va jusqu'au bas de la page, sur IE elle déscend vers le bas au délà des 100%:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="style.css" type="text/css">

<style type="text/css"> 
html { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
border: none 
} 
body { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
border: none 
} 
.centpourcent { 
height: 100%; 
} 
</style> 
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="500" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#006600">une</td>
  </tr>
  <tr>
    <td bgcolor="#00CCFF">deux</td>
  </tr>
  <tr>
    <td height="100%" bgcolor="#FF0000">trois &agrave; 100% </td>
  </tr>
</table>
</body>
</html>
Vous pensez que je devrai travailler avec des calques ?

Je n'ai mis qu'un seul tableau à 3 lignes, évidemment dans la page rélle il y a de multiples tableaux avec de mutiples lignes et colonnes.

Il doit bien y avoir un moyen pour corriger ce bug d'affichage sous IE ?
Sujet clos
Aller à