28173 sujets

CSS et mise en forme, CSS3

Centrage vertical dans un tableau [IE7]

Bonjour,

est-ce que quelqu'un arriverait, avec ce petit HTML qui suit, à centrer verticalement le texte dans IE7 (dans FX ça marche bien) ? Interdit de toucher au placement et aux dimensions de "leDiv" (c'est pour ça que c'est difficile).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <style>
#leDiv {
    position: absolute;
    background-color: red;
    top:80px;
    left:290px;
    right:50px;
    bottom:50px;
}

#leTable {
    background-color: yellow;
    height:100%
}
        </style>
    </head>
    <body>
        <div id="leDiv">
            <table id="leTable">
                <tr id="leTR">
                    <td id="leTD">
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>


LOIC
re,

Il a des dimensions implicites fixées par les couples top/bottom et left/right, c'est ce que j'entendais par "dimensions".
Alors reprenons.
Gihef a écrit :
#leDiv n'a pas de dimensions.
Il lui en faut.

Et ça ne fonctionnera que si son parent est positionné en relative.
Et que si les styles arrivent dans leur ordre d'apparition (?)
Et que si d'autres précisions sont apportées.

À ta question, on peut donc répondre : Impossible.


+ Il est préférable de préciser de quel <style> il s'agit
<style type="text/css">

Modifié par Gihef (03 Sep 2007 - 23:25)
Modérateur
lalejand a écrit :
re,
Il a des dimensions implicites fixées par les couples top/bottom et left/right, c'est ce que j'entendais par "dimensions".


En effet , cela n'est pas faux , sauf que IE n'applique pas cette regle !

La seule façon d'avoir un resultat similaire dans IE et les autres navigateur récent est de mettre IE en mode "quirk" de façon a le faire utiliser un autre modele de boite (padding et bordure ne s'ajoutent plus aux dimensions initiales), ce qui ne vas pas sans dire , que pour régler un probleme , on tombe dans le coté "obscur" avec prises de têtes multiples garanties pour la suite de la mise en forme.

juste pour l'exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
    <head>
        <style>
#leDiv {
    position: absolute;
    background-color: red;
    top:80px;
    left:290px;
    right:50px;
    bottom:50px;
}

#leTable {
    background-color: yellow;
    height:100%
}
        </style>
<!--[if IE  ]>
        <style>
html , body {
	height:100%;
	}
body {
	padding-top:80px;
	padding-left:290px;
	padding-right:50px;
	padding-bottom:50px;
}
#leDiv {
	position:static;
	background-color: red;
}

#leTable {
    background-color: yellow;
    height:100%
}
        </style>
<![endif]-->
    </head>
    <body>
        <div id="leDiv">
            <table id="leTable">
                <tr id="leTR">
                    <td id="leTD">
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah
blah blah
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

(pas de lien en demo cette fois-ci , copier/coller/jeter)
explications:

1) on rend le doctype invalide en le tronquant .
Puis a l'aide des commentaires conditionnels on sert une autre soupe a IE:
2) on donne 100% de hauteur a html et body , references explicites pour IE qui sera reprise pour div , et table aura div comme parent de reference.
3) on ajoute des marges interne a body en lieu et place des coordonnée de position/dimensionnement de div.
3) div repasse dans le flux qui , dans ce modele de boite prendra les 100% de hauteur dispo que lui laisse body.
4) table prend en reference la hauteur de div.
5) on est content , en mode quirk IE devient encore plus refractatires aux regles css.

Donc exemple a ne pas suivre ... sauf que ces comportements sur d'autres pages peuvent vous mettre la puce a l'oreille , et vous faire verifier la validité de votre doctype quand css devient fou Smiley smile

GC
Sujet clos
Aller à