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 :cry:
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.

margin-right: 460px;

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

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

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 :

<!--[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 :cry:
(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 :cry:

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 :

<!--[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?

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

:arrow: :?:

 

[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

<!--[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:

<!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 :

<!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 :

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

Mise dans mon ie6.css tel que:

.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 ?

<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 :

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

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

voila s'que ca donne :

<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

 

[Bool]

Beurk enfin ça ne change rien à l'approche, ça donnerait (pas testé) :

<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/style.css);
<!--[if lt IE 7]>
@import url({{tpl:BlogThemeURL}}/ie6.css);
<![endif]-->
</style>

 

[s-o-m-e-y]

bah..c'est vrai que c'est plus sensé vu comme çà...(je suis pas logique )

Par contre le seul truc que ça change c'est que ça me rajoute tout en haut de l'écran (normal head)

@import url(/dotclear/themes/aorakit-3D/ie6.css);

mais c'est tout...
et j'ai bien un ie6.css a cet endroit...
il contient:

.sidebarrecontent4 { 
	margin-right: 451px;
}

donc normalement le changement devrait opérer mais non :cry:

 

[Bool]

Essayes éventuellement en séparant en deux dans ce cas :

<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/style.css);
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
@import url({{tpl:BlogThemeURL}}/ie6.css);
</style>
<![endif]-->

J'utilise cette méthode depuis longtemps, donc je sais que cela fonctionne. Toutefois je n'ai jamais joué avec la syntaxe @import (qui est d'ailleurs fréquement déconseillée).

 

[s-o-m-e-y]

en effet du coup plus de code afficher en haut et le ie6.css est pris en compte

Pour ça je te remercie beaucoup ...
mais j'ai bien peur de t'avoir "pris la tête" pour rien car....

j'ai l'impression que ça ne résout pas mon problème...

exemple j'ai cru lire que margin-'left ou right" n'était pas interprété par IE6
mais plutôt "left ou right" ...

mon problème (le plus petit ) c'est mon chapeau de barre...
- Avec ie7 :
http://img390.imageshack.us/img390/7694/ie7fb0.png

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

Dans mon style.css (sous FF et IE7) pour étendre suivant la résolution de l'internaute j'ai utilisé les porte coulissante ...

exemple:

.chapo { 
    margin-left: auto;
    margin-right: auto;
	background: url(img/chapoleft.gif) no-repeat left top;
}
.chapo1 { 
    margin-left: 10px;
	margin-right: 460px;
	background: url(img/chapomiddle.gif) repeat-x center top;
}
.chapo2 { 
    margin-left: auto;
	margin-right: -10px;
	padding-top: 24px;
	background: url(img/chaporight.gif) no-repeat right top;
}

et dans les pages :

</div><div class="chapo2"><div class="chapo1"><div class="chapo">
</div>
</div>
</div>

se qui etant (ou pas) mon chapeau suivant la resolution de l'internaute
et je ne sait pas du tout quel valeur donner dans mon ie6.css car en testant:

.chapo1 { 
    margin-left: 10px;
	margin-right: 451px;
	background: url(img/chapomiddle.gif) repeat-x center top;
}

ca marche la barre est a ca place mais UNIQUEMENT EN 1024x128

donc la je sèche vraiment