Positionnement ul/li...

Bonsoir, j'ai programmé un petit exemple tout simple d'un menu afin de mettre en évidence quelques petits problèmes de compatibilité entre IE7, Firefox2 et Opera9.

l'exemple est à cette page : [...]

le code css correspondant se trouve ici : [...]

En fait il y a deux point d'ombres :

1 - Je ne comprends pas pourquoi sous Firefox (2.0.0.8) et Opera (9.24) j'obtiens de petits espaces (en bleu) entre chaque élément li.

2 - Je ne comprends pas pourquoi sous Firefox (2.0.0.8) j'obtiens en léger padding en haut et en bas du bloc ul (toujours en bleu).

Vu mon code CSS je m'attendais plus à voir ce que je vois sous IE7 (où je n'ai aucun padding et mes élément li sont totalement collés.

Voilà, merci pour vos éclaircissements !
Modifié par Sol (12 Jan 2008 - 11:18)

Salut,

Il s'agit du rendu par défaut des éléments ; ce tuto en parle et devrait t'aider à y voir plus clair.

koala64 a écrit :
Salut,

Il s'agit du rendu par défaut des éléments ; ce tuto en parle et devrait t'aider à y voir plus clair.

Justement, j'ai bien initialisé le padding et margin à 0 pour mon ul et mes li, donc je devrais avoir un affichage identique en théorie...

C'est parce que tu passes par display: inline; alors que si tu fais comme suit, tu as le rendu souhaité sur IE7, Opera et Firefox :

body {
	background-color: rgb(245,242,177);
   	margin: 0;
	border: 0;
}

#ulMenu {
	background-color: blue;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

#ulMenu li {
	float: left;
	background-color: black;
	color: white;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

Modifié par koala64 (21 Oct 2007 - 19:04)

erf... Je n'avais pas regardé sur IE6...

Comme ça alors :

		<style type="text/css"><!--

@media screen, projection
{
	body {
		background-color: rgb(245,242,177);
		margin: 0;
		border: 0;
	}
	#ulMenu {
		background-color: blue;
		overflow: auto;
		margin: 0;
		padding: 0;
	}
	#ulMenu li {
		float: left;
		background-color: black;
		color: white;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
}

		--></style>
		<!--[if lte IE 6]><style type="text/css">

@media screen
{
	#ulMenu {
		width: 100%;
	}
}

		</style><![ endif]-->

Merci, je comprends maintenant.

Par contre je ne vois pas trop ce que vient faire la propriété overflow ici, et je ne saisis pas trop son comportement dans ce cas-là... (théoriquement, overflow: hidden sert à ne pas afficher à un contenu qui déborde non ?)
Modifié par Sol (21 Oct 2007 - 19:37)

overflow sert au conteneur pour englober les flottants. Pour plus de précisions, je te conseille de lire ce document.

koala64 a écrit :
overflow sert au conteneur pour englober les flottants. Pour plus de précisions, je te conseille de lire ce document.

J'étais passé rapidement sur cette notion de layout.
Je pense maintenant que certains pb sur lesquels je me suis arraché les cheveux devait y être lié... c'est désespérant de designer pour IE