Ecart IE et Mozilla par Fred03 - page 1

Bonjour,

Après la lecture des tutos de Matéo, je réalise un petit site. J'ai commencé par travailler à la structure de la page d'accueil. Ce que je vois via IE me convient c'est à dire que les blocs sont positionnés comme je le souhaite et mes titres de bloc ont la bonne forme (fond noir et police jaune).

Par contre quand je regarde la même page avec Mozilla, les blocs ne sont plus trop positionnés comme je le veux (certains sont décalés) et les titres des blocs perdent leur mise en forme.

Bref je ne comprends pas d'où cela vient surtout que d'après ce que j'ai pu lire c'est IE qui généralement ne fonctionne pas compètement....

Je vous mets le lien de cette page d'accueil (j'ai pris pour le moment un hébergement gratuit temporaire le temps de la consruction.....faites pas attention au header il est provisoire)

<lien url="http://edsmtest.ifrance.com/"></lien>

Et je vous mets les codes (page d'accueil)

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>EDS Montluçon Football</title>

<link rel="stylesheet" media="screen" type="text/css" title="designsiteedsm" href="design_edsm.css">

</head>

<body>

<div id="en_tete">
<?php include("en_tete.php");
?>
</div>

<div id="menu">
<?php include("menu_edsm.php");
?></div>

<div id="corps">
<div class="actualites"><span class="titre">les actus du jour</span></div>

<div class="edito"><span class="titre">L'édito</span><marquee>Site en construction</marquee></div>

<div class="agenda"><span class="titre">Le
prochain match</span></div>

<div class="resultats_flash"><span class="titre">Le dernier résultat</span></div>

<div class="classement_CFA"><span class="titre">Le classement en CFA</span></div>

<div class="classement_DH"><span class="titre">le classement en DH</span></div>

<div class="pole_jeunes"><span class="titre">Espace pole jeunes</span></div>

<div class="sondage"><span class="titre">Sondage</span></div>

<div class="suspensions"><span class="titre">Joueurs suspendus</span></br>
Cyril Lécluse, suite au match au Mans en fin de saison, a écopé de 4 matchs de suspension. Il manquera donc les 4 premiers matchs de la saison 2006-2007.
</div>

<div class="bloc_vide">c'est un bloc vide pour voir</div>

<div class="connectes"><span class="titre">Connectés</span></div>

</div>

<div id="pied_de_page">
<p>Seconde version du site non officiel de l'EDS
Montluçon football mise en ligne le......</p>

</div>

</body>
</html>

CSS

body
{
width: 760px;
margin-left: 60px;
margin-right: 138px;
margin-top: 20px;
margin-bottom: 20px;
background-image: url("imagefondbody.bmp");
}
#en_tete
{
width: 758px;
height: 207px;
margin-bottom: 10px;
margin-left: 60px;
margin-right: 138px;
}

#corps
{
height: 1200px;
position: absolute;
top: 260px;
width: 758px;
margin-left: 60px;
margin-right: 138px;
background-color: white;
color: black;
margin-bottom: 15px;
padding: 5px;

border: none;
}
.actualites
{
padding-bottom: 4px;

font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
left: 184px;
top: 210px;
width: 382px;
height: 820px;
background-color: white;
color: black;
text-align: justify;
border: 1px solid grey;
}
.agenda
{
padding-bottom: 4px;

font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
left: 568px;
top: 10px;
width: 188px;
background-color: white;
color: black;
text-align: justify;
border: 1px solid grey;
}
.resultats_flash
{
padding-bottom: 4px;
font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
left: 570px;
top: 310px;
width: 184px;
background-color: white;
color: black;
text-align: justify;
border: 1px solid grey;
}
.edito
{
padding-bottom: 4px;

font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
left: 2px;
top: 10px;
width: 564px;
background-color: white;
color: black;
text-align: justify;
border: 1px solid grey;
}
.pole_jeunes
{
padding-bottom: 4px;

font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
left: 2px;
top: 210px;
width: 178px;
background-color: white;
color: black;
text-align: justify;
border: 1px solid grey;
}
.titre
{
font-family: "Comic sans MS", "Arial";
background-color:black;
font-size:13px;
text-align: justify;
color: yellow;
font-weight: bold;
}
.classement_CFA
{
padding-bottom: 4px;

font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
left: 570px;
top: 410px;
width: 184px;
height: 20px;
background-color: white;
color: black;
text-align: justify;
border: 1px solid grey;
}

.classement_DH
{
padding-bottom: 4px;

font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
left: 570px;
top: 610px;
width: 184px;
background-color: white;
color: black;
text-align: justify;
border: 1px solid grey;
}
.sondage
{
padding-bottom: 4px;

font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
left: 2px;
top: 410px;
width: 178px;
background-color: white;
color: black;
text-align: justify;
border: 1px solid grey;
}
.suspensions
{
padding-bottom: 20px;
font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
left: 2px;
top: 610px;
width: 178px;
background-color: white;
color: black;
text-align: justify;
border: 1px solid grey;
}
.connectes
{
padding-bottom: 4px;

font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
left: 2px;
top: 820px;
width: 178px;
background-color: white;
color: black;
text-align: justify;
border: 1px solid grey;
}
.bloc_vide
{
padding-bottom: 4px;

font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
left: 2px;
top: 790px;
width: 178px;
background-color: white;
color: black;
text-align: justify;
border: 1px solid grey;
}
#pied_de_page
{
font-family: "Comic sans MS", "Arial";
font-size:12px;
position: absolute;
top: 1460px;
width: 758px;
margin-left: 60px;
margin-right: 138px;
margin-bottom: 10px;
padding-bottom: 4px;

text-align: center;
color: black;
background-color: yellow;
border: 1px solid black;
}

Fred03

12 juillet 2006 à 22:57:11

jacman

12 juillet 2006 à 23:03:05

bonjour a toi,

bah chez moi que ce soit sous FF ou IE, c'est nikel, il n'y a aucune différence, ou alors je deviens aveugle

Sinon un petite chose, évite le .bmp pour tes images, ce format la est vraiement très lourd pour tes pages, sa ralentit leurs chargements.
Utilise plutot le jpg, quand tu n'a pas de transparence a mettre, ou bien le gif si tu en as

12 juillet 2006 à 23:06:14

Merci beaucoup jacman. Quelque part ça me rassure. Et pourtant sur mon PC, Mozilla met tout en croix

J'espère que d'autres me diront comme toi...

Oui pour le header t'inquiète, ce sera un .jpg

Sinon une petite question complémentaire: j'ai utilisé le "position absolute" pour positionner tous mes blocks les uns par rapport aux autres (le tout dans le bloc général). Est-ce la meilleure solution selon vous?

Merci encore

12 juillet 2006 à 23:10:30

ca doit être pour ca que chez toi sa marche mal, tu doit être en résolution 1240x1024 non ?

bref, le absolute est déconseiller car il prend a partir d'un point (lekel, je sais plus :-°

) mais c'est pas le bon

