18041 sujets

Questions générales et questions de débutants

[Résolu] whidth css : Différences d'interprétation IE8 et FF3.6

Bonjour à cette communauté que je découvre Smiley cligne ,

Voici mon problème :
Une page comportant le doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Une ligne dans la feuille css : width: 985px;

Cette page apparaît différemment sous IE8 et FF3.6 :
- 918 pixels de large sous FF
- 1013 pixels de large sous IE

Je cherche à comprendre depuis des jours mais en vain Smiley decu
Je n'ai pas trouvé de réponses non plus dans les sujets de ce forum.

Quelqu'un peut-il, svp, m'aider ?
Merci de m'avoir lu,
Jean Le Brun


Smiley fache

Modifié par CyranOrion (30 Sep 2010 - 07:30)
Administrateur
Bonjour,

une page en ligne ou un bout de code beaucoup plus complet nous aiderait bien Smiley smile Parce que si je vous dis "Le planeur a une envergure de 17m et seulement une finesse de 2" et vous demande pourquoi, mmh ? Smiley cligne
A vu de nez, je dirais interpretation différente des margin et padding sous ie et ff. Mais effectivement, on n'a pas beaucoup de détails.
Un ptit reset CSS ?

Enfin bon, je dis ça... Je suis une bille sous ie...
Bonsoir Felipe et Melhi et merci de vous intéresser à mon problème,

Je n'ai pas osé transmettre le code dès mon premier message, pardon ;o)

Je colle ci-dessous le début du code html de la page :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Date de création: 20/04/2009  - modification Stéph : 22/11/2009 -->
<!-- date modification 21/11/2009 par Stephane -->
<head>
  	<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
  	<meta http-equiv="Content-language" content="fr">
  	<title>Anciens élèves de l'Ecole Technique Aéronautique (ETA Toulouse et Ville d'Avray) - Page d'accueil.</title>
  	<meta name="description" content="Site des anciens Elèves des Ecoles Techniques Aéronautiques de Toulouse et Ville d'Avray - Page d'accueil.">
  	<meta name="keywords" content="ETA,ETAT,ETATVA,Ecole Technique Aeronautique,Ecole,Technique,Aeronautique,Toulouse,Avray">
  	<meta name="language" content="fr">
  	<meta name="author" content="Jean Le Brun">
  	<meta name="reply-to" content="cyranorion@club-internet.fr">
  	<meta name="robots" content="index,nofollow">
	
	<link rel="stylesheet" href="styles.css" type="text/css">
	
	<script src="js/trombines.js" type="text/javascript"></script>
	
	<style type="text/css">
		#accueil_1 { border: 1px solid blue; background: #ffc}
		#accueil_1 img { width: 90% ; margin-left:3px; margin-top: 6px; border: 1px solid }
		#accueil_1 p { margin:0;padding:0; text-transform:capitalize; }
		#ciel {
			height: 133px;
			background: url(images_sam/c_7.jpg) no-repeat center center;
			position: relative;
			overflow-x: hidden;
			font-size: 10px;
			font-family: arial, sans-serif;
			text-align: center;
		}
		<!-- #caravelle { position: absolute; top: 53px; right: 0; } -->
		#caravelle { position: absolute; top: 53px; right: 0; }
	</style>
	
	<script type="text/javascript">
		var pos = 200, w = 0, d = 0, depart, n = Math.floor(Math.random()*7);
		function vol(speed) {
 			if(speed>d) {
 				n++;
 				n = n>7? 1: n;
 			document.getElementById('ciel').style.backgroundImage = 'url(images_sam/c_' + n +'.jpg)';
 			speed = -w;
 			}
 			speed++;
 			document.getElementById('caravelle').style.right = speed+'px';
 			depart = setTimeout('vol('+speed+')',10);
		}
		window.onload = function() {
			w = document.getElementById('caravelle').width;
			d = document.getElementById('ciel');
			//	d.style.backgroundImage = 'url(images_sam/c_' + c +'.jpg)';
			d = d.offsetWidth + w;
			setTimeout('postload()',2000);
			vol(200);
		}
	</script>
</head>


