28172 sujets

CSS et mise en forme, CSS3

Gros problème d'alignement div

Bonjour, Smiley smile

J'espère qu'il y a des amateurs de problème de compatibilité navigateur, car j'ai un soucis qui est très particulier.
J'ai créer mon site sur dreamweaver et en le mettant en ligne après vérification, je me suis aperçu que IE6 ne gérai pas correctement le placement de mes deux images div "bg_top_accueil.png" et "bg_accueil.jpg".
En effet, il y a un écart qui varie en fonction du texte contenu dans ma div "gbox-grd"

Voici mon site: www.closerie.fr/accueil.html [/url=]

ma question est la suivante, est-ce qu'il est possible de palier à ce problème pour que la page sois compatible avec IE et Firefox.

Je vous mets mon code 



html, body, h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
}
h1 img {
	display: block;
}
img {
	border: 0;
}
a {
	color: #464544;
}
a:hover {
	color: #666666;
}
.left {
	float: left;
}
.right {
	float: right;
}
.more {
	text-align: right;
}
.clear {
	clear: both;
}

body {
	background: url(images/bg.jpg);
	text-align: left;
	font: 12px arial, sans-serif;
	color: #464544;
	padding-bottom: 10px;
}

#outer {
  background: top left url(images/bg.jpg) repeat-x;
  padding-top: 30px;
}

/** layout **/
#wrapper {
	text-align:left;
	margin: auto;
	width: 798px;
  position: relative;
  background: url(body_bg.gif) no-repeat;
 
}
#body-bot {
  background: bottom left url(images/bg_accueil.jpg) no-repeat;
}
#body-top {
	behavior: url(iepngfix.php);
  background: url(images/bg_top_accueil.png) no-repeat;
  min-height: 580px;
  _height: 580px;
  padding-bottom: 57px;
}

/** logo entete **/
#logo {
  width: 25em;
  text-align: center;
}
#logo h1 {
  color: #6F7033;
  font: 22px "Arial narrow", arial, sans-serif;
  line-height: 1;
  padding-top: 0.8em;
}
#logo p {
	overflow: hidden;
  color: #464544;
  font: 16px "Arial narrow", arial, sans-serif;
  margin: 0;
  }
  
/** menu **/

#nav {
  margin-top: 100px;
}
#nav li {
  list-style: none;
  float: right;
  background: left center url(images/arr.gif) no-repeat;
  padding-left: 10px;
  padding-right: 30px;

}
#nav a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}
#nav a:hover {
  color: grey;
}

/** fond texte principal **/
#gbox {
  width: 380px;
  margin-top: 60px;
  margin-left: 0px;
}

#gbox-bg  { 
background: url(images/white_top.png) repeat-y; }

#gbox-grd { 
background: bottom url(images/white_bot.png) repeat-x; }

#gbox-top { 
background: url(images/white_top.png) no-repeat; height: 24px; }

#gbox-bot { 
background: bottom left url(images/white_top.png) no-repeat; height: 0px; }

#gbox-grd {
  min-height: 350px;
  padding:0px 24px;
}

#gbox h2 {
  font: bold 14px arial, sans-serif;
  color: #000;
  margin: 0;
}

#gbox p {
  margin: 1em 0;
}

#features {
  background:;
  padding: 14px;
  margin: 0 -14px;
}
#features h2 {
  position: relative;
}
#features ul {
  float: left;
  width: 49%;
  margin: 1em 0;
  padding: 0;
}
#features li {
  list-style: none;
  margin-left: 8px;
}

/** footer **/

#newsletter, #events {
  float: left;
  width: 49%;
  margin-top: 1em;
}
#newsletter h2, #events h2 {
  color: #fff;
}
#newsletter .text {
  width: 125px;
}
#newsletter form {
  margin: 0.3em 0 0.6em 0;
}
#newsletter p {
  margin: 0.3em 0;
  font-size: 10px;
}
#newsletter a {
  color: #000;
}

#events {
  margin-left: 6%;
  width: 38%;
}
#events ul {
  margin: 0.3em 0;
  padding: 0;
}
#events li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#copyright {
  font-size: 9px;
  color: #fff;
  margin-top: 60px;
}@charset "UTF-8";
/* CSS Document */




J'espère que vous pourrez m'aider, car là j'ai testé plein de trucs et je suis à cours d'idée.
Salut,

pour avoir une chance de t'en sortir il faut d'abord corriger les 28 erreurs de validité :

en particulier mettre un DOCTYPE correct (il ne faut pas mettre l'url de ton site mais "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" . Pour plus d'infos voir le Squelettor ) et ne rien mettre entre </head> et <body> !
J'ai corrigé les erreurs et il y a juste un truc que je ne peux pas enlever: c'est la balise "behavior" qui permet de fixer les png dans IE6 (au niveau de la transparence).

