pb entre i.e / firefox / opera (ca vous etonne ?)

MS-DOS_1991 · 6 Mars 2005

Bonjour,

Je suis en train de créer mon site perso et jusqu'il y a quelques jours, je n'utilisais que I.E pour le css et le rendu. (nooooooooooon pas le fouet !!! :lol: )

Seulement depuis j'ai téléchargé FireFox et Opera et bien entendu le rendu n'est pas du tout le meme: les blocs <div> apparaissent décalés sur Opera et Firefox.

Je crois que le probleme vient du fait que j'ai dû utiliser des "Hacks css" pour que Internet Explorer puisse afficher normalement le texte. :unsure:

J'utilise Mozilla Firefox, Opéra et Maxthon (autrefois MyIE2) qui est un très bon logiciel (gestion des onglets, etc) MAIS qui utilise le noyau d'Internet Explorer 6).

Voila le code (simplifié a mort bien sûr)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>
      Index.php
    </title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta http-equiv="Default-Style" content="/css/css_Default.css" />
    <meta http-equiv="expires" content="15 days" />
    <link rel="stylesheet" type="text/css" href="/css/default.css" />
  </head>
  <body>
    <p>
      <div id="cache">
        <table id="Tableau_Chargement_page_01" cellpadding="4" cellspacing="4">
          <tr>
            <td align="center" valign="middle">
              <table id="Tableau_Chargement_page_02" cellpadding="0" cellspacing="0">
                <tr>
                  <td align="center" valign="middle">
                    <div id="Tableau_Chargement_page_Texte">
                      <br />
                      Chargement en Cours...
                      <br />
                      Veuillez Patienter
                      <br />
                      <br />
                    </div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
<script type="text/javascript">
<!--/*--><![CDATA[//><!--
/*
SCRIPT EDITE SUR L'EDITEUR JAVASCRIPT
[url="http://www.editeurjavascript.com"]http://www.editeurjavascript.com[/url]
*/
var nava = (document.layers);
var dom = (document.getElementById);
var iex = (document.all);
if (nava) { cach = document.cache }
else if (dom) { cach = document.getElementById("cache").style }
else if (iex) { cach = cache.style }
largeur = screen.width;
cach.left = Math.round((largeur/2)-200);
cach.visibility = "visible";
function cacheOff()
{
cach.visibility = "hidden";
}
window.onload = cacheOff
//--><!]]>
</script>
      <!-- FIN DU SCRIPT -->
    </p>
    <div id="top">
    </div>
    <div id="left">
      <?php include('includes/Main_Menu-Left.php'); ?>
    </div>
    <div id="middle">
texte Principal au milieu de la Page.
    </div>
    <div id="right">
      <?php include('includes/Main_Menu-Right.php'); ?>
    </div>
  </body>
</html>

... et le css:


body {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #ccc;
	background-color: black;
}
p {
	font-size: 12px;
	line-height: 22px;
	margin-top: 20px;
	margin-bottom: 20px;
}
#top {
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	border: 5px solid #ccc;
	background: black;
	height: 100px;
/* ie5win fudge begins */
	/*voice-family: "\"
}
	\"";
	voice-family:inherit;
	height: 70px;
}
html>body #top {
	height: 70px;
/* ie5win fudge ends */
}
#left {
	position: absolute;
	top: 120px;
	left: 0px;
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
	width: 150px;
/* ie5win fudge begins */
	/*voice-family: "\"
}
	\"";
	voice-family:inherit;
	width: 120px;
}
html>body #left {
	width: 120px;
/* ie5win fudge ends */
}
#middle {
	position: relative;
	margin: 20px 190px 20px 190px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
}
#right {
	position: absolute;
	top: 120px;
	right: 0px;
/* Opera5.02 will show a space at right when there is no scroll bar */
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
	width: 150px;
/* ie5win fudge begins */
	/*voice-family: "\"
}
	\"";
	voice-family:inherit;
	width: 120px;
}
html>body #right {
	width: 120px;
/* ie5win fudge ends */
}
pre {
	font-size: 12px;
	line-height: 22px;
	margin-top: 20px;
	margin-bottom: 10px;
}
#top {
	margin: 20px 20px 0px 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
	height: 100px;
/* ie5win fudge begins */
	voice-family: "\"
}
	\"";
	voice-family:inherit;
	height: 70px;
}
html>body #top {
	height: 70px;
/* ie5win fudge ends */
}
#left {
	position: absolute;
	top: 120px;
	left: 0px;
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
	width: 150px;
/* ie5win fudge begins */
	voice-family: "\"
}
	\"";
	voice-family:inherit;
	width: 120px;
}
html>body #left {
	width: 120px;
/* ie5win fudge ends */
}
#middle {
	margin: 20px 190px 20px 190px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
}
#right {
	position: absolute;
	top: 120px;
	right: 0px;
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
	width: 150px;
