Hello la gang.
J’ai un petit souci sous ie7:
Voilà, le souci est là seulement avec la DTD (Strict dans ce cas ci, mais le probleme existe aussi avec la loose), et seulement sous IE 7.
J’ai un DIV qui à un overflow:auto; width: 1250px; height: 200px;
à l’intérieur, il à un table, qui à un width de 100%. Chaque Ligne à une couleur de background, pairs blanc, alternative gris pale…
Lorsque l’overflow vertical fait apparaitre la barre de défilement verticale.
Jusqu’ici, le comportement IE/Mozilla est le même.
Toutefois, sous ie, la barrre de défilement verticale restreint de quelque px le width du Div, ce qui fait appraitre la barre de défilement horizontale.
Contraimement à IE, sous FireFox, la table avec un width de 100% s’ajuste dynamiquement, et seul la barre de défilement vertical reste visible.
La solution oveflow-y: scroll; overflow-x: hidden; ne me satisfait pas, on peut toujours faire glisser la table en tennant la sélection enfoncé…
Width: inherit; ne marche pas sous ie 7, et with: auto ne m’aide pas plus…
Conseil?
Edité le 18/02/2008 à 21:20
Spécifie une largeur de ta table dans ton div en methode fixe, ca devrai pas pausé de probleme étant donné que le conteneur est déjà en fixe. Le probleme c’est quand dans un navigateur la barre vertical est prise en compte dans la largeur, et l’autre non.
Voilà, tout à fait.
Ce qui est plate, c’est que je dois déterminer une largeur fixe en calulant la largeur de la barre de défilement verticale… qui différe selon la résolution de l’écran, et qui n’est pas toujours là (auto) .
Pour le momment j’ai fixé ca pour du 1280, et jai mis overflow-y: scroll, histoire de remplir le vide…
C’est vraiment domage comme contrainte.
Hello,
Je viens de rencontrer quasiment le même problème.
J’ai un div avec une largeur qui s’adapte à la fenêtre et un overflow:auto;
Il peut contenir différentes choses dont des tableaux de données bien sûr… et avec un width:100%.
J’ai fait la même conclusion sur IE6 : quand l’ascenseur apparaît, il vient en quelque sorte empiété sur le contenu.
Ce qui est étrange c’est que l’apparition de l’ascenseur ne dérangera pas un texte, mais dès que l’élément div ou table a un width de 100%, il passe SOUS l’ascenseur (dans mon cas j’ai même vu qu’il pouvait le “pousser” à l’extérieur…
La solution pour l’ascenseur horizontal est simple mais ça m’embête d’afficher un ascenseur inactif par défaut…
Si quelqu’un a une autre solution je suis intéressé, en attendant j’ai fait le coup du :
overflow: auto; /* Tous browsers /
-overflow-y: scroll; / Juste pour IE /
-overflow-x:hidden, / Juste pour IE */
Et j’ai également utilisé un div avec un margin-right pour “contenir” tout les éléments de 100% de largeur afin qu’ils ne passent pas DERRIERE ce p*tain d’ascenseur…
N’y aurait-il pas un moyen de créer un hack HTC pour ce bug d’IE ???
Bonjour,
quelqu’un aurait-il quelque chose à proposer pour ce problème ?
maintenant j’arrive à avoir la table dans la div qui fonctionne parfaitement sous absolument tous les navigateurs sauf IE7… ou alors il faudrait que je puisse faire basculer IE7 et seulement lui, en ‘quirk mode’… afin qu’il fonctionne comme IE6…
pour info en attendant une solution, j’ai fait en sorte que IE7 passe en mode ‘quirks’ et s’affiche donc selon le code pour IE6… ça marche pas mal…
pour ce faire je detecte le userAgent et si c’est IE7 alors je met pas la DTD dans la page…
attention IE8 ressemble à IE7 mais avec le mot clef “Trident” en plus.
<% String userAgent = request.getHeader("user-agent");
//tout le monde à la DTD sauf IE7 pour qu'il reste en mode 'quirk'
if (userAgent==null || userAgent.indexOf("MSIE 7")==-1 || userAgent.indexOf("Trident")!=-1){
out.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
}%>
ainsi ma page s’affiche parfaitement sous tous les navigateurs… (grace aux hacks IE6 sous IE7)
ps ne pas oublier d’envoyer le X-UA-Compatible dans l’entete serveur, sinon IE8 va avoir tendance à afficher en mode IE7
//ajout du X-UA-Compatible pour IE8+
((HttpServletResponse)response).setHeader("X-UA-Compatible", "IE=edge");
(la balise meta ayant peu d’effet…)