Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript css et IE 7

css et IE 7

8 réponses
Avatar
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>
Signaler un problème avec ce contenu

8 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
SAM
Le 14/07/11 14:31, 1 connu a écrit :
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



enfin ... si on veut ...

sauf les vielles daubes IE 6 et IE 7.
Y a t'il une facon pour le faire marcher aussi ?



si tu ne dis ni ne nous montre ce que font les vieilles daubes ...
comment savoir ?

D'avance merci



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
Avatar
1 connu
"SAM" a écrit dans le message de news:
4e1f2b18$0$30782$
Le 14/07/11 14:31, 1 connu a écrit :
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



enfin ... si on veut ...

sauf les vielles daubes IE 6 et IE 7.
Y a t'il une facon pour le faire marcher aussi ?



si tu ne dis ni ne nous montre ce que font les vieilles daubes ...
comment savoir ?

D'avance merci





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
indice : la bordure compte dans les largeurs et hauteurs
indice 2 : voir 'fixed' pour les IE (préférer absolute ?)



oui c'est donc bien ce que j'ai fait ...

Avatar
SAM
Le 14/07/11 21:04, 1 connu a écrit :
"SAM" a écrit dans le message de news:
4e1f2b18$0$30782$

si tu ne dis ni ne nous montre ce que font les vieilles daubes ...
comment savoir ?



Désolé, voila l'html minimum :



Oui, on avait déjà vu,
ce qu'on ne sait pas c'est ce que font mal les IEs ...

indice : la bordure compte dans les largeurs et hauteurs
indice 2 : voir 'fixed' pour les IE (préférer absolute ?)



oui c'est donc bien ce que j'ai fait ...



Attention tt de même aux réactions différentes du navigateur suivant
qu'il a un doctype ou non (et suivant sa version !).
<http://www.quirksmode.org/css/quirksmode.html>

<http://www.quirksmode.org/css/contents.html>

<http://msdn.microsoft.com/fr-fr/library/cc351024%28VS.85%29.aspx>
<http://msdn.microsoft.com/fr-fr/library/cc351024%28VS.85%29.aspx#Positionnement>


--
Stéphane Moriaux avec/with iMac-intel
Avatar
SAM
Le 14/07/11 21:04, 1 connu a écrit :
"SAM" a écrit dans le message de news:
4e1f2b18$0$30782$

indice : la bordure compte dans les largeurs et hauteurs
indice 2 : voir 'fixed' pour les IE (préférer absolute ?)



oui c'est donc bien ce que j'ai fait ...



Pour le fun (mais en pas fr) :
<http://hsivonen.iki.fi/doctype/#IE8>
<http://hsivonen.iki.fi/doctype/>

--
Stéphane Moriaux avec/with iMac-intel
Avatar
1 connu
"SAM" a écrit dans le message de news:
4e1f77cd$0$30787$
Le 14/07/11 21:04, 1 connu a écrit :
"SAM" a écrit dans le message de news:
4e1f2b18$0$30782$

si tu ne dis ni ne nous montre ce que font les vieilles daubes ...
comment savoir ?



Désolé, voila l'html minimum :



Oui, on avait déjà vu,
ce qu'on ne sait pas c'est ce que font mal les IEs ...

indice : la bordure compte dans les largeurs et hauteurs
indice 2 : voir 'fixed' pour les IE (préférer absolute ?)



oui c'est donc bien ce que j'ai fait ...



Attention tt de même aux réactions différentes du navigateur suivant qu'il a un doctype ou non (et suivant sa version !).
<http://www.quirksmode.org/css/quirksmode.html>

<http://www.quirksmode.org/css/contents.html>

<http://msdn.microsoft.com/fr-fr/library/cc351024%28VS.85%29.aspx>
<http://msdn.microsoft.com/fr-fr/library/cc351024%28VS.85%29.aspx#Positionnement>


--
Stéphane Moriaux avec/with iMac-intel



Merci pour ces infos


Le doctype ajouté par défaut par l'outil que j'utilise est :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

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
--------------
Avatar
SAM
Le 15/07/11 09:11, 1 connu a écrit :
"SAM" a écrit dans le message de news:
4e1f77cd$0$30787$

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 !).



Le doctype ajouté par défaut par l'outil que j'utilise est :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">



il parait que ce serait :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Ca ne semble pas changer pas le comportement à ce niveau



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 : <http://www.w3.org/TR/REC-html32>
on nous dit (pour styles) : <http://www.w3.org/TR/REC-html32#script>
« 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 :
<http://www.w3.org/TR/REC-CSS1-961217>


1) Avec tous les browsers + IE 8, j'ai bien :
---------------
nord
--------------
W | centre | E
--------------
Sud
--------------

2) sur IE 7 :



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 :
<http://www.w3.org/QA/2002/04/valid-dtd-list.html>

--
Stéphane Moriaux avec/with iMac-intel
Avatar
1 connu
"SAM" a écrit dans le message de news:
4e1ffcf9$0$18806$

pour IE 7, moi, en html, je rangerais les trucs dans l'ordre

top
left
middle
right
bottom



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 ...
Avatar
SAM
Le 15/07/11 12:26, 1 connu a écrit :
"SAM" a écrit dans le message de news:
4e1ffcf9$0$18806$

pour IE 7, moi, en html, je rangerais les trucs dans l'ordre

top
left
middle
right
bottom



effectivement mais ca donne :
---------------
nord
--------------
W |
--------------
centre
--------------
E |
-------------
Sud
--------------
Donc pas mieux !



fonctionne pour IE7 : <http://cjoint.com/?AGprScDozzA>
fonctionne pas : <http://cjoint.com/?AGprTMJwn7L>

La différence ? le doctype !

Impossible de remettre la main sur un hack css pour IE6 vu (mais pas compris) sur le net ...



<http://www.positioniseverything.net/articles/ie7-dehacker.html>

--
Stéphane Moriaux avec/with iMac-intel