28220 sujets

CSS et mise en forme, CSS3

[RESOLU] Problème de marge du haut FF/IE7

Bonjour à tous,

Je suis nouvelle sur ce forum et débutante en CSS.

Je rencontre un souci avec une mise en page. Voici comment j'ai construit le truc :

- une boîte conteneur avec les propriétés suivantes :
div#container {
  width: 1003px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
}


- une boîte header avec l'image du haut et le menu.

- une boîte "contenu" avec les propriétés suivantes :

div#content {
  position: relative;
  float: left;
  background-color: #000000;
  width: 961px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
  padding: 30px 20px 10px 20px;
  font-family: Tahoma, Lucida Grande, Arial, Helvetica, sans-serif;
  color: #ffffff;
  border-style: solid ;
  border-color: #2a2a2a #2a2a2a #2a2a2a #2a2a2a;
  border-width: 1px;
  font-size: 13px;
  text-align: justify;
  overflow: hidden;
}


Sous firefox, tout s'affiche parfaitement. Le contenu de la boîte "contenu" se trouve bien en dessous du header, et me compte 30 de padding à partir du bas de la boîte du dessus.

Par contre, IE7 me calcule les 30 de padding à partir du haut de la page alors que je voudrais qu'il me les calcule comme sous Firefox. Là du coup, le contenu chevauche l'image du haut qui est à moitié masquée et on ne voit plus le menu Smiley decu

Merci à ceux qui auront une idée afin que je puisse résoudre ce problème Smiley smile
Modifié par Ada (08 Jan 2007 - 16:29)
Bonjour Ada et bienvenue sur le forum Smiley smile

Pourrais-tu nous montrer un exemple en ligne, ça serait plus facile pour cerner rapidement le problème (au moins dans mon cas Smiley cligne )
Modifié par Alan (13 Dec 2006 - 20:07)
Bonjour Alan,

Merci de ta réponse. Voilà le lien vers la page : lien Tout est nickel sous Firefox et ça merdouille sous IE7. Merci d'avance ^^
Bonsoir,
Tu compliques inutilement ton code css avec des position absolue et des flottant.
Essayes avec ça
div#header {
  margin-left: auto;
  margin-right: auto;
  background: #000 url("ban-top1.jpg") no-repeat top left;
  height: 208px;
  width: 1003px;
}

#navmenu, #navmenu ul, div#navmenu ul li, div#navmenu ul li a, div#navmenu ul li a span {
  padding: 0;
  margin: 0;
}
div#navmenu {
  position: relative;
  width: 1003px;
  height: 29px;
}
div#navmenu ul {list-style: none;}


J'ai supprimé les déclaration inutile car redondante.
Autre chose : tu devrais préciser en plus du media screen le media projection qui est utile pour le mode plein ecran des version d'Opera antèrieur à la 9 et pour que ta CSS soit prise en compte en cas d'affichage via un projecteur:

<link rel="stylesheet" type="text/css" href="../code-veronica.css"  media="screen,projection" />

Le title est dans ton cas inutile.

Le fait que tu n'utilises pas les propriétés raccourcis alourdi ta css :
Ce code
div#content {
  position: relative;
  float: left;
  background-color: #000000;
  width: 961px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 50px;
  margin-left: auto;
  padding: 30px 20px 10px 20px;
  font-family: Tahoma, Lucida Grande, Arial, Helvetica, sans-serif;
  color: #ffffff;
  border-style: solid ;
  border-color: #2a2a2a #2a2a2a #2a2a2a #2a2a2a;
  border-width: 1px;
  font-size: 13px;
  text-align: justify;
  overflow: hidden;
}


Equivaut à
div#content {
  position: relative;
  float: left;
  overflow: hidden;
  width: 961px;
  margin: 0 auto 50px auto;
  padding: 30px 20px 10px 20px;
  background: #000;
  color: #fff;
  border: 1px solid #2a2a2a;
  font: 13px Tahoma, Lucida Grande, Arial, Helvetica, sans-serif;
  text-align: justify;
}

Modifié par Hermann (04 Jan 2007 - 18:45)
Bonjour Hermann et un énorme merci pour ta réponse et ton aide.

J'ai repris tout ce que tu m'as donné et cela s'affiche parfaitement sous Firefox ET IE7. Il ne me reste plus qu'à tester Safari et Camino pour être sûre que c'est bon partout...

C'est vrai que ton code est beaucoup plus succinct que le mien l'était à l'origine, à vouloir trop en mettre on s'emmêle les pinceaux. Honnêtement j'avais essayé de retirer des trucs, mais impossible d'y voir clair je ne comprenais plus rien, plus je retirais des trucs et plus l'affichage était catastrophique. Ce qui m'a amenée à demander de l'aide, en dernier recours.

Grâce à toi en tout cas c'est résolu, encore une fois merci.
Sujet clos
Aller à