Gérer les modèles de boîtes CSS standard et MS

[pitidev]

bonjour, j'ai un site compatible IE5.5 et N4 a l'heure actuelle.

je cherche a le rendre compatible aux standarts.

au lieu d'utiliser un tableau; j'utilise les DIV pour me faire un encadrement avec

mon CSS qui fait le boulot pour ma dordure et sa position etc...

donc d'apres l'excellent tuto d'openweb :

http://openweb.eu.org/articles/dimensions_boites_css/

j'ai utilisé le petit trucs suivant :

.vert { 
  background-color: #00ff00;
  padding: 0 20px;
  border-left: 5px solid #00ff00;
  border-right: 5px solid #00ff00; 
  width: 300px;
  voice-family: "\"}\"";
  voice-family:inherit;
  width: 250px;
}
html>body .vert {
  width: 250px;
}

le probleme c'est que Netscape 4 plante sur le document feuille de style maintenant !

j'ai aucun style sous Netscape 4 car il ne comprends pas le bug du parser IE

Donc est ce que vous connaissez un autre truc pour que NN4 continue a utiliser la meme feuille de style sans probleme pour tous les autres styles sauf celui demon div !

[Loupilo]

Je ne sais pas, mais comme le montre ce graphique :

, Netscape 4 est mort, c'est un peu inutile d'optimiser des sites pour ce broswer...

Il existe aujourd'hui Netscape 7, Mozilla 1.7, Firefox 0.8, IE6 mais Netscape 4, il est plus la...

++

[pitidev]

c'est pas moi qui decide ce genre de chose.

ma tache consiste a rendre l'appli compatible N7 et IE6 alors qu'à l'heure actuelle elle est compatible IE5.5 et N4

[Clair de Lune]

salut

si ça peut t'aider, pour contourner le problème du modèle de boîtes différent entre explorer et les autres, il y a un autre moyen, sans le hack qui effectivement ne sera pas compris par ns 4, foutant toute la feuille de style en l'air

hélas l'autre moyen n'est pas facile à mettre en oeuvre : éviter les paddings et margins autant que possible, et lorsqu'ils sont égaux à 0, le spécifier partout

c'est du bricolage, mais si tu pars de body et que tu redescends au fur et à mesure, dans beaucoup de cas tu peux te passer du hack

[Monique]

Bonjour,

J'ai retrouvé une de mes premières vraies leçons de CSS données par Fabrice Bonny

Il y proposait l'utilisation de @media screen pour qu'une règle de style ne s'applique pas à NN4

@media screen
{
#text
{
width:50%;
float:left;
}
}

[Denis]

Je confirme ce que dis Clair de lune, j'évite le plus clairement du temps les hacks de ce genre, par choix de conception et j'arrive quand même à mes fins. C'est possible, suffit de bien répartir les valeurs annoncées aux paddings et margins des conteneurs afin de satisfaire autant le modèle de boite de MSIE que celui des autres navigateurs.

Pour ce qui est de cacher l'interprétation de la feuille de style à Nertscape 4, ton meileur ami est définitivement la règle du _AT_import. En spécifiant tout d'abord une feuille de style pour Netscape 4 (ou générale et simple) avec la balise link, tu peux ensuite venir écraser cette CSS avec une autre plus sophistiquée par la balise style avec _AT_import, Comme celle-ci ne sera pas interprétée par NS4 tu peux donc contrôler quel CSS tu envoie à quel navigateur.

Exemple :

<link rel="stylesheet" href="basique.css" media="screen" type="text/css" />
<style type="text/css" media="screen">@import url(evoluee.css);</style>

Comme les navigateurs récents peuvent interpréter les deux, tu dois cependant t'assurer que ce qui est déterminé dans la feuille de base est écrasé dans la feuille sophistiquée sinon les valeurs s'additionneront, du à l'effet de cascades des CSS.

[pitidev]

Je m'en suis sorti en faisant comme ceci :

<LINK REL=stylesheet HREF="/web2/css/applic.css" TYPE="text/css" MEDIA="screen">
<LINK REL=StyleSheet HREF="/web2/css/bdd.css" TYPE="text/css" MEDIA="all">

en effet j'ai lu sur HtmlHelp que Netscape 4 n'accepte pas d'autres feuilles de style avec MEDIA différent de 'screen'

cela rejoins un peu le post de Denis

[Denis]

Tiens, j'avais jamais réalisé ça... bonne observation. Merci beaucoup pitidev, je garderai ça sous le coude.

Par contre, il ne faut perdre de vue que le problème de cette astuce, c'est que ta feuille de style sera maintenant appliquée à tous les médias, ce qui peut être mauvais si tu souhaitais t'en faire une pour l'imprimé...

Conclusion, intéressant, mais peut-être moins efficace que le _AT_import qui lui, permettrait de cibler seulement le media screen.