Rechercher : dans
Par :

Differences IE, FF

Dernière réponse le 15 avr 2009 à 16:08:20 InAme19, le 15 avr 2009 à 10:42:18 
 Signaler ce message aux modérateurs

Bonjour,

j'ai des differences entre IE et firefox ( normal ^^)
mais cette fois ci c'est firefox qui pose problème...
j'ai des espaces entre des tr... j'ai résolu le problème mais c'est ss IE que ça ne va plus

alors je voudrai savoir si je pouvais rajouter un style de la sorte:

<!--[if IE]>
<STYLE type="txt/css">
<!--

mon code css

-->
</STYLE>
<![endif]-->

pour éviter d'avoir deux feuilles de styles differentes.

Merci d'avance

Configuration: Windows XP
Firefox 3.0.8

1

Sandriine, le 15 avr 2009 à 11:06:14

As-tu testé?

Cordialement,
Sandrine

Répondre à Sandriine

3

bg62, le 15 avr 2009 à 11:08:03

Bravo pour la réponse .... !
le 'www' est fait aussi pour communiquer, partager et échang­er, non ?

Répondre à bg62

4

Sandriine, le 15 avr 2009 à 11:09:48
  • +2

Ok c'est bien de critiquer les autres, sauf qu'il poste son code sans dire que ça lui pose problème, mais pour demander si il marche. Alors autant tester avant.
Au lieu de critiquer tu pourrai donner la solution....

Merci pour lui

Répondre à Sandriine

2

math 2000, le 15 avr 2009 à 11:07:41

Oui sauf que c'est pas comme ça
<!--[if lte IE ]>
Ici code pour IE (6 et inférieur, à adapter pour toi)
<![endif]-->

il faut pas de de ----
sinon ça devient un commentaire

Répondre à math 2000

26

Dalida, le 15 avr 2009 à 16:03:50

Salut,

il faut pas de de ----
sinon ça devient un commentaire

mais d'après toi pourquoi on appelle ça des commentaires conditionnels ?
-:oD

+ http://www.blog-and-blues.org/...
[ Mathieu ]
Il y a sûrement des pandas pour ne dépendre de rien

Répondre à Dalida

5

math 2000, le 15 avr 2009 à 11:10:29

Tu répond à qui ?
au fait c'est pas du tout pratique le nouvelle affichage avec les réponse qui sont même pas dans l'ordre

Répondre à math 2000

6

InAme19, le 15 avr 2009 à 11:11:40

Oui, ça m'affiche une page banche si je mets du code css...

j'ai trouvé l'attribut !important pour changer le css de firefox,
exemple:

img{

margin-bottom:0px;
margin-bottom:-5px!important;
}

là, sous ff l'image sera décalé de 5px et pas sous IE.

Mais ça marche sous IE6, sous IE8 mais pas sous IE7!!

Si quelqu'un avait une idée.

Répondre à InAme19

8

bg62, le 15 avr 2009 à 11:13:22

Même réponse ... pour IE tu peux tester avec ces outils :
http://www.unesourisetmoi.info/...
b g
le 'www' est fait aussi pour communiquer, partager et échang­er, non ?

Répondre à bg62

7

math 2000, le 15 avr 2009 à 11:12:48

Tu as essayé avec if ie7
chez moi lf ie7 marche pour ie6 aussi

Répondre à math 2000

9

InAme19, le 15 avr 2009 à 11:19:37

Alors,

je viens d'essayer:

<!--[if lte IE7 ]>
<STYLE type="txt/css">

body img{

margin-bottom:0px;

}

</STYLE>
<![endif]-->


mais ça m'affiche une page blanche...

Répondre à InAme19

10

math 2000, le 15 avr 2009 à 11:27:12

Passe la page normalement il y a moyen de rendre les position pareil sur tous les navi

Répondre à math 2000

11

InAme19, le 15 avr 2009 à 11:30:26

Et bien en fait c'est des images dans un tableau,
sous firefox j'ai des espaces sous ces images.

