28173 sujets

CSS et mise en forme, CSS3

Bonjour,

Sur cette page : http://e.guerfi.free.fr/PREPROD/contact.php l'image du bas du menu de gauche est trop courte.

Dans les CSS, elle correspond au bloc :
#menu-fin-form 


Dans ma CSS dédiée IE6, j'ai beau augmenter sa hauteur, pas de changement. Pas de changement non plus si je remplace l'image par une autre agrandie de la hauteur voulue.
Ce qui est bizarre c'est que :
- pour les autres pages, quand j'augmente la hauteur de cette image dans ma CSS IE6, cela fonctionne
- et si je supprime ce bloc dans la CSS "normale", l'augmentation de sa hauteur dans la CSS IE6 est prise en compte.

C'est comme s'il y avait un blocage dû à la CSS "normale".
Mais alors pourquoi cela fonctionne pour les autres pages ?
Vous avez une idée d'où peut venir le problème ?
Merci beaucoup.

CSS IE6 :

#menu {
	float:left;
}

#menu-deb {
	background: url(img/nav/menus/general/menudeb.gif);
	width: 136px;
	height: 85px;
	clear:left;
}

#menu-coll-gen {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-coll-06 {
	width: 135px;
	height: 17px;
	clear:left;
	margin-top:-3px;
}

#menu-coll-05 {
	width: 135px;
	height: 25px;
	clear:left;
	margin-top:-3px;
}

#menu-coll-04 {
	width: 135px;
	height: 25px;
	clear:left;
	margin-top:-3px;
}

#menu-coll-03 {
	width: 135px;
	height: 25px;
	clear:left;
	margin-top:-3px;
}

#menu-access {
	width: 135px;
	height: 27px;
	clear:left;
	margin-top:-3px;
}

#menu-events-gen {
	width: 135px;
	height: 25px;
	clear:left;
	margin-top:-3px;
}

#menu-events-def {
	width: 135px;
	height: 23px;
	clear:left;
	margin-top:-3px;
}

#menu-events-spect {
	width: 135px;
	height: 25px;
	clear:left;
	margin-top:-3px;
}

#menu-events-expo {
	width: 135px;
	height: 25px;
	clear:left;
	margin-top:-3px;
}

#menu-choi {
	width: 135px;
	height: 27px;
	clear:left;
	margin-top:-3px;
}

#menu-contact {
	width: 135px;
	height: 25px;
	clear:left;
	margin-top:-3px;
}

#menu-fin-gen {
	background: url(img/nav/menus/general/menufin-gen.gif);
	width: 136px;
	height: 363px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}

#menu-fin-index {
	background: url(img/nav/menus/general/menufin-index.gif);
	width: 136px;
	height: 296px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}

#menu-fin-coll {
	background: url(img/nav/menus/general/menufin-coll.gif);
	width: 136px;
	height: 275px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}

#menu-fin-form {
	background: url(img/nav/menus/general/menufin-form.gif);
	width: 136px;
	height: 566px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}



CSS "normale" :


#menu {
	float:left;
}

#menu-deb {
	background: url(img/nav/menus/general/menudeb.gif);
	width: 136px;
	height: 85px;
	clear:left;
}

#menu-coll-gen {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-coll-06 {
	width: 135px;
	height: 17px;
	clear:left;
}

#menu-coll-05 {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-coll-04 {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-coll-03 {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-access {
	width: 135px;
	height: 27px;
	clear:left;
}

#menu-events-gen {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-events-def {
	width: 135px;
	height: 23px;
	clear:left;
}

#menu-events-spect {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-events-expo {
	width: 135px;
	height: 27px;
	clear:left;
}

#menu-choi {
	width: 135px;
	height: 27px;
	clear:left;
}

#menu-contact {
	width: 135px;
	height: 25px;
	clear:left;
}

#menu-fin-gen {
	background: url(img/nav/menus/general/menufin-gen.gif);
	width: 136px;
	height: 361px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}

#menu-fin-index {
	background: url(img/nav/menus/general/menufin-index.gif);
	width: 136px;
	height: 286px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}

#menu-fin-coll {
	background: url(img/nav/menus/general/menufin-coll.gif);
	width: 136px;
	height: 269px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}
#menu-fin-form {
	background: url(img/nav/menus/general/menufin-form.gif);
	width: 136px;
	height: 556px;
	clear:left;
	border-bottom: 2px solid #DF224A;
}


Page html (php en fait car c'est un formulaire) :

<div id="menu">
<div id="menu-deb"></div>
<div id="menu-coll-gen">
<a title="Collections" href="http://e.guerfi.free.fr/PREPROD/collections/2006/galerie.html"><img alt="Collections" src="http://e.guerfi.free.fr/PREPROD/img/nav/menus/general/coll.gif"/></a></div>
<div id="menu-access">
<a title="Accessoires" href="http://e.guerfi.free.fr/PREPROD/accessoires/galerie.html"><img alt="Accessoires" src="http://e.guerfi.free.fr/PREPROD/img/nav/menus/general/access.gif" /></a></div>
<div id="menu-events-gen">
<a title="Ev&eacute;nements" href="http://e.guerfi.free.fr/PREPROD/evenements/spectacles/soiree-salsa.html"><img alt="Evénements" src="http://e.guerfi.free.fr/PREPROD/img/nav/menus/general/events.gif" /></a></div>
<div id="menu-choi">
<a title= "Qui est Cho&iuml; ?" href="http://e.guerfi.free.fr/PREPROD/choi/bio.html"><img alt="Qui est Choï ?" src="http://e.guerfi.free.fr/PREPROD/img/nav/menus/general/choi.gif" /></a></div>
<div id="menu-contact">
<a title= "Contact" href="http://e.guerfi.free.fr/PREPROD/contact.php"><img alt="Contacts" src="http://e.guerfi.free.fr/PREPROD/img/nav/menus/general/contact.gif" /></a></div>
<div id="menu-fin-form"></div>
</div>
<div id="content-form">
<div id="fil-ariane">
  <a href="http://e.guerfi.free.fr/PREPROD/index2.html">Accueil</a> > Contacts
</div>
<!--contenu-->
</div>

Modifié par Pimiento (06 Jan 2007 - 16:38)
Fausse alerte.
Le problème venait du fait que le lien vers la css "normale" apparaissait une 2e fois, après le titre de la page :

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://e.guerfi.free.fr/PREPROD/style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="http://e.guerfi.free.fr/PREPROD/style-ie.css" />
<![endif]-->

<title>Cho&iuml; - Contacts</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>


Merci quand même et désolée du dérangement Smiley confus