[W3C] Charger feuille de style en fonction de IE ou FF

Version imprimable

Voir 40 message(s) de cette discussion en une page

20/09/2007, 18h10
Aspic

[W3C] Charger feuille de style en fonction de IE ou FF
Salut, je voudrais charger une feuille de style spéciale pour IE et une autre pour FF :
Code:

1 2 <link rel="stylesheet" type="text/css" href="../b.css"> 
Avec ce code, pas de problème sous FF puique la deuxième ligne n'est interprétée que pour IE. En revanche, sur IE, il me charge les deux feuilles de style et donc ca plante complètement.

Comment dire à IE de charger uniquement la feuille de style spécial IE sans passer par le javascript (si possible) ?

Merci à tous ! :D
20/09/2007, 18h20
Bisûnûrs

La méthode là est la meilleure.

Si tu ne veux pas qu'IE s'occupe de la première feuille de style, tu dois t'amuser à remettre à zéro ou à redéfinir les valeurs dans la feuille de style pour IE.
20/09/2007, 18h23
Aspic

Citation:

Envoyé par Bisûnûrs

Si tu ne veux pas qu'IE s'occupe de la première feuille de style, tu dois t'amuser à remettre à zéro ou à redéfinir les valeurs dans la feuille de style pour IE.

Je n'ai pas compris :oops:

Les feuilles de style de IE et FF sont deja indentiques sauf que y'a quelques valeurs qui changent (des paddings et margins car IE interpréte pas pareil que FF).
20/09/2007, 18h31
Bisûnûrs

Citation:

Envoyé par Aspic

Les feuilles de style de IE et FF sont deja indentiques sauf que y'a quelques valeurs qui changent (des paddings et margins car IE interpréte pas pareil que FF).

Si tu redéfinis les valeurs dans la deuxième feuille de style, alors IE "écrase" les valeurs de la première, donc tu n'as pas à t'en faire.

Mais IE en mode standard interprète les margin et padding de la même manière que Firefox : as-tu renseigné un DOCTYPE complet ?
20/09/2007, 18h36
Aspic

Oui toutes les pages sont valides W3C...

Je ne comprends pas alors c'est pas logique :
http://www.zonegeeks.com/software/base-driver.php (sous IE ca plante, le menu de gauche se retrouve en bas et sous FF pas de soucis)

Si je supprime la première ligne de mon code ci-haut ca marche très bien sous IE...

Je vois plusieurs différences dans tes CSS :

Générale :

Code:

1
2
3
4
5
6
7
h3{
font-style:italic;
text-decoration:underline;
font-family:"Franklin Gothic Medium";
text-align:left;
padding-left:2.1em;
}

IE :

Code:

1
2
3
4
5
6
7
h2{
 
text-decoration:underline;
font-family:"Franklin Gothic Medium";
text-align:left;
padding-left:2.1em;
}

:arrow: pas les mêmes balises affectées

Générale :

Code:

1
2
3
4
5
table{
background-color:#C7D3D7;
border:4px outset #7851E6; /* Bordure du tableau avec effet 3D (outset) */
border-collapse:collapse; /* Colle les bordures entre elles */
}

IE:

Code:

1
2
3
4
table{
background-color:#C7D3D7;
border:4px #7851E6; /* Bordure du tableau avec effet 3D (outset) */
}

:arrow: tu ne colles plus les bordures et tu ne leur donnes plus de style

20/09/2007, 19h02
Aspic

Oups j'avais oublié de rétablir mes changements (j'essaye d'isoler ce qui fait planter la page...)

Je viens de tout rétablir et j'ai toujours le même soucis... c'est pas logique car j'étais sur qu'avant, je n'avais pas de problème... c'est dingue !
20/09/2007, 19h38
Bisûnûrs

Je pense que c'est juste le width de ton div id="texte" qui est trop grand.

Quand je le modifie avec la Developer Toolbar (je mets 640px par exemple au lieu de 675), le menu revient en haut (feuille de style spéciale IE).

Citation:

Envoyé par Bisûnûrs

Je pense que c'est juste le width de ton div id="texte" qui est trop grand.

Quand je le modifie avec la Developer Toolbar (je mets 640px par exemple au lieu de 675), le menu revient en haut (feuille de style spéciale IE).

Effectivement mais ce n'est pas normal...

960 = 675 + 285 donc il ne devrait pas y avoir de soucis (comme sous FF tout amrche nickel)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 #all{ margin:auto; width:960px; } #header{ width:960px; background-color:#CDD1FD; } #contenu{ float:left; width:960px; background-image:url(images/autre/fond_contenu.gif); background-repeat:repeat-y; } #texte{ float:right; width:675px; height:800px; } #all_menu{ float:left; width:285px; text-align:center; } div#menu0{ width:285px; padding-top:20px; /*background-color:gray;*/ } div#menu1{ width:285px; /*background-color:red;*/ } #top{ clear:both; float:right; width:675px; } #footer{ clear:both; width:960px; }

