[css] problème de compatibilité mozilla/IE

[css] problème de compatibilité mozilla/IE Problème :( Noter :

#1 Loupilo

Concepteur de sites Internet

Groupe : Hubmaster
Messages : 1 354
Inscrit(e) : 14-janvier 04
Genre:Homme
Localisation:Sous la pluie
Société:Aozeo

Posté 14 janvier 2004 - 19:05

Bonjour,
je me suis inscris et je poste car j'ai un [gros] problème.
J'ai passé la journée à faire une belle feuille de style, qui marche nickel sous IE, car je teste acec ce navigateur.
j'ai esayé d'ouvrir avec mon navigateur, mozilla, et la mauvaise surprise, le menu #cadreprincipal est décalé.
je reprends ma feuille de style. je change une ligne et ça marche. test sous IE et cette fois c'est sur ce log que c'est décalé.
Je suis desperé..... mon site sera fait (c'est pour ça que j'ai eu recours au css) dans le souci d'accessibilité le plus total et voilà qu'il faudra choisir son navigateur <_<

Mon code IE" dit :

/*
* Ce code est la totale propriété de Monde en Détresse, TOUTE REPRODUCTION EST INTERDITE
* Il est de plus dans votre intêret d'avoir un site au design original,
* pour qu'il ait sa propre identité visuelle, plutôt qu'un design
* plagié...
*/
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: rgb(94,112,128);
margin-top: 20px;
vertical-align: middle;
text-align: center;
}
#boite {
width: 780px;
vertical-align: middle;
\width: 800px;
w\idth: 780px;
height: 1000px;
margin: 0px;
margin-left: auto;
margin-right: auto;
border-top: solid #FFA303 1px;
border-bottom: solid #FFA303 1px;
border-right: solid #FFA303 1px;
border-left: solid #FFA303 1px;
padding: 0px;
}
#header {
padding: 5px;
margin-bottom: 5px;
background-color: rgb(255, 255, 255);
background-image: url(images/banniere2.jpg);
background-repeat: no-repeat;
height: 142px;
vertical-align: middle;
}
#menu {
position: relative;
top: 177px;
left: 0;
width: 146px;
height: 980px;
float: left;
background-color: #FFBB03
}
#cadreprincipal {
position: relative;
width: 599px;
height: 980px;
top: 177px;
left: 0px; C'est cette ligne ! Pour mozilla, je remplace 0 par 170 pour que ce ne soit pas décalé !
}
.article {
color: #000;
width: 599px;
height: 980px;
padding-top: 5px;
padding-left: auto;
position: relative;
background-image: url(images/fond_terre.jpg);
background-color: #FFA303;
background-repeat: no-repeat;
text-align: left;
}

.menuhorizon {
color: #000;
padding: 0,5em;
margin: 0,5em;
position: absolute;
left: 140px;
top: 143px;
}
.titre {
width: auto;
font-weight: bold;
color: #A12200;
height: 20px;
padding-top: 5px;
padding-left: auto;
border: 1px #000;
border-style: none solid none solid;
background-color: rgb(252,248,232);
background-image: url(images/barre_menu5.gif);
background-repeat: repeat-x;
text-align: center;
}

Donc ca m'embete fort, si quelqu'un peut m'aider ce serait super sympa

Merci à vous

Création de sites Internet pour TPE et PME

Haut

#2 Beatnykk

Groupe : Membres
Messages : 501
Inscrit(e) : 18-septembre 03
Localisation:paris
Société:labyrinthe

Posté 14 janvier 2004 - 19:16

bienvenue sur le hub.

excuses moi mais est-ce logique de placer ce calque en mode relatif (proportionnel) alors que tu donnes les valeurs en pixels (absolues) ?

de plus donner une url de ta page de test nous aiderais à t'aider.

ou doit se placer ce #cadreprincipal ? à gauche ? centré ?

--------------------------------
>Nicolas, Infographiste et Webmaster de Meilleur Écran
--------------------------------

Haut

#3 Loupilo

Concepteur de sites Internet

Groupe : Hubmaster
Messages : 1 354
Inscrit(e) : 14-janvier 04
Genre:Homme
Localisation:Sous la pluie
Société:Aozeo

