Discussion :

[zerros]

Bonjour,

Je suis débutant dans le css, et je me tire les cheveux pour arriver à faire une application web compatible Firefox ET IE7.

Mon schémas est assez simple. il resemble à ça :
http://v2.transchaines.com/system/th...images/3cl.gif

Donc un header, un footer, et entre ne colonne à gauche, et une autre à droite.
Dans chaque partie j'ai créé des div :
Header :
- logo
- cadre contenu des news
- une barre horizontale

Left :
- menu

Right :
- Affichage de flux RSS

Footer :
- copyright

Tous mes alignements fonctionnent à merveille, mais j'ai 2 choses qui clochent.
La première est sur des infobulles css.
Dans le menu de gauche, j'ai un image qui doit afficher une infobulle. J'ai réussi à le faire avec le code css ci dessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
a.info
{
	position:relative;
	z-index:24;
	color:#000;
	text-decoration:none;
}
a.info:hover
{
	z-index:25;
	background-color:#FFF;
}
a.info span
{
	display: none;
}
a.info:hover span
{
	font-size:10px;
	color:#0099ff;
	display:block;
	position:absolute;
	top:2em; left:2em; width:15em;
	border:1px solid #000;
	background-color:#FFF;
	text-align: justify;
	padding:5px;
}

Le hic c'est qu'une partie des infosfulles sont cachés par la div du milieu UNIQUEMENT SUR IE !! Sous Firefox tout fonctionne niquel.

Deuxième question, dans le header, j'ai une barre horizontale qui part du logo, qui passe par le cadre contenant les news et continu jusqu'à la droite. Sous firefox, l'effet voulu fonctionne parfaitement : le cadre est au dessus de la barre. Ca fait comme si que la barre faisait le tour du cadre sans passer au travers et continu de l'autre côté à droite.

Sous IE, je vois la barre qui passe au travers du cadre. Donc l'effet désiré ne fonctionne pas.

Comment forcer un élément à passer au dessus d'un autre élément ?

Voici le css du cadre et de la barre (ne vous formalisez pas, j'utilise un CMS qui me génère le code) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.barre
{
	height:1px;
	margin:-33px 5px 0px 250px;
	background-color:#000000;
	border-top:0px solid #000000;
	border-right:0px solid #000000;
	border-bottom:2px solid #000000;
	border-left:0px solid #000000;
}
.news
{
	width:420px;
	height:60px;
	margin:-40px 0px 0px 500px;
	background-color:#e2e2e2;
	border:2px solid #000000;
	padding: 5px;
}

J'espère que vous pourrez m'aider.