28221 sujets

CSS et mise en forme, CSS3

CSS IE : bottom + top = bug ?

Salut à tous !

J'ai un petit problème avec mes CSS, je veux caller un cadre en hauteur
dans ma page mais sans utiliser la propriété height. J'utilise donc les
propriété bottom et top de mon div.
Je fixe top a une certaine valeur (en pixel) et bottom aussi.

lorsque j'ouvre la page avec mozilla aucun problème mon cadre ( div )
est bien callé entre les deux valeures de top et bottom. Mais avec IE,
mon cadre ( div ) prend seulement en compte la valeur de la propriété
top; si je la desactive alors il prend en compte la valeur de la
proptiété bottom. Mais il ne prend jamais les deux valeures en comptes...

voici mon CSS :

#content{
position: absolute;
bottom: 15px;
top: 112px;
left: 50%;
width: 632px;
margin-left: -316px;
padding: 5px;
border: #635B59 solid 1px;
overflow: auto;
}

quelqu'un a une idée ? quelquechose qui me permetrait de contourner ce bug ?

++
Jérémie
Je voudrais pas m'avancer, je suis pas super callé en positionement absolu, mais je doute que ça soit possible. Quoique en y réfléchissant, ca pourrait l'etre, top c'est pour le bord haut par rapport au haut du dernier contenant positioné, et bottom pour le bord bas par rapport au bord bas du dernier contenant positioné...

Mais si IE ne veut pas, IE ne veut pas ;)

Tu peux tester peut etre avec height: 100% (en prenant soin de mettre height: 100%; dans le html et le body) et de marger ensuite
JavaScript ne veut pas dire barbare ! Arretez par pitier de lyncher le JS sous prétexte que certains (beaucoup) font du crado. Il y a des très bonnes choses à faire via JS, il faut que ca soit bien fait, tout simplement.
oui j'ai testé cette solution effectivement... (height 100%). Mais elle ne fonctionne pas dans mon cas car j'ai une entete et un pied de page. Du coup avec cette technique les barres de scrolling de mon contenu (entre l'entete et le pied de page) sont cachées ... bref je tourne en rond... Mais si il n'y a pas de solution CSS fonctionnant partout, je vais effectivement me tourner vers du JS.

Merci pour les réponses Smiley cligne
Beeen, une solution JS pas trop trop mal, c'est de donner à ton div une hauteur égal à 100% - (hauteur du footer + hauteur du header) ... Je ne vois réellement pas de possiblité en CSS , et dieu sait que j'ai cherché ! Smiley sleep
Voilà ce que j'ai fait (si ça peut en interesser certains):

function placementHeight(id,top,bottom) {
  var bodyHeight = 0;
  var myHeight = 0;
  var e = document.getElementById(id);

  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    bodyHeight = window.innerHeight;
  } else if( document.documentElement &&
      ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    bodyHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    bodyHeight = document.body.clientHeight;
  }

  myHeight = bodyHeight - top - bottom ;

  e.style.top    = top+"px";
  e.style.height = myHeight+"px";
}


le script va donc placer le conteneur d'id 'id' entre les bornes top et bottom en pixel (où 0 est le bas de l'ecran pour la valeur bottom)

il n'y a plus qu'a placer ceci dans un onload et un onresize :

placementHeight('IDDuConteneur',100,100).

voilà
++
Jérémie
J'ai posté la même question sur la mailing liste "multimedias" chez yahoogroups et j'ai eu une réponse plutôt satisfaisante ! La voici :

-----------------------------------------
J'ai posé la question sur fr.rec.infosystemes.www.auteurs et j'ai eu une
réponse... qui fonctionne :
IE autorise l'insertion de variables dans les CSS, il suffit donc de
rajouter dans ta définition des styles :
height: expression(document.body.clientHeight - 127 + "px");
soit : la hauteur de la fenêtre - 112 px - 15 px.
Les "vrais" navigateurs ignoreront cette ligne.
Ce qui donne :

#content{
position: absolute;
top: 112px;
height: expression(document.body.clientHeight - 127 + "px"); /* C'est là
que ça ce passe ! */
bottom: 15px;
left: 50%;
width: 632px;
margin-left: -316px;
padding: 5px;
border: #635B59 solid 1px;
overflow: auto;
}

Voir d'autre hacks du même type ici :
http://perso.club-internet.fr/v_pascal/web-jardin/html/IE_fixed.htm
-----------------------------------------

++
Jérémie
Et concerant la validation du code par le w3c, non pas que ca soit indispensable, mais ca te garanti que ca fonctionnera dans le futur... là ca me parait bien sombre... quoiqu'avec IE...
Sujet clos
Aller à