margin-left margin-right sous IE6

[s-o-m-e-y]

Bonjour a tous

Je viens de me rendre compte que j'ai quelques bugs de compatibilité sous IE6
Sous Firefox, safari et Ie7 ca passe très bien

voici deux exemple probants :

- Avec ie7 :
http://img390.imageshack.us/img390/7694/ie7fb0.png

- Avec ie6 :
http://img390.imageshack.us/img390/742/ie6vc9.png


On voit clairement que le "menu onglet" est bugé sous IE6

exemple pour la barre jaune en chapeau sous IE7, Firefox et Safari va très bien.

Code: Tout sélectionner

margin-right: 460px;

Mais il est décalé pour IE6 et donc pour qu'il soit bien sous IE6 il fautdrait...

Code: Tout sélectionner

margin-right: 451px;

mais je ne sais justement pas comment dire "tu prend ça et sinon tu prend ça" (si tu est tel navig..etc)
j'ai essayé un truc du genre...

Code: Tout sélectionner

margin-right: 460px /* important*/;   
margin-right: 451px;

et vice-versa mais sans succès, si quelqu'un pourrait m'accorder son aide ...

[BadProcESs]

C'est !important, pas /* important*/

[oli004]

en css il existe deshacks css spécifiques mais ta feuille de style peut vite prendre l'aparence d'une usine à gaz si tu souhaites résoudre tous les problèmes de compatibilité.

[s-o-m-e-y]

ah m*rde

