Differences IE, FF

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

As-tu testé?

Cordialement,
Sandrine

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

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

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.

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

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

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

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

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

il est qu'en bêta ,non ?

et bien sous IE8 cela marche:

img{

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

mais pas sous IE7....

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

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

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

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>

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>

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

ha ba super du coup je me suis rendu compte que mon menu déroulant n'était pas compatible avec ie8 alors qu'il marcher sous ie6 ie7 et firefox opéra et les autres

edit avec la mise à jour ça remarche mais différence d'affichage bizarre

salut,

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

avant de jouer les apprentis sorciers, avez-vous essayé :

table{
border-collapse:collapse;
}

ou de fixer la taille des <tr> et/ou <td> ?