Posté 14 janvier 2004 - 19:25

Je vais essayer mais je suis pour l'instant chez free et ils sont out ces <_<

d'hebergeurs ! le cadre est au centre et à sa gauche il y a un cadre d emenus.
meric à toi

Création de sites Internet pour TPE et PME

Haut

#4 Monique

Le Web à tous

Groupe : Hubmaster
Messages : 3 952
Inscrit(e) : 19-août 03
Genre:Femme
Localisation:rue Georges Mabile, Havré
Société:Webatou

Posté 14 janvier 2004 - 19:48

Bonjour loupilo,

bienvenue sur le Hub

A défaut de pouvoir mettre une page test en ligne, tu peux coller le code (avec juste un contenu minimum) ici.

Amicalement,
Monique
en campagne pour des sites de qualité, conformes aux standards et accessibles... avec mon navigateur préféré (Firefox) et les Bonnes pratiques qualité pour les sites Web (Opquast)
Webatou : accessibilité et qualité des sites Web

Haut

#5 Loupilo

Concepteur de sites Internet

Groupe : Hubmaster
Messages : 1 354
Inscrit(e) : 14-janvier 04
Genre:Homme
Localisation:Sous la pluie
Société:Aozeo

Posté 14 janvier 2004 - 20:08

mon hebergeur re marche mais vu toutes les images je vais m'em****** à changer les liens donc je vous joins le code et la capture d'écran qui correspond.

Merci à vous

Citation

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">
_AT_import url(style.css);
</style>

</head>

<body>
<div id="boite">
<div id="header">
<div class="menuhorizon">

</div>

<div id="menu">
<div class="titre">Menu</div>
</div>
<div id="cadreprincipal">
<div class="titre">Bienvenue !</div>
<div class="article"> Hello !</div>
</div>
</div>

</body>
</html>

P.S : c'est beau ?

Création de sites Internet pour TPE et PME

Haut

#6 Dan

Webmaster

Groupe : Direction
Messages : 22 941
Inscrit(e) : 18-août 03
Genre:Homme
Localisation:St Anne, Alderney
Société:Webmaster Hub Ltd.

Posté 14 janvier 2004 - 20:21

Salut loupilo,

140 K , c'est un peu lourd pour ceux qui n'ont pas l'ADSL

Mais bon, c'est le poids de la copie d'écran et pas celui de ta page...
Par contre, tu ne nous dis pas si c'est le rendu sous IE ou mozilla ?

Dan

La théorie, c'est quand on sait tout et que rien ne fonctionne. La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.
Si la pratique et la théorie sont réunies, rien ne fonctionne et on ne sait pas pourquoi. - Albert Einstein -
Infogérance de serveurs dédiés OVH

Haut

#7 Loupilo

Concepteur de sites Internet

Groupe : Hubmaster
Messages : 1 354
Inscrit(e) : 14-janvier 04
Genre:Homme
Localisation:Sous la pluie
Société:Aozeo

Posté 14 janvier 2004 - 20:24

Image mise à jour

en fait, c'est sous mozilla avec la correction de la ligne defectueuse. mais sous mozilla/IE, une fois l'erreur corrigée, le résultat est le même. et sans la ligne corrigée, sur IE/mozilla, le décalage est le même

Création de sites Internet pour TPE et PME

Haut

#8 lapîn

Groupe : Actif
Messages : 40
Inscrit(e) : 08-décembre 03

Posté 14 janvier 2004 - 21:17

Bonjour

#menu {
position: relative;
top: 177px;
left: 0;
width: 146px;
height: 980px;
float: left;
background-color: #FFBB03

c'est normal que y ait les 2? je pense que tu devrais enlever "posistion : relative"

#cadreprincipal {
position: relative;
width: 599px;
height: 980px;
top: 177px;
left: 0px; C'est cette ligne ! Pour mozilla, je remplace 0 par 170 pour que ce ne soit pas décalé !
}

et ici enlever "position: relative" et mettre float: left à la place. c'est pas mieux?

lapin qu'a ptet dit une grosse connerie mais qu'essaie.