/* ie5win fudge begins */
	voice-family: "\"
}
	\"";
	voice-family:inherit;
	width: 120px;
}
html>body #right {
	width: 120px;
/* ie5win fudge ends */
}
#Tableau_Chargement_page_01 {
	width: 400px;
	background-color: #CC0000;
}
#Tableau_Chargement_page_02 {
	width: 100%;
	background-color: #000000;
}
#Tableau_Chargement_page_Texte {
	font-family: Plump MT, arial, helvetica, sans-serif;
	font-size: medium;
	font-weight: bolder;
	color: #CC0000;
}
#cache {
	position: absolute;
	top: 200px;
	z-index: 10;
	visibility: hidden;
}

Je précise que les hacks css ne sont pas de moi et ils ne sont pas "valides css" (le validateur du W3C ne les reconnait pas et je tiens à être "aux normes")

:wacko: :wacko: Voili voila : :wacko: :wacko:

Pourriez-vous me dire comment les améliorer et les rendre compatibles avec les navigateurs intelligents et à jour ?

P.S: autre pitite question:

Vous aurez certainement remarqué un autre bug d'I.E: je suis OBLIGE d'encadrer la fenetre qui apparait au chargement de la page par deux balises <p> et </p> sinon Internet Explorer l'affiche tres mal !!!

Or, Firefox ne comprend pas cela (et il a bien raison) et affiche mal la fenetre... une solution ??

Merci d'avance,

.Tom

<modérateur: merci d'utiliser la balise codebox pour les grands extraits de codes>

Modifié 6 Mars 2005 par Loupilo

petit-ourson · 6 Mars 2005

Je n'ai pas le temps de répondre, mais prévilégie le tag codebox pour insérer ton code sur le forum.

;o)

MS-DOS_1991 · 6 Mars 2005

Rebonjour,

Désolé pour l'utilisation (ou plutot la non-utilisation :hypocrite: ) de la balise CODEBOX... Je ne suis pas un habitué de ce forum. :unsure:

Quelqu'un aurait-il une astuce à me donner ?

Merci

petit-ourson · 6 Mars 2005

J'ai du mal a voir ce que tu souhaites faire. Tu souhaites reproduire ce que l'on a avec firefox sur les autres navigateurs ?

Peux tu nous donner la feuille de styles sans les hack.

Modifié 6 Mars 2005 par petit-ourson

MS-DOS_1991 · 6 Mars 2005

Merci d'avoir répondu aussi vite

En fait, je veux que cette page s'affiche aussi bien avec Firefox qu'avec Internet Explorer car pour l'instant, elle ne s'affiche bien qu'avec Internet Explorer :down:

Voici la feuille de style sans les hacks


/* CSS Document */
body {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #ccc;
	background-color: black;
}

p {
	font-size: 12px;
	line-height: 22px;
	margin-top: 20px;
	margin-bottom: 20px;
}
#top {
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	border: 5px solid #ccc;
	background: black;
	height: 100px;
}

#left {
	position: absolute;
	top: 120px;
	left: 0px;
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
	width: 150px;
}

#middle {
	position: relative;
	margin: 20px 190px 20px 190px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
}

#right {
	position: absolute;
	top: 120px;
	right: 0px;
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
	width: 150px;
}

#top {
	margin: 20px 20px 0px 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
	height: 100px;
}

#left {
	position: absolute;
	top: 120px;
	left: 0px;
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
	width: 150px;
}

#middle {
	margin: 20px 190px 20px 190px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
}

#right {
	position: absolute;
	top: 120px;
	right: 0px;
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: black;
	width: 150px;
}



#Tableau_Chargement_page_01 {
	width: 400px;
	background-color: #CC0000;
}
#Tableau_Chargement_page_02 {
	width: 100%;
	background-color: #000000;
}
#Tableau_Chargement_page_Texte {
	font-family: Plump MT, arial, helvetica, sans-serif;
	font-size: medium;
	font-weight: bolder;
	color: #CC0000;
}
#cache {
	position: absolute;
	top: 200px;
	z-index: 10;
	visibility: hidden;
}

petit-ourson · 6 Mars 2005

visiblement apres avoir tester, je ne vois pas de différence lorsque les div "left" et "right" sont pleines.

http://www.bouba-le-petit-ourson.com/test/test-01.gif

PS: la capture d'IE est légèrement plus petite que celle de Firefox (en longueur)

Modifié 6 Mars 2005 par petit-ourson

MS-DOS_1991 · 6 Mars 2005

En fait avec Internet Explorer, ca donne ca:

+------------------------------------------------------------------------------------------+
|                                                                                          |
|                                                                                          |
|                                                                                          |
+------------------------------------------------------------------------------------------+
+----------+  +--------------------------------------------------------------+  +----------+
|          |  |                                                              |  |          |
|          |  |                                                              |  |          |
|          |  |                                                              |  |          |
|          |  |                                                              |  |          |
|          |  |                                                              |  |          |
|          |  |                                                              |  |          |
|          |  |                                                              |  |          |
|          |  |                                                              |  |          |
|          |  |                                                              |  |          |
|          |  |                                                              |  |          |
+----------+  +--------------------------------------------------------------+  +----------+

et avec firefox les deux colonnes remontent, empiètent sur celle du haut et sont décalées par rapport à la colonne du centre... (oui je sais c compliqué comme histoire... :unsure: )

MS-DOS_1991 · 6 Mars 2005

:oops: j'ai oublié de préciser: sur Internet Explorer, le positionnement des boites n'est effectif qu'avec les hacks (dans le premier sujet) et ta capture petit-ourson ne comporte visiblement pas les hacks

En tout cas, Merci beaucoup de me répondre, c'est sympa

petit-ourson · 6 Mars 2005

Et un truc plus simple comme ca ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>
Index.php
</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="expires" content="15 days" />
<link rel="stylesheet" type="text/css" href="default-ok.css" />
</head>
<body>

<div id="top">
Titre de la page

</div>

<div id="left">
Col de gauche<br />
Col de gauche<br />
Col de gauche<br />
Col de gauche<br />
Col de gauche<br />
Col de gauche
</div>

<div id="right">

Col de droite<br />
Col de droite<br />
Col de droite<br />
Col de droite<br />
Col de droite<br />
Col de droite
</div>

<div id="middle">
texte Principal au milieu de la Page.
</div>


</body>
</html>

et la feuille de style :

body {
	margin:		20px;
	padding:	0;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #ccc;
	background-color: black;
}

div#top, div#left, div#right, div#middle {
	border: 5px solid #CCC;
	padding: 10px;
}

div#top {
	height: 100px;
	margin-bottom: 20px;
	voice-family:			 "\"}\"";
	voice-family:			 inherit;
	height: 70px;
}

.ie5debug {
}

div#left {
	float: left;
}

div#right {
	float: right;
}

div#left, div#right {
	width: 150px;
	voice-family:			 "\"}\"";
	voice-family:			 inherit;
	width: 120px;
}

.ie5debug {
}

div#middle {
	margin: 0px 170px;
	voice-family:			 "\"}\"";
	voice-family:			 inherit;
	margin: 0px 170px;
}

A priori ca fonctionne sous IE 5.x IE 6 Firefox 1.01 et Opera 7.56 (je crois). Je pense qu'il vaut mieux sortir les hack dans une autre feuille de style que l'on fera lire que par les IE 5.x (via les commentaires conditionnelles Microsoft). Ca éclaircira le code et le rendra plus propre.

Je n'ai pas regardé a quoi servait le tableau et le javascript.

MS-DOS_1991 · 6 Mars 2005

Super, Merci !!!! :yoot: :yoot: :yoot: :yoot: :yoot: :yoot: :yoot:

Ca marche d'enfer et en plus c'est purement valide !!!

Merci encore petit-ourson (au fait j'ai été voir ton site: il est pas mal du tout :up: :up:!!)

petit-ourson · 6 Mars 2005

Il faut souvent repartir à zéro pour réussir quelques choses. Bonne continuation à toi.

MS-DOS_1991 · 6 Mars 2005

OK bon ben maintenant, je crois que l'on peut mettre

[sUJET RESOLU]

:lol: :lol: :lol:

[sUJET RESOLU]

@+ tout le monde

P.S: encore merci et bravo pour le Forum

hikaru · 5 Avril 2005

Salut j'ai lu attentivement le message et j'ai repris les codes pour faire mon site moi aussi

J'ai remarqué que losque tu ajoute des nouvelles lignes dans la partie "millieu"; apres la 7e ligne ,la ligne se decale vers la gauche.

Le probleme c'est ke je ne comprend pas pourquoi. est-ce que quelq'un peu m'aider??

***********voila ce ke je rajoute **********

texte Principal au milieu de la Page.<br/>

</div>

******************************************

merci

bizz à tous

hikaru · 5 Avril 2005

j'ai oublié de préciser que c'etait avec internet exploreur 6 que cela se produisait

Connexion

pb entre i.e / firefox / opera (ca vous etonne ?)

Sujets conseillés

MS-DOS_1991

petit-ourson

MS-DOS_1991

petit-ourson

MS-DOS_1991

petit-ourson

MS-DOS_1991

MS-DOS_1991

petit-ourson

MS-DOS_1991

petit-ourson

MS-DOS_1991

hikaru

hikaru

Veuillez vous connecter pour commenter

Parcourir

Activité