Je remets le code corrigé



html, body, h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
}
h1 img {
	display: block;
}
img {
	border: 0;
}
a {
	color: #464544;
}
a:hover {
	color: #666666;
}
.left {
	float: left;
}
.right {
	float: right;
}
.more {
	text-align: right;
}
.clear {
	clear: both;
}

body {
	background: url(images/bg.jpg);
	text-align: left;
	font: 12px arial, sans-serif;
	color: #464544;
	padding-bottom: 10px;
}

#outer {
  background: top left url(images/bg.jpg) repeat-x;
  padding-top: 30px;
}

/** layout **/
#wrapper {
	text-align:left;
	margin: auto;
	width: 798px;
  position: relative;
  background: url(body_bg.gif) no-repeat;
 
}
#body-bot {
  background: bottom left url(images/bg_accueil.jpg) no-repeat;
}
#body-top {
	behavior: url(iepngfix.php);
  background: url(images/bg_top_accueil.png) no-repeat;

  height: 580px;
  padding-bottom: 57px;
}

/** logo entete **/
#logo {
  width: 25em;
  text-align: center;
}
#logo h1 {
  color: #6F7033;
  font: 22px "Arial narrow", arial, sans-serif;
  line-height: 1;
  padding-top: 0.8em;
}
#logo p {
	overflow: hidden;
  color: #464544;
  font: 16px "Arial narrow", arial, sans-serif;
  margin: 0;
  }
  
/** menu **/

#nav {
  margin-top: 100px;
}
#nav li {
  list-style: none;
  float: right;
  background: left center url(images/arr.gif) no-repeat;
  padding-left: 10px;
  padding-right: 30px;

}
#nav a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}
#nav a:hover {
  color: #666;
}

/** fond texte principal **/
#gbox {
  width: 400px;
  margin-top: 60px;
  margin-left: 0px;
}

#gbox-bg  { behavior: url(iepngfix.php);
background: url(images/white_bg.png) repeat-y; }
#gbox-grd { behavior: url(iepngfix.php);
background: bottom url(images/white_grd.png) repeat-x; }
#gbox-top { behavior: url(iepngfix.php);
background: url(images/white_top.png) no-repeat; height: 24px; }
#gbox-bot {
	behavior: url(iepngfix.php);
	background: bottom left url(images/white_bot.png) no-repeat;
	height: 23px;
	z-index: auto;
	width: 400px;
}

#gbox-grd {
 
  height: 300px;
  padding:0px 24px;
}

#gbox h2 {
  font: bold 14px arial, sans-serif;
  color: #000;
  margin: 0;
}

#gbox p {
  margin: 1em 0;
}

#features {
  
  padding: 14px;
  margin: 0 -14px;
}
#features h2 {
  position: relative;
}
#features ul {
  float: left;
  width: 49%;
  margin: 1em 0;
  padding: 0;
}
#features li {
  list-style: none;
  margin-left: 8px;
}

/** footer **/

#newsletter, #events {
  float: left;
  width: 49%;
  margin-top: 1em;
}
#newsletter h2, #events h2 {
  color: #fff;
}
#newsletter .text {
  width: 125px;
}
#newsletter form {
  margin: 0.3em 0 0.6em 0;
}
#newsletter p {
  margin: 0.3em 0;
  font-size: 10px;
}
#newsletter a {
  color: #000;
}

#events {
  margin-left: 6%;
  width: 38%;
}
#events ul {
  margin: 0.3em 0;
  padding: 0;
}
#events li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#copyright {
  font-size: 9px;
  color: #fff;
  margin-top: 60px;
}

/* CSS Document */


J'espère que ce sera plus clair maintenant.
C'est bizzare, j'ai regardé dans dreamweaver les erreurs et je les ai corrigé. Il fallait faire une manip particulière pour sauvegarder les corrections d'erreurs?

En tout cas même après la correction que j'ai fais sur la page accueil.html et la page accueil.css
le positionnement des div reste identique (même en enlevant les min-height non supporté par ie 6)

Je sais pas trop quoi faire, je suis dans le flou. Pour pouvoir m'aider il te faudrait quoi de plus, Heyoan?

En tout cas je te remercie de t'intéresser à mon problème.
Euh... excuses-moi d'insister lourdement mais il faudrait que tu corriges les 26 erreurs restantes (et encore une fois le Squelettor pourrait t'aider) et que tu mettes le résultat en ligne (avec ma version de DW c'est "placer"...)
Sujet clos
Aller à