et si je fais cette manip (en mettant bien !important,
je risque d'avoir bon?

[Bool]

J'aurais tendance à te conseiller l'utilisation d'une CSS spécifique à IE6, ne contenant que les petites modifs spécifiques à ce navigateur.

Par exemple, dans le code de la page :

Code: Tout sélectionner

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/include/corrections.ie6.css" />
<![endif]-->

[BadProcESs]

ah m*rde

et si je fais cette manip (en mettant bien !important,
je risque d'avoir bon?

Que veux tu risquer à part le bon fonctionnement de ta feuille de style ?

[s-o-m-e-y]

en css il existe deshacks css spécifiques mais ta feuille de style peut vite prendre l'aparence d'une usine à gaz si tu souhaites résoudre tous les problèmes de compatibilité.

Pardon de ne pas avoir répondu a ton message, et merci pour ta réponse.
J'ai regardé ton lien mais j'avoue, je comprend pas
(enfin j'ai regardé uniquement le paragraphe concernant les "Margin")

ah m*rde

et si je fais cette manip (en mettant bien !important,
je risque d'avoir bon?

Que veux tu risquer à part le bon fonctionnement de ta feuille de style ?

J'ai testé en effet ça marche bien
problème, je pensais que ça fonctionnais que pour IE6 et non!
du coup je passe bien sous se vieux IE6 mais ça reste buggé sous IE7

J'aurais tendance à te conseiller l'utilisation d'une CSS spécifique à IE6, ne contenant que les petites modifs spécifiques à ce navigateur.

Par exemple, dans le code de la page :

Code: Tout sélectionner

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/include/corrections.ie6.css" />
<![endif]-->

merci Bool, mais pourrait stp m'expliquer quelle est la fonction de se code?
car je vois pas trop quel paramètres je dois changer dans ton code etc
je dois créer un (exemple) IE6.css et le renseigner dans le code de cette manière?

Code: Tout sélectionner

<!--[if lt IE 6]>
<link rel="stylesheet" type="text/css" href="/theme/IE6.css" />
<![endif]-->

[Bool]

Pas tout à fait, dans "if lt IE 7" le "lt" signifie lesser than (inférieur à) ; donc la CSS en question sera chargée pour toutes les versions d'Internet Explorer inférieure à la 7.

Cela permet de conserver une feuille de style par défaut relativement "propre" (celle utilisée pour IE 7, Firefox, Opera, Safari, etc). Et de mettre les petites spécificités d'IE5/6 dans un fichier à part (/theme/IE6.css par exemple) ; donc sans avoir recours aux nombreux "hack CSS" tant décriés.

[s-o-m-e-y]

Pas tout à fait, dans "if lt IE 7" le "lt" signifie lesser than (inférieur à) ; donc la CSS en question sera chargée pour toutes les versions d'Internet Explorer inférieure à la 7.

Cela permet de conserver une feuille de style par défaut relativement "propre" (celle utilisée pour IE 7, Firefox, Opera, Safari, etc). Et de mettre les petites spécificités d'IE5/6 dans un fichier à part (/theme/IE6.css par exemple) ; donc sans avoir recours aux nombreux "hack CSS" tant décriés.

Ok c'est noté pour le if lt IE 7
merci bien a vu de nez ça a l'air d'être une solution assez simple et pas très lourde...
petite question encore, (je connais pas donc j'envisage très peu)
dans le (exemple) IE6.css, dois-je tout spécifié ou dois-je uniquement inclure les "règles" qui me posent problèmes?

[Bool]

Tu ne mets que celles qui posent problème justement.

[s-o-m-e-y]

ok merci je vais donc essayé par contre (oui je sais j'y connais rien)....
le

Code: Tout sélectionner

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/include/corrections.ie6.css" />
<![endif]-->

dois-je me mettre à un endroit bien définit dans mes pages?
ou je peu le mettre par exemple dans le head etc??

[Bool]

Idéalement il faut le mettre juste après le tag <link rel="stylesheet" [...] /> de ta CSS "normale", qui est très probablement dans le head oui.

[s-o-m-e-y]

bon...

j'ai testé dans mon home.html
Origine:

Code: Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{tpl:BlogLanguage}}" lang="{{tpl:BlogLanguage}}">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="MSSmartTagsPreventParsing" content="TRUE" />
  <meta name="ROBOTS" content="{{tpl:BlogMetaRobots}}" />

Après :

Code: Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{{tpl:BlogLanguage}}" lang="{{tpl:BlogLanguage}}">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <!--[if IE]>
      <link rel="stylesheet" type="text/css" href="dotclear/themes/aorakit-3D" />
      <![endif]-->
  <meta name="MSSmartTagsPreventParsing" content="TRUE" />
  <meta name="ROBOTS" content="{{tpl:BlogMetaRobots}}" />

Dans mon style.css
une réglè tel que :

Code: Tout sélectionner

.sidebarrecontent4 {
    margin-left: 10px;
   margin-right: 460px;
   background: url(img/bgdowncontentmiddle.gif) repeat-x center top;
}

Mise dans mon ie6.css tel que:

Code: Tout sélectionner

.sidebarrecontent4 {
   margin-right: 451px;
}

Mais rien..aucuns changements

[Bool]

euh... je vois mal ou bien à aucun moment tu charges ton fichier style.css et encore moins ie6.css ?


Dans ton code, tu dois bien avoir un tag de ce genre dans le head, non ?

Code: Tout sélectionner

<link rel="stylesheet" type="text/css" href="dotclear/themes/aorakit-3D/style.css" />

Si c'est le cas, il te suffit d'ajouter celui ci juste après :

Code: Tout sélectionner

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="dotclear/themes/aorakit-3D/ie6.css" />
<![endif]-->

[s-o-m-e-y]

le code qui a l'air de charger le css (style.css) c'est...

Code: Tout sélectionner

<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/style.css);
</style>

voila s'que ca donne :

Code: Tout sélectionner

<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/style.css);
</style>
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="dotclear/themes/aorakit-3D/ie6.css" />
<![endif]-->

c'est le seul que je trouve qui charge le .css mais il n'a pas grand chose à voir avec celui que tu me propose...
Et par contre, excuse-moi c'est en effet une erreur de copier-coller
j'ai bien oublié le /ie6.css dans les post du dessus.

Mais, je viens de re-re-re essayer et çà ne change rien
(de plus tout a l'heure tel "une quiche" j'essayais d'implémenter le code dans le home..
mais enfaite, c'était forcement dans mon head.html...mais après testes cela ne change rien non plus