20/09/2007, 19h50
Bisûnûrs

Pourtant, mets un background red sur ton div texte, fais un screenshot et regarde la largeur de ton div, il fait 680px.
20/09/2007, 20h44
Aspic

Citation:

Envoyé par Bisûnûrs

Pourtant, mets un background red sur ton div texte, fais un screenshot et regarde la largeur de ton div, il fait 680px.

Lol exacte ! Alors la je comprends pas :
http://www.zonegeeks.com/software/base-driver.php (plante)
http://www.zonegeeks.com/software/base-bios.php (ne plante pas)

Si on regarde bien, effectivement y'a un problème de width... alors que pour les deux pages, c'est exactement la meme feuille de style :?:? alors pourquoi une telle différence ?

PS : Je te laisse le background Red mais il faudra que je le vire, car ca va répugner les visiteurs sous IE ^^
20/09/2007, 20h51
Bisûnûrs

Ca provient de ta liste dans ton div texte.

Si je la mets à display:none, le problème disparaît.
20/09/2007, 21h01
Aspic

Oui mais du coup on ne voit plus la liste :(
20/09/2007, 21h13
Bisûnûrs

Enlève le padding et margin qu'il y a dessus, ça rentre dans l'ordre aussi.

Après, à toi de les redéfinir.
20/09/2007, 21h27
Aspic
Euh ca ne marche pas chez moi :(

Tu parles de ceux là :
Code:

1 2 3 4 5 ol, ul{ padding-left:2.5em; padding-right:2.5em; text-align:justify; }
Si je supprime les paddings, le problème est toujours la

La balise ul qui est dans ton div texte, redéfinis les margin et padding de cet élément seulement, pas de tous.

Celle-là :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul style="list-style-image:url(../images/autre/pucebleu.gif) "> 
        <li class="space">Téléchargez la dernière version du pilote sur le site du fabriquant ou renseignez vous sur les Forums en cas de problème (vous pouvez également <a href="../site/contact.php" class="menuhaut">nous contacter</a>). La plupart du temps, le fichier téléchargé est un exécutable, c'est-à-dire un fichier avec l'extension <em>exe</em>. Dans ce cas, c'est facile ! Il suffit de lancer le programme qui installera automatiquement le pilote (suivez les instructions qui s'affichent à l'écran).</li> 
        <li class="space">Cliquez sur <span class="instruction">Mettre à jour le pilote</span>.<br> 
          <br> 
          <div align="center"><img src="../images/min/software/maj_etape1.jpg" alt="etape 1" width="502" height="429"></div> 
        </li> 
        <li class="space">Répondez par <span class="instruction">non </span>à la question posée puis cliquez sur <span class="instruction">Installer le logiciel automatiquement.</span><br> 
          <br> 
          <div align="center"><img src="../images/min/software/maj_etape2.jpg" alt="etape 2" width="502" height="425"></div> 
        </li> 
        <li class="space">Si vous possédez un CD Rom qui contient le driver. L'assistant d'installation ferra tout le boulot. Sinon cliquez sur <span class="instruction">Installer à partir d'une liste ou d'un emplacement spécifié</span>. Il faut bien sûr posséder les fichiers nécessaires à l'installation (il faut un fichier de configuration avec l'extension <em>inf</em> et un fichier qui contient le pilote avec l'extension <em>sys</em>). Cochez <span class="instruction">Inclure cet emplacement dans la recherche.</span><br> 
          <br> 
          <div align="center"><img src="../images/min/software/maj_etape3.jpg" alt="etape 3" width="503" height="428"></div> 
        </li> 
        <li class="space">Cliquez sur <span class="instruction">Parcourir</span> et allez chercher le dossier qui contient les fichiersn, cliquez sur <span class="instruction">Suivant</span> et si tout se passe bien, Windows installe votre pilote manuellement.</li> 
        <li>Cliquer enfin sur <span class="instruction">Terminer</span>.</li> 
      </ul>

Mets :

Code:

<ul style="list-style-image:url(../images/autre/pucebleu.gif) ;margin:0;padding:0">

20/09/2007, 21h53
Aspic

Oui ca passe effectivement, mais le soucis ne doit pas venir de là puisque voici une autre page sans balises UL et LI :

http://www.zonegeeks.com/software/as...ger-lettre.php (plante sous IE)

Donc c'est un mystère !

Merci pour ton aide ;)
20/09/2007, 22h11
Bisûnûrs

Là tu as 3 p qui gênent et je ne sais pas pourquoi, quel style as-tu pu leur mettre de différent par rapport aux autres :

Le 2e : Pour Windows 2000 et XP

2 avant class nb seul : L'avertissement Modifier la lettre de lecteur d'un...

L'avant dernier : Cliquez sur le bouton Propriétés puis allez...

Je ne sais comment tu sais que certaines balises plantent mais en tout cas le style de "p" est le meme pour tous !!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<p>Si Windows a attribué une lettre qui ne vous convient pas à une de vos partitions, disques durs ou lecteur CD, voici comment y remédier. Cette astuce nous montre comment attribuer une nouvelle lettre à vos disques durs.</p> 
      <p><strong>Pour Windows 2000 et XP :</strong><br> 
        Allez dans <span class="instruction">Poste de travail</span>, <span class="instruction">Panneau de configuration</span>, <span class="instruction">Outils d'administration</span> et <span class="instruction">Gestion de l'ordinateur</span>.</p> 
      <p class="nb">Pour accéder plus rapidement à la Gestion de l'ordinateur, vous pouvez cliquez directement avec le bouton droit sur le Poste de travail et choisissez Gérer.</p> 
      <p>Dans le menu <span class="instruction">Stockage</span>, cliquez sur <span class="instruction">Gestion des disques</span>.</p> 
      <p>La fenêtre de droite est découpée en deux parties. Dans la partie haute, vos disques durs sont affichés. Dans la partie basse, vos différentes unités de disque sont représentées graphiquement. Ici, faites alors un clic droit sur le lecteur de votre choix et sélectionnez <span class="instruction">Modifier la lettre de lecteur</span> et les chemins d'accès. Cliquez ensuite sur le bouton <span class="instruction">Modifier</span>. Dans le menu déroulant, choisissez la lettre à attribuer, puis cliquez sur le bouton <span class="instruction">OK.</span></p> 
      <p>L'avertissement <span class="instruction">Modifier la lettre de lecteur d'un volume peut empêcher certains programmes de fonctionner. Voulez-vous vraiment modifier cette lettre de lecteur ?</span> apparaît. En effet, les références (raccourcis, entrées dans la base de registre.) à l'emplacement des programmes sur le disque dont vous souhaitez modifier la lettre ne seront plus valides. Il faudra alors dans ce cas les modifier par la suite en changeant la lettre du lecteur.</p> 
      <p>Si vous souhaitez continuer, cliquez sur le bouton <span class="instruction">OK</span>.</p> 
      <p class="nb seul">Windows ne peut pas modifier la lettre de lecteur de votre volume système ou de démarrage.</p> 
      <p><span class="instruction">Pour Win 9x :</span><br> 
        Allez dans <span class="instruction">Démarrer</span>, <span class="instruction">Paramètres</span>, <span class="instruction">Panneau de configuration</span>, <span class="instruction">Système</span> (ou plus rapidement faites un clic droit sur Poste de travail puis choisissez <span class="instruction">Propriétés</span>).</p> 
      <p>Allez ensuite dans le <span class="instruction">Gestionnaire de périphériques</span>. Dans la liste, cliquez sur le + de CD-ROM ou Lecteurs de disque et choisissez le lecteur dont vous souhaitez modifier la lettre.</p> 
      <p>Cliquez sur le bouton <span class="instruction">Propriétés</span> puis allez dans l'onglet <span class="instruction">Paramètres</span>. Enfin, dans la partie <span class="instruction">Lettres de lecteur réservées</span>, sélectionnez une lettre dans les listes <span class="instruction">Lettre de lecteur de début</span> et <span class="instruction">Lettre de lecteur de fin</span>. Cette lettre doit être la même dans les deux listes.</p> 
      <p>Cliquez sur <span class="instruction">OK</span> et redémarrer l'ordinateur.</p>

Code:

1
2
3
4
5
p{
padding-left:2em;
padding-right:2em;
text-align:justify;
}

Ca me rend fou ce nagivateur de m**** me pourri la vie car il comprends pas le francais (pardon le html, css :D)

21/09/2007, 07h52
Bisûnûrs

J'ai trouvé le problème de ces trois p.

Tiens-toi bien ... Dans chacun de ces trois p, il y a du texte en italic et gras qui arrive en fin de ligne.
Etant donné que ton texte est justifié, le fait qu'il soit en italic le fait dépasser d'un ou deux pixels de plus que le texte normal du fait de tes pading en em, donc agrandit ton p, donc plante ton affichage.

Bon courage pour trouver une solution correcte.

Voir 40 message(s) de cette discussion en une page