18041 sujets

Questions générales et questions de débutants

Problème avec IE6 (si, si!)

Bonjour,
Je me suis fortement inspiré de l'excellent tuto "design avec deux colonnes de même hauteur", et j'y ai ajouté un menu horizontal menuhrz, en haut de la div contenu (tuto = content. Ce menu est réalisé avec la techniques des portes coulissantes.
Tout fonctionne parfaitement avec Firefox.
Avec IE6, la feuille de style dédiée corrige bien les "choses", SAUF pour le dit menu horizontal, dont le cinquième et dernier item vient se positionner sous le premier, vraisemblablement par "manque de place" : en effet, l'ensemble du menu se trouve décalé à droite de quelques pixels supplémentaires (?) aux 11 pixels de marge gauche de la div contenu. La marge haute est plus importante encore, alors qu'elle devrait être collée à entete (tuto = header.

CSS
html, body {
	height: 100%;
	margin: 0;
	background: #eae8e1;
	font: 90% "trebuchet ms", verdana, tahoma, arial, sans-serif;
	color: #333;
	}
#global {
	min-height: 100%;
	padding: 0 10px;
	background: url(images/lign_vrt.png) center repeat-y;
	width: 750px;
	margin: 0 auto;
	position: relative;
	}
#entete {
	background: url(images/header.jpg) no-repeat;
	color: #fff;
	height: 210px;
	}
#corps {
	padding-bottom: 60px; 
	overflow: auto;
	}
a {
	color: #66cc00;
	text-decoration: none;
	}
a:hover {
	color: #c40005;
	}
#clndroite {
	float: right;
	width: 189px;
	
	}
#clndroite ul {
	padding-left: 11px;
	list-style: none;
	text-decoration: none;
	}
#contenu {
	float: left;
	width: 536px;
	margin-left: 11px;
	text-align: justify;
	}
div#contenu h2 {
	color: #548e23;
	font: small-caps 1.7em "trebuchet ms";
	text-decoration: underline;
	}
div#contenu h3, div#clndroite h3 {
	color: #c40005;
	font: 1.5em "trebuchet ms";
	}
ul#menuhrz {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	}
ul#menuhrz li {
	float: left ;
	width: 102px ;
	border: 1px solid #eae8e1;
	margin-left: 3px ;
	color: #333 ;
	background: #c00 ;
	}
ul#menuhrz li a {
	display: block ;
	background: #900 url(images/menuhrz.png) left top no-repeat ;
	color: #66cc00 ;
	font: 1.1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1,3em ;
	padding: 11px 0 ;
	text-align: center ;
	text-decoration: none ;
	}
#menuhrz li a:hover, #nav li a:focus, #nav li a:active {
	background: #033 url(images/menuhrz.png) right top no-repeat ;
	color: #c40005;
	text-decoration: none;
	}
ul#menu {
	margin: 0;
	padding: 0;
	list-style: none;
	}
ul#menu li a {
	display: block;
	height: 30px;
	background: url(images/chess.png) no-repeat left top;
	padding-left: 44px;
	margin: 2px 0;
	border-bottom: 1px solid #66cc00;
	color: #66cc00;
	font: small-caps 1.7em/30px "trebuchet ms";
	text-decoration: none;
	}
ul#menu li a:hover {
	background-position: left bottom;
	color: #c40005;
	}
#pdpage {
	position: absolute;
	width: 750px;
	bottom: 0;
	background: #fff;
	border-top: 1px solid #66cc00;
	text-align: right;
	}
#pdpage p {
	margin: 2px 0;
	font-size: 0.9em;
	padding-right: 11px;
	color: #548e23;
	}
div#clndroite h3, div#clndroite p  {
		padding: 0 11px;
	}


CSS IE
body {
	position: relative;
	}
#global {
	height: 100%;
	}
#corps {
	overflow: visible;
	height: 1%;
	}
#contenu {
	display: inline;
	}

#contenu, #clndroite {
	margin-top: 18px;
	}


J'ai bien essayé les propriétés "overflow" et "position" ...sans résultat.

Merci de votre soutien.
On peut voir la page en ligne ?

Sans le code HTML qui va avec ta feuille de style, difficile de se prononcer.
Désolé, pas de page en ligne : je travaille en local. Voici cependant le code source :

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8" />
  <title>Centre Equestre du Buisson</title>
  <link rel="stylesheet" type="text/css"
 href="principale.css" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" media="screen" />
<![endif]-->
</head>
<body>
<div id="global">
<div id="entete"></div>
<div id="corps">
<div id="contenu">
<ul id="menuhrz">
  <li><a id="active" href="#">Accueil</a></li>
  <li><a href="#">Installations</a></li>
  <li><a href="#">Cavalerie</a></li>
  <li><a href="#">Hébergement</a></li>
  <li><a href="#">Environnement</a></li>
</ul>
<h2>Lorem ipsum</h2>
<p>
Nec sane haec sola pernicies orientem diversis cladibus adfligebat.
Namque et Isauri, quibus est usitatum saepe pacari saepeque inopinis
excursibus cuncta miscere, ex latrociniis occultis et raris, alente
inpunitate adulescentem in peius audaciam ad bella gravia proruperunt,
diu quidem perduelles spiritus inrequietis motibus erigentes, hac tamen
indignitate perciti vehementer, ut iactitabant, quod eorum capiti
quidam consortes apud Iconium Pisidiae oppidum in amphitheatrali
spectaculo feris praedatricibus obiecti sunt praeter morem.</p>
</div>
<div id="clndroite">
<h3>Navigation</h3>
<ul id="menu">
  <li><a href="index.html">Accueil</a></li>
  <li><a href="laferme.html">La Ferme</a></li>
  <li><a href="activites.html">Activités</a></li>
  <li><a href="tarifs.html">Tarifs</a></li>
  <li><a href="contacts.html">Contacts</a></li>
</ul>
<h3>Liens</h3>
<ul>
  <li><a href="">Fondation Nicolas Hulot</a></li>
  <li><a href="">Mongolie</a></li>
</ul>
</div>
</div>
<div id="pdpage">
<p>le pied de page le pied de page le pied de page</p>
</div>
</div>
</body>
</html>


Merci beaucoup.
Salut,

ul#menuhrz li {
	float: left ;
	...
	margin-left: 3px ;
	...}


IE6 à tendance à doubler les margin des blocks en float, la solution c'est d'ajouter le propriété display:inline; à ces blocks... C'est peut être ça.

:)
Sujet clos
Aller à