Jump to content
Sign in to follow this  
MS-DOS_1991

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

Rate this topic

Recommended Posts

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>

Edited by Loupilo

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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.

Edited by petit-ourson

Share this post


Link to post
Share on other 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;
}

Share this post


Link to post
Share on other 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: )

Share this post


Link to post
Share on other 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 :)

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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:!!)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...