Aller au contenu

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


MS-DOS_1991

Sujets conseillés

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é par Loupilo
Lien vers le commentaire
Partager sur d’autres sites

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: :unsure:

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

Merci

Lien vers le commentaire
Partager sur d’autres sites

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é par petit-ourson
Lien vers le commentaire
Partager sur d’autres sites

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;
}

Lien vers le commentaire
Partager sur d’autres sites

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: )

Lien vers le commentaire
Partager sur d’autres sites

: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 :)

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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:!!)

Lien vers le commentaire
Partager sur d’autres sites

  • 5 semaines plus tard...

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

<div class="contenu">

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

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

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

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

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

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

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

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

</div>

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

merci

bizz à tous

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...