28172 sujets

CSS et mise en forme, CSS3

bonjour à tous!

J'avoue que là, j'ai vraiment besoin de vos conseils, parce que j'ai un souci qui me laisse complètement... dubitatif! Je m'explique :

Je prépare un design avec deux feuilles de style, l'une pour IE et l'autre pour firefox (le reste, quoi). Dans ma page php, j'ai donc dans le header le code suivant :

------------------ code php---------------------

<link href="firefox.css" rel="stylesheet" type="text/css" media="all">

<!--[if IE]> <link href="internetexplorer.css" rel="stylesheet" type="text/css" media="all"> <![endif]-->

------------------------------------------------


Voici mon problème : lorsque je change une marge sur la feuille de style de firefox, et que je teste sur IE, la marge est prise en compte! evidemment, le premier reflexe, c'est de se dire que ce n'est pas la bonne CSS qui est prise en compte... mais SI! c'est là que c'est étrange : pour être bien certain de la feuille de style avec laquelle je travaille, j'ai fait apparaitre dans l'en-tête de la CSS un logo "IE" ou un logo "FF".

Ce qui me permets d'être sûr, que :

1) quand je teste sous IE, c'est bien la feuille IE.css qui est prise en compte
2) Les changements de marge faits sur l'autre CSS sont pris en charge quand meme!


--------------- code IE.css --------------------

.I {
 
  top: 1em;
  left: 1%;
  width: 380px;
height:300px;
border : 1px solid #000000;
 color:#000000;
background-color:#CF7A3E;
position:absolute;
}

-------------------------------------

----------------code FF.css -----------

.I {
 
  margin-top:25px;   <--------- cette marge est prise en compte lors d'un test sous IE!!
  left: 1%;
  width: 380px;
height:300px;
border : 1px solid #000000;
 color:#000000;
background-color:#CF7A3E;

}

-------------------------------

Modifié par mdcuno (20 May 2009 - 12:24)
Salut,

Quand tu as deux feuilles de style définies, elles se complètent et non se remplacent.
Concrètement, IE passe dans la première, affecte les valeurs qu'il y trouve. Ensuite il passe dans la deuxième (ne réinitialise pas toutes les valeurs !) et complète avec les valeurs différentes que celles qu'il a trouvées dans la première.

Il est tout à fait impensable d'avoir une feuille de style unique par navigateur ! Le mieux, est une feuille de style globale (comme celle appelée firefox.css dans ton exemple), et une feuille de style pour IE ne corrigeant que les rares valeurs à "hacker".
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Agylus, merci beaucoup pour ta réponse claire et rapide. Je vais tout reprendre à zero, en partant de la feuille "firefox.css", et corriger pas à pas les bugs d'IE.

Merci encore.

Benjamin, toutes mes excuses de n'avoir pas rédigé correctement. J'ai corrigé ça, j'espère que ça ira. J'avais porutant cherché si la question avait été posée ailleurs, mais je n'ai rien trouvé. Merci poru l'accueil en tout cas