IE : heigth / margin-right float/ incompatible ?

**oamram** · 24/10/2006, 12h10

Bonjour,

Le code suivant fonctionne très bien sur FF et Opera, mais sur IE, le margin-right de #contents2 n'est pas pris en compte si la propriété height est présente (si on l'enlève cela fonctionne) ! Si quelqu'un à une idée pour contourner ce bug IE ?

Merci d'avance.

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
72
73
74
75
body {  
	font-family: verdana,sans-serif;
	font-size: small;
	color: #333;
}  
 
#contents {
	margin-right: 26px;
	border: 1px solid #666;
	background: #FFF3B3;
}
 
#contents2 {
	padding: 1.5em;
	background: #FFFDF3;
 
	/* permet de fixer une hauteur mini sur les navigateurs modernes */
	min-height: 50em; /* Utilité ? */
	/* pour obtenir le meme effet sur IE, sachant que si le contenu depasse, il	"poussera" la hauteur en ne respectant pas la norme. On se joue de ses lacunes */
	height: 50em;
 
	margin-right: 20px;
	text-align: justify;
}
 
#index {
	position: relative;
	float: right;
	width: 27px;
}
 
#index ul {
	margin: 0;
	padding: 0;
}
 
#index ul li  {
	list-style: none;
}
 
#index ul a, #index ul span, #index ul a.current {
	margin: 0px 2px 1px 1px;
	padding: 5px 4px;
	display: block;
	height: 12px;
 
	text-align: center;
	font-family: tahoma, verdana, sans-serif;
	font-size: 85%;
	text-decoration: none;
	color: #333;
 
	background: #FFFDF3;
	border: 1px solid #AAA;
	border-left: none;
}
 
#index ul span, #index ul a.current, #index ul a.current:hover {
	padding-left: 5px;
	margin: 0px 0px 1px 0px;
	background: #FFF3B3;
	border: 1px solid #666;
	border-left: none;
 
	font-weight: bold;
}
 
#index ul a:hover {
	margin: 0px 0px 1px 0px;
	padding-left: 5px;
	background: #FFF3B3;
	border-color: #666;
 
	font-weight: bold;
}

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
 
<!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="en" lang="en">
<head>
	<title>Example Tabs</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<style type="text/css" media="screen">@import "tabs.css";</style>
</head>
 
<body>
	<div id="main">
		<div id="index">
			<ul>
				<li><a href="javascript:void(0);">A</a></li>
				<li><span>B</span></li>
				<li><a href="portfolio.html">C</a></li>
				<li><a href="javascript:void(0);">D</a></li>
				<li><a href="javascript:void(0);">E</a></li>
				<li><a href="javascript:void(0);">F</a></li>
				<li><a href="javascript:void(0);">G</a></li>
				<li><a href="javascript:void(0);">H</a></li>
				<li><a href="javascript:void(0);">I</a></li>
				<li><a href="javascript:void(0);">J</a></li>
				<li><a href="javascript:void(0);">K</a></li>
				<li><a href="javascript:void(0);">L</a></li>
				<li><a href="javascript:void(0);">M</a></li>
				<li><a href="javascript:void(0);">N</a></li>
				<li><a href="javascript:void(0);">O</a></li>
				<li><a href="javascript:void(0);">P</a></li>
				<li><a href="javascript:void(0);">Q</a></li>
				<li><a href="javascript:void(0);">R</a></li>
				<li><a href="javascript:void(0);">S</a></li>
				<li><a href="javascript:void(0);">T</a></li>
				<li><a href="javascript:void(0);">U</a></li>
				<li><a href="javascript:void(0);">W</a></li>
				<li><a href="javascript:void(0);">X</a></li>
				<li><a href="javascript:void(0);">Y</a></li>
				<li><a href="javascript:void(0);">Z</a></li>
				<li><a href="index.html">All</a></li>
			</ul>
		</div>
		<div id="contents">
			<div id="contents2">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur viverra ultrices ante. Aliquam nec lectus. Praesent vitae risus. Aenean vulputate sapien et leo. Nullam euismod tortor id wisi. Sed facilisis, augue in ultrices fringilla, purus nisl euismod nibh, a placerat lacus quam sed elit.</p>
				<p>Sed purus neque, suscipit vitae, cursus vitae, porttitor non, dui. Mauris volutpat dui vitae sapien. Duis laoreet nibh vitae sem. Phasellus ornare. Morbi sollicitudin mi ut nibh. Morbi egestas elementum tellus.</p>
				<p>Suspendisse magna dui, porta in, condimentum at, molestie nec, augue. Quisque vulputate facilisis ipsum.  Aenean sollicitudin quam sed ante. Donec at nunc. In hac habitasse platea dictumst. Suspendisse quis lorem sit amet eros congue volutpat. Nam laoreet ultricies pede. Nulla vestibulum, pede eget varius vestibulum, nisl mi aliquet nisl, eget eleifend quam dui faucibus tortor. Maecenas justo. In lacus nisl, tempus at, aliquam nec, ornare in, metus. Maecenas hendrerit mauris vitae purus. Cras id sem.</p>
				<p>Curabitur vel urna vitae nunc bibendum porttitor. Nam tortor quam, luctus id, convallis sed, rutrum ac, ante. Proin euismod lacus vitae elit. Nullam vel diam in metus consectetuer facilisis.</p>
				<p>In mauris enim, suscipit a, consequat quis, porta ut, diam. Vivamus tempor. Donec nec enim quis ante ullamcorper mollis. Praesent dictum. Donec arcu arcu, tincidunt a, placerat sit amet, porta eget, erat. Aliquam erat volutpat. Aenean egestas, dolor ut consectetuer pulvinar, mauris ante volutpat leo, non pulvinar erat justo vitae mauris. Donec laoreet dui at quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris id libero. Morbi luctus sapien vitae dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam pharetra vestibulum leo. Maecenas magna velit, porta eu, viverra quis, cursus non, sapien.</p>
			</div>
		</div>
	</div>
