css et IE 7
Le
1 connu
Bonjour à tous,
Désolé,c'est pas le bon newsgroup mais plutot une question CSS.
J'essaie de reproduire un BorderLayout en css d'après http://jsfiddle.net/uwcEw/
Ca marche nickel sur tous les browsers sauf les vielles daubes IE 6 et IE 7.
Y a t'il une facon pour le faire marcher aussi ?
D'avance merci
Mon fichier minimum :
<html>
<head>
<style type="text/css">
body {margin:0; padding:0; height:100%; }
div { border:2px solid; position:fixed; }
#top { top:0; width:100%; height:10% }
#bottom { bottom:0; width:100%; height:10% }
#left { top:10%; width:10%; bottom:10%; left:0 }
#right { top:10%; width:10%; bottom:10%; right:0 }
#middle { top:10%; left:10%; bottom:10%; right:10% }
</style>
</head>
<body>
<div id=top>nord</div>
<div id=bottom>sud</div>
<div id=left>est</div>
<div id=right>ouest</div>
<div id=middle>centre</div>
</body>
</html>
Désolé,c'est pas le bon newsgroup mais plutot une question CSS.
J'essaie de reproduire un BorderLayout en css d'après http://jsfiddle.net/uwcEw/
Ca marche nickel sur tous les browsers sauf les vielles daubes IE 6 et IE 7.
Y a t'il une facon pour le faire marcher aussi ?
D'avance merci
Mon fichier minimum :
<html>
<head>
<style type="text/css">
body {margin:0; padding:0; height:100%; }
div { border:2px solid; position:fixed; }
#top { top:0; width:100%; height:10% }
#bottom { bottom:0; width:100%; height:10% }
#left { top:10%; width:10%; bottom:10%; left:0 }
#right { top:10%; width:10%; bottom:10%; right:0 }
#middle { top:10%; left:10%; bottom:10%; right:10% }
</style>
</head>
<body>
<div id=top>nord</div>
<div id=bottom>sud</div>
<div id=left>est</div>
<div id=right>ouest</div>
<div id=middle>centre</div>
</body>
</html>
enfin ... si on veut ...
si tu ne dis ni ne nous montre ce que font les vieilles daubes ...
comment savoir ?
indice : la bordure compte dans les largeurs et hauteurs
indice 2 : voir 'fixed' pour les IE (préférer absolute ?)
--
Stéphane Moriaux avec/with iMac-intel
Désolé, voila l'html minimum :
<html>
<head>
<style type="text/css">
body {margin:0; padding:0; height:100%; }
div { border:2px solid; position:fixed; }
#top { top:0; width:100%; height:10% }
#bottom { bottom:0; width:100%; height:10% }
#left { top:10%; width:10%; bottom:10%; left:0 }
#right { top:10%; width:10%; bottom:10%; right:0 }
#middle { top:10%; left:10%; bottom:10%; right:10%; overflow: auto; }
</style>
</head>
<body>
<div id=top>nord</div>
<div id=bottom>sud</div>
<div id=left>est</div>
<div id=right>ouest</div>
<div id=middle>centre <br />
centre <br />
centre <br />
centre <br />
centre <br />
....
</div>
</body>
</html>
qui marche très bien sur FF/Google/Safari et meme IE 8 ...Fonctionnalités du design :- Nord % fixe en hauteur.- Sud % fixe en bas de
la page- colonnes ouest-est % fixes- centre scrollable
oui c'est donc bien ce que j'ai fait ...
Oui, on avait déjà vu,
ce qu'on ne sait pas c'est ce que font mal les IEs ...
Attention tt de même aux réactions différentes du navigateur suivant
qu'il a un doctype ou non (et suivant sa version !).
--
Stéphane Moriaux avec/with iMac-intel
Pour le fun (mais en pas fr) :
--
Stéphane Moriaux avec/with iMac-intel
Merci pour ces infos
Le doctype ajouté par défaut par l'outil que j'utilise est :
Ca ne semble pas changer pas le comportement à ce niveau
1) Avec tous les browsers + IE 8, j'ai bien :
---------------
nord
--------------
W | centre | E
--------------
Sud
--------------
2) sur IE 7 :
---------------
nord
--------------
W |
----
E |
-------------
centre
--------------
Sud
--------------
il parait que ce serait :
Heu ... des css avec du html 3,2 ?
(ça n'existait pas les css à l'époque du 3,2 (1997), ou très peu)
ici : on nous dit (pour styles) : « These are place holders for the introduction of style sheets and
client-side scripts in *future versions* of HTML. »
Bien que les CSS-1 étaient déjà à l'étude :
pour IE 7, moi, en html, je rangerais les trucs dans l'ordre
top
left
middle
right
bottom
(essayé dans Fx, ça ne lui change rien)
(pas essayé IE7, me faut lancer un émulateur XP qui a un IE7)
Je ne suis pas très certain que IE<8 comprenne bien :
right: 0;
déjà que je suis étonné que
bottom: 0;
semble compris ;-)
Les doctypes valides :
--
Stéphane Moriaux avec/with iMac-intel
effectivement mais ca donne :
---------------
nord
--------------
W |
--------------
centre
--------------
E |
-------------
Sud
--------------
Donc pas mieux !
Impossible de remettre la main sur un hack css pour IE6 vu (mais pas compris) sur le net ...
fonctionne pour IE7 : fonctionne pas :
La différence ? le doctype !
--
Stéphane Moriaux avec/with iMac-intel