si je fais un margin:-5px; elles se remettent bien mais sous IE elles sont décalées dans l'autre sens...

Répondre à InAme19

12

math 2000, le 15 avr 2009 à 11:32:23

Tu sais que les tableau ne sont pas conseillé pour la mise en page tu essayé normalement avec des div

Répondre à math 2000

13

bg62, le 15 avr 2009 à 11:32:30

Et IE8 ...... !!!???
le 'www' est fait aussi pour communiquer, partager et échang­er, non ?

Répondre à bg62

14

math 2000, le 15 avr 2009 à 11:33:52

Il est qu'en bêta ,non ?

Répondre à math 2000

21

bg62, le 15 avr 2009 à 12:01:25

Non ! il est en circuit depuis pas mal de temps !!! et les mises à jour automatiques l'installent ....
le 'www' est fait aussi pour communiquer, partager et échang­er, non ?

Répondre à bg62

15

InAme19, le 15 avr 2009 à 11:34:16

Et bien sous IE8 cela marche:

img{

margin-bottom:0px;
margin-bottom:-5px!important;
}

mais pas sous IE7....

Répondre à InAme19

16

math 2000, le 15 avr 2009 à 11:37:19

Attent tu dis que c'est decalé dans l'autre sens mais tu as essayé alors l'inverse magin-top
au fait le !important ne marche que sous firefox je crois

Répondre à math 2000

17

InAme19, le 15 avr 2009 à 11:40:44

Oui justement, !important ne marche que sous firefox.

je récapitule:

_j'ai un tableau avec des images.
sous IE pas de problème. Sous firefox j'ai un décalage sous mes images de 5px

_je fais:
img{
margin-bottom:0px;
margin-bottom:-5px!important;
}

là c'est bon sous firefox, mais sous IE7 mes images se décalent de 5px vers le bas, et comme avant ce décalage elles étaient bien positinnées, elles se retrouvent maintenant 5px trop bas...

Répondre à InAme19

18

math 2000, le 15 avr 2009 à 11:41:53

Tu peux passer le code entier de la page avec le css je vais de trouvé un truc pour adapter

Répondre à math 2000

19

InAme19, le 15 avr 2009 à 11:52:27

Voilà pour le tableau:

<table width="998" align="center" cellpadding="0" cellspacing="0" class='fond'>
<tr>
  <td width="998">
	  <table cellspacing="0" cellpadding="0" class='tab1'>
		  <tr>
			<td rowspan="2"><a href="">
			<img class="banniere" src="i09.jpg" alt="" width="284" height="246" border="0" /></a></td>
			<td><a href="">
			<img class="banniere" src="10.jpg" name="Image13" width="103" height="145" border="0" /></a></td>
			<td><a href="">
			<img class="banniere"  src="02.jpg" name="Image14" width="95" height="145" border="0" /></a></td>
			<td><a href="">
			<img class="banniere" src="03.jpg" name="Image15" width="98" height="145" border="0" /></a></td>
			<td><a href="">
			<img class="banniere" src="04.jpg" name="Image16" width="94" height="145" border="0" /></a></td>
			<td><a href="">
			<img class="banniere" src="05.jpg" name="Image17" width="99" height="145" border="0" /></a></td>
			<td><a href="">
			<img class="banniere" src="06.jpg" name="Image18" width="94" height="145" border="0" /></a></td>
			<td><a href="">
			<img class="banniere" src="07.jpg" name="Image19" width="131" height="145" border="0" /></a></td>
		  </tr>
		  <tr>
			<td colspan="7"><img class="banniere" src="11.jpg" width="714" height="101" alt="" /></td>
			</tr>
		</table>
	</td>
  </tr>

	<tr>
		<td >
		<div id="page">
                </div>
                 </td>
       </tr>
</table>

Répondre à InAme19

20

math 2000, le 15 avr 2009 à 12:00:26