<body>
	<!-- div principal -->
	<div id="principal">
		<a name="haut"></a>

		<!-- div> sommaire -->
		<div id="sommaire">
			<a href="pages/visiter_site.html">Visite du site</a>
			<a href="pages/historique.html">Historique</a> 
			<a href="pages/effectifs.html">ETA retrouvés</a>  
			<a href="pages/nouveautes.html">Nouveautés</a>  
			<a href="pages/statistiques.html">Statistiques</a> 
			<a href="pages/solutions.html">Informatique</a>
			<a href="pages/remerciements.html">Remerciements</a> 
			<a href="">----------------------------------------------------------------------------------------------------------------------------------------------</a>
			<a href="pages/histoire_eta.html">Histoire ETA</a>
			<a href="pages/batiments_eta.html">Bâtiments ETA</a>
			<a href="pages/profs_eta.html">Profs ETA</a>
			<a href="pages/f84.html">Le F84</a>
			<a href="pages/culture_eta.html">Culture ETA</a>
			<a href="pages/sports_eta.html">Sports ETA</a>
			<a href="busca_vintage/index.html">Collection vintage</a>
			<a href="pages/nouvelle_rubrique.html">Libre</a>
			<a href="">----------------------------------------------------------------------------------------------------------------------------------------------</a>
 			<a href="pages/promo46-50.html">Promo 1946/1950</a>  
			<a href="pages/promo47-51.html">Promo 1947/1951</a>  
			<a href="pages/promo48-52.html">Promo 1948/1952</a>  
			<a href="pages/promo49-53.html">Promo 1949/1953</a>  
			<a href="pages/promo50-54.html">Promo 1950/1954</a>  
			<a href="pages/promo51-56.html">Promo 1951/1956</a>  
			<a href="pages/promo52-57.html">Promo 1952/1957</a>  
			<a href="pages/promo53-58.html">Promo 1953/1958</a>  
			<a href="pages/promo54-59.html">Promo 1954/1959</a>  
			<a href="pages/promo55-60.html">Promo 1955/1960</a>  
			<a href="pages/promo56-61.html">Promo 1956/1961</a>  
			<a href="pages/promo57-62.html">Promo 1957/1962</a>  
			<a href="pages/promo58-63.html">Promo 1958/1963</a>  
			<a href="pages/promo59-64.html">Promo 1959/1964</a>  
			<a href="pages/promo60-65.html">Promo 1960/1965</a>
			<a href="pages/promo61-66.html">Promo 1961/1966</a>		
			<a href="pages/promo62-67.html">Promo 1962/1967</a>
			<font color="#81E6FF">Promo 1958./19630</font>
			<font color="#81E6FF">Promo 1959./19640</font>
			<font color="#81E6FF">Promo 1960./19650</font>
			<!--<a href="                     "><font color="#81E6FF">Promo 1958/19630</font></a>-->
			
		</div><!-- fin 'sommaire' -->

		<!-- div accueil_1 -->
		<div id="accueil_1">
			<img src="http://www.cyranorion.fr/eta_sam/trombines/aujourdui/t_at_claude01.jpg" alt="Clic pour marche/arrêt" title="Clic pour marche/arrêt" 
			onclick="toggle()" >
			<p>At Claude</p>
		</div><!-- fin 'accueil_1' -->
		 	
 		<!-- width="144" height="164" -->
		<p class="date">Page créée le 20/04/2009 - Modification de Stéphane Moriaux le 22/11/2009 -
		<script language="JavaScript" type="text/javascript" src="date_mise_a_jour.js"></script></p>

		<div id="ciel">« Caravelle » - Premier roulage : 13 mai 1955, premier vol : 27 mai 1955<img id="caravelle" src="images_sam/caravelle_1.gif" alt="">
		</div><!-- fin 'ciel' -->

		<!-- img src="documents/caravelle_2.gif" width="988" height="34" 
		title="SE-210 « Caravelle » - Premier roulage : 13 mai 1955, premier vol : 27 mai 1955" alt="caravelle" -->


Ci-dessous, début de la feuille css


body {
    margin: 0;
    font-family: times, Times New Roman, serif;
    color: blue;
    background: #40C8F6;
    }