Il vaudrait mieux utiliser le relatif, car il se refferre au coin de ton écran, et donc, peut importe la résolution que le surfeur auras, cela seras bien positionner

PS: je suis pas trop sur de ce que je viens de dire, je suis pas un pro, même si je m'y connais un peu

12 juillet 2006 à 23:17:07

Je suis en 1024*768

Pour le relatif, Mateo avait l'air de plutot le déconseiller (car il était pas aisé de le positionner....il parlait de prise de tête me semblait il). C'est pour cela que j'avais retenu l'absolute. o_O

12 juillet 2006 à 23:24:39

oui c'est le seul probleme du relatif, mais l'absolute est différent suivatn la résolution, c'est le seul probleme

12 juillet 2006 à 23:37:05

Merci jacman, c'est sympa de m'aider

Si je comprends bien j'ai le choix entre un mode assez facile à positionner mais qui peut créer des pertirbations selon la résolution et un autre qui s'adapte bien quel que soit la résolution mais qu'il faut position avec "des pinces chirurgicales" lol

pas simple.... :-°

Sinon y a t'il d'autres forumistes qui peuvent me dire si ils voient bien la même chose avec IE et Mozilla. Merci

Ecart IE et Mozilla

Ecart IE et Mozilla

Supprimer

Modérer

Signaler le message aux modérateurs