Chez moi c'est pareil


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
<!--
img{
margin-bottom:0px;
margin-bottom:-5px!important;
} -->
</style>
</head>
<body>
<table class="fond" align="center" cellpadding="0"
cellspacing="0" width="998">
<tbody>
<tr>
<td width="998">
<table class="tab1" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td rowspan="2"><a href="">
<img class="banniere"
src="http://bormat2.free.fr/chiot%201.jpg" alt=""
border="0" height="246" width="284"></a></td>
<td><a href="">
<img class="banniere"
src="http://bormat2.free.fr/chiot%201.jpg" name="Image13"
border="0" height="145" width="103"></a></td>
<td><a href="">
<img class="banniere"
src="http://bormat2.free.fr/chiot%201.jpg" name="Image14"
border="0" height="145" width="95"></a></td>
<td><a href="">
<img class="banniere"
src="http://bormat2.free.fr/chiot%201.jpg" name="Image15"
border="0" height="145" width="98"></a></td>
<td><a href="">
<img class="banniere"
src="http://bormat2.free.fr/chiot%201.jpg" name="Image16"
border="0" height="145" width="94"></a></td>
<td><a href="">
<img class="banniere"
src="http://bormat2.free.fr/chiot%201.jpg" name="Image17"
border="0" height="145" width="99"></a></td>
<td><a href="">
<img class="banniere"
src="http://bormat2.free.fr/chiot%201.jpg" name="Image18"
border="0" height="145" width="94"></a></td>
<td><a href="">
<img class="banniere"
src="http://bormat2.free.fr/chiot%201.jpg" name="Image19"
border="0" height="145" width="131"></a></td>
</tr>
<tr>
<td colspan="7"><img class="banniere"
src="http://bormat2.free.fr/chiot%201.jpg" alt=""
height="101" width="714"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div id="page"></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Répondre à math 2000

22

AlainF, le 15 avr 2009 à 12:30:04
  • +1

Bonjour à tous,
ma méthode qui m'a souvent sauvé lors de modifications ultérieures (quand vous devez vous replonger dans le code):

j'insère dans la zone "head" de ma page (dans un include "in-head" pour toutes les pages) le lien vers ma feuille de style générale (habillage) correspondant à la mise en page Firefox par défaut (respect W3C) puis pour les différences de présentations IE, j'ai des feuille de style pour IE général, IE6, 7 et 8 en particulier avec seules les modifications nécessaires et surtout pas de : !important dans la page

Exemple d'appel dans le head, feuille de style dans dossier /css/:

//Appel Feuille css générale
<link rel="stylesheet" href="css/habillage.css" type="text/css" media="projection, screen, tv" />

//Appel Feuille css pour IE
<!--[if IE ]>
   <link rel="stylesheet" href="css/habillage_ie.css" type="text/css" media="projection, screen, tv" />
<![endif]-->

//Appel Feuille css IE6
<!--[if lte IE 6]>
   <link rel="stylesheet" href="css/habillage_ie6.css" type="text/css" media="projection, screen, tv" />
<![endif]-->

//Appel Feuille css IE7
<!--[if IE 7]>
   <link rel="stylesheet" href="css/habillage_ie7.css" type="text/css" media="projection, screen, tv" />
<![endif]-->

//Appel Feuille css IE8
<!--[if IE 8]>
   <link rel="stylesheet" href="css/habillage_ie8.css" type="text/css" media="projection, screen, tv" />
<![endif]-->



J'utilise par défaut firefox et pour les adaptations IE, je visualise avec IETester (logiciel perméttant d'avoir tous les IE, dont le dernier BETA IE 8 et je modifie à la demande, ce qui me libère le code.

Pensez au futur quand vous devrez modifier 2, 3 trucs dans le code!!!

Bon code

Répondre à AlainF

23

math 2000, le 15 avr 2009 à 12:35:28

Interessant ie tester je vais le télécharger pour voir moi j'utlisais multiple ie mais ton logiciel a 'air plus pratique

Répondre à math 2000