Aller au contenu

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

Loupilo

Par Loupilo
dans (X)HTML et CSS

 Partager

Sujets conseillés

Loupilo

Loupilo

Posté
Posté

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

/*

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

Lien vers le commentaire
Partager sur d’autres sites
Beatnykk

Beatnykk

Posté
Posté

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é ?

Lien vers le commentaire
Partager sur d’autres sites
Loupilo

Loupilo

Posté
  • Auteur
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Monique

Monique

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Loupilo

Loupilo

Posté
  • Auteur
Posté

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

1.jpg

<!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 ?

Lien vers le commentaire
Partager sur d’autres sites
Dan

Dan

Posté
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
Loupilo

Loupilo

Posté
  • Auteur
Posté

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

Lien vers le commentaire
Partager sur d’autres sites
lapîn

lapîn

Posté
Posté

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.

Lien vers le commentaire
Partager sur d’autres sites
Loupilo

Loupilo

Posté
  • Auteur
Posté

Ca marche ! Il fallait rajouter un "float: right" au cadre principal :rolleyes:

Maintenant autre pb, j'arrive pas à mettre du texte dans mon menu :nono::nono:

Pfou.... moi et le css :P

Si qql peut m'aider, ne vous genez pas ;)

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
 Partager
Aller sur la liste des sujets
×
×
  • Créer...