#principal {  /* contient tout le reste */
    /*width: 980px;*/
    width: 985px;/* Largeur totale de la page à l'écran donne 918 sous FF et 1013 sous IE ????? */
    margin-left: 15px;/* Marge externe entre bord gauche de l'écran et bord gauche de la feuille affichée */
    padding: 8px; /* Marge interne sur les 4 côtés de la feuille affichée : padding-top, padding-right, padding-bottom, padding-left */
    background: url(fonds/bleu_1.gif) repeat-y left top #40C8F6;
    } 

/*Times New Roman ajouté en tête de font-family le 28/01/2009*/
#sommaire { 
    float: left;
    /*\*//*/div.madiv {width: 800px;}/* */ 
    width: 800px!Important; 
    border: 1px solid; 
    text-align: center;
    font-family: sans-serif,Times New Roman,geneva, helvetica, arial,verdana ;
    font-weight: bold;
    background: #81E6FF;
    }
/* line-height: 1.5em; ramené à 1 le 28/01/2009*/
#sommaire a { 
    white-space: nowrap; /* !important; */
    padding: 0px 5px;/* Marges internes Haut,Bas et "Droite, Gauche */ 
    line-height: 1em; 
    }
/* survol des items du menu par la souris*/    
#sommaire a:hover { color: maroon; background: yellow }

/* Trombinoscope animé et icône retour à la page d'accueil*/    
#accueil_1    { 
    float: left;
    /* margin-left:10px;*/
    margin-left:10px;/* Marge externe entre élément précédent (sommaire) et boîte "accueil-1 */
    width: 164px; 
    top:1px;
    color: #c00;
    font-style: italic;
    text-align: center;
    }
#accueil_1 p    { 
    text-align: center;
    }
    
#accueil_google    {
    float: right;
    color: #008000;
    font-style: italic;
    }
    
h1 { /* titre */
    left: 5px;
    font-size: 24pt;
    }

h2 { /* soustitre1 */
    left: 25px;
    font-size: 18pt;
    }

h3 { /* soustitre2 */
    left: 45px;
    font-size: 14pt;
    font-weight: normal;
}

h4 { /* sous-sous-titres en italique */
    margin: 0 5px -10px 35px;
    font-size: 14pt;
    font-weight: normal;
    font-style: italic;
}

h2, h3 {clear: left; margin-top: 15px; }
        
p { /* texte */
    position: relative;
    margin-left: 35px;
    margin-right: 5px;
    font-size: 12pt;
    text-align: justify;
    }



Au cas où cela pourrait servir, l'url de la page est :
http://www.cyranorion.fr/eta_sam/index.html

J'ai oublié de préciser que je teste avec une machine sous WinXp et une résolution d'écran de 1280x1024.

Pour Felipe : si je comprenais ce qu'est une finesse de 2" (c'est le " qui me chiffonne), je crois que je pourrais calculer sur quelle distance max cet appareil peut planer, non ? ;o)

Bonne nuit et cordiales salutations,
Jean
bonsoir,

intrigué , je suis allez voir et dans IE7/8 et ff 3.6 (vista).

resultats : ces 3 là affiche sur 1001px de large la page d'accueil comme l'indique la feuille de style .(985px de largeur + marges internes de 8px ) .

Impossible de percevoir le defaut que tu décris . (probleme de cache ? )

GC
gc-nomade a écrit :

Impossible de percevoir le defaut que tu décris . (probleme de cache ? ),
GC


Bonjour GC et merci de te pencher sur mon problème,

Pas de pb de cache, je réactualise systématiquement.

Deux réactions :
- heureux que les visiteurs du site ne voient pas "mon" dysfonctionnement Smiley smile ,
- je comprends encore moins ce qui m'arrive Smiley decu

Le problème est donc chez moi !!!
Pensant que le problème réside dans la résolution de mon écran (1280x1024), je viens de passer en 1024x768, plus standard. Même défaut 923 pixels sous FF3.6 et 1005 sous IE8 ????

Peux-tu me dire qu'elle est ta résolution d'écran ?

Encore merci
Cordialement,
jean
J'ai fait le test sur une autre machine : aucune différence entre IE8 et FF3.6

La question est donc résolue bien que je ne pige absolument pas pourquoi il existe sur la machine initiale.

Encore merci à ceux qui m'ont répondu.
Cordialement,
jean
Sujet clos
Aller à