Problème de compatibilité IE7

**ThinKiT** · 08/11/2007, 08h49

Bonjour à tous,

J'entreprends actuellement le découpage et la mise en page css de mon site seulement au bout de quelques minutes je rencontre déjà un problème d'incompatibilité ...

Pour mieux comprendre voici un aperçu sous IE7 :

Et sous Firefox :

En ce qui concerne le code html et css :

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
 
<!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" xml:lang="fr" lang="fr">
    <head>
        <title>Test Catégorie</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
	<div>
		<div id="menu_cat">
			<div id="m_menu_categorie">
				<ul>
					<li><a href="">Milieu</a></li>	
					<li><a href="">Milieu</a></li>
					<li><a href="">Milieu</a></li>
					<li><a href="">Milieu</a></li>
					<li><a href="">Milieu</a></li>
					<li><a href="">Milieu</a></li>
				</ul>
			</div>
		<div>
	<div>
    </body>
</html>

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
* {
	margin:0;
	padding:0;
}
 
body {
	background: #006BCF url("./img/bg.jpg") repeat-x;
	font-family: Arial;
	font-size: 12px;
	color: #fff;
}
 
#menu_cat {
 
}
 
ul {
	list-style: none;
}
 
#m_menu_categorie li {
	background: url("./img/fon_m_menu_categorie.png") no-repeat;
	height: 27px;
	width: 161px;
}
 
#m_menu_categorie li:hover {
	display: block;
	background: url("./img/fon_m_menu_categorie_hover.png") no-repeat;
	height: 27px;
	width: 161px;
}
 
#m_menu_categorie li a {
	text-decoration: none;
	color: #fff;
	float: right;
	display: block;
	margin-top: 5px;
	margin-right: 20px;
}

J'offre un bonbon à celui qui trouve

Merci

**spitou_77** · 08/11/2007, 09h08

T'as mis deux photos d'écrans sous firefox, et tu décrits pas le problème...

Je croyais que j'étais mal réveillé en ne voyant pas les différences sur les images

**ThinKiT** · 08/11/2007, 09h16

En effet petit problème de ma part

Je en dois pas être reveillé non plus

Le problème c'est que Internet Explorer me crée un espace entre les différents éléments de ma liste (les liens "milieu") alors que Firefox non. Je n'ai pas testé sous IE6 et je n'oses même pas imaginer le résultat.

**spitou_77** · 08/11/2007, 10h03

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
 
#m_menu_categorie li {
	background: url("./img/fon_m_menu_categorie.png") no-repeat;
	height: 27px;
	width: 161px;
        text-align: right;
}
 
 
#m_menu_categorie li a {
	text-decoration: none;
	color: #fff;
	display: block;
	margin-top: 5px;
	margin-right: 20px;
}

Je pense qu'il suffit d'enlever le float sur le menu_categorie li a, et mettre un text-align: right sur le menu_categorie li

**ThinKiT** · 08/11/2007, 19h47

Non ca ne marche pas et ca casse toute la mise en page aussi sur Firefox. J'ai continué mes recherches. Pas moyens ... J'ai la possibilité d'utiliser des divs mais ca va faire un peu lourd.

**spitou_77** · 09/11/2007, 07h56

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
 
</head>
<!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" xml:lang="fr" lang="fr">
    <head>
        <title>Test Catégorie</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css" media="screen">		
* {
	margin:0;
	padding:0;
}
 
body {
	background: #006BCF url("./img/bg.jpg") repeat-x;
	font-family: Arial;
	font-size: 12px;
	color: #fff;
}
 
#menu_cat {
 
}
 
ul {
	list-style: none;
}
 
#m_menu_categorie li {
	display: block;
	position: relative;
	text-align: right;
	background: url("http://localhost/clps7/medias/test.jpg") no-repeat;
	height: 27px;
	width: 161px;
}
 
#m_menu_categorie li:hover {
	display: block;
	background: url("http:\\localhost\clps7\medias\test.jpg");
	height: 27px;
	width: 161px;
}
 
#m_menu_categorie li a {
	position: relative;
	TOP: 5px;
	RIGHT: 20px;
	text-decoration: none;
	color: #fff;
 
}     		
	</style>
    </head>
    <body>
	<div>
		<div id="menu_cat">
			<div id="m_menu_categorie">
				<ul>
					<li><a href="">Milieu</a></li>	
					<li><a href="">Milieu</a></li>
					<li><a href="">Milieu</a></li>
					<li><a href="">Milieu</a></li>
					<li><a href="">Milieu</a></li>
					<li><a href="">Milieu</a></li>
				</ul>
			</div>
		<div>
	<div>
    </body>
</html>

J'ai testé ceci en local sous IE6 et Firefox et ça devrait fonctionner...
Remplace les images de backgrounds dans le CSS avant de faire un test

**ThinKiT** · 09/11/2007, 23h17

Wouhou !! Ca marche !!
Merci beaucoup !
Je crois que la solution était le TOP et RIGHT mais cela correspond à quoi exactement ? Parce que je n'avais jmais vu ça auparavant.

**spitou_77** · 10/11/2007, 09h25

top, right (ou bottom et left) correspondent à la distance (positive ou négative, en pixel, pourcent ou em) par rapport au conteneur en position relative ou absolute. Si il n'y a pas de conteneur relatif ou absolute, ca sera par rapport au coin supérieur gauche de l'écran.

Problème de compatibilité IE7

CSS

Discussions similaires

Partager

Partager