</body>
</html>

**trotters213** · 24/10/2006, 15h28

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#contents {
	margin-right: 26px;
	border: 1px solid #666;
	background: #FFF3B3;
	min-height: 50em;
	height: 50em;	
}
 
#contents2 {
	padding: 1.5em;
	background: #FFFDF3;
	margin-right: 100px;
	text-align: justify;
}

et appelle ta feuille CSS de cette manière :

Code HTML :

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

<link rel="stylesheet" type="text/css" href="tab.css" />

**oamram** · 24/10/2006, 16h07

Je viens de tester ta solution :

1) dans ce cas le margin-right fonctionne mais le fond ne rempli plus la boite "header". J'ai donc rajouter rajouté dans l'id contents2 un height: 47em et cela corrige le bg. Mais ta solution créé un nouveau bug IE. Les onglets ne sont plus accolés à la boite (contents) et lorsqu'on veut modifier la propriété margin-right de cette boite, elle est à son tour plus prise en compte...
Le problème reste donc entier...

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
 
#contents {
	margin-right: 26px;
	border: 1px solid #666;
	background: #FFF3B3;
	min-height: 50em; /* Utilité ? */
	height: 50em;
}
 
#contents2 {
	padding: 1.5em;
	background: #FFFDF3;
	height: 47em;
	margin-right: 20px;
	text-align: justify;
}

2) Quelle est la différence entre :

Code :

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

1
2
 
<style type="text/css" media="screen">@import "tabs.css";</style>

et

Code :

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

1
2
 
<link rel="stylesheet" type="text/css" href="tabs.css" />

Merci pour ton aide.

**trotters213** · 24/10/2006, 16h50

Envoyé par oamram

Quelle est la différence entre :

Code :

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

1
2
 
<style type="text/css" media="screen">@import "tabs.css";</style>

et

Code :

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

1
2
 
<link rel="stylesheet" type="text/css" href="tabs.css" />

Merci pour ton aide.

c'est pas reconnu par les vieux navigateurs

**Candygirl** · 24/10/2006, 17h46

Tu peux, par exemple, donner un padding à ton content plutôt qu'un margin à ton content2:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
#contents {
	margin-right: 26px;
	border: 1px solid #666;
	background: #FFF3B3;
        padding-right:20px;
}
 
#contents2 {
	padding: 1.5em;
	background: #FFFDF3;
	height: 50em;
	text-align: justify;
}

**oamram** · 24/10/2006, 18h15

En effet c'est d'une simplicité évidente !!! Merci.

Bon entre temps j'avais trouvé une autre solution beaucoup moins belle en

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
 
#contents {
	margin-right: 26px;
	border: 1px solid #666;
	background: #FFF3B3;
}
 
#contents2 {
	padding: 1.5em;
	background: #FFFDF3;
 
	height: 50em;
	min-height: 50em;
 
	border-right: 20px #FFF3B3 solid;
	text-align: justify;
}

IE : heigth / margin-right float/ incompatible ?

CSS

Vue hybride

Discussions similaires

Partager

Partager