mis en page ie6 vs ie7

**nicerico** · 19/11/2007, 10h54

Bonjour

j'ai un div qui me sert d'espacement horizontal
avec la class suivant

Code :

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

1
2
3
4
5
6
.espace_H_5 {
position:relative;
clear:both;
width:5px;
height:5px;
}

sous ie7 et ff pas de souci
sous ie6 le height n'est pas respecté...

voici une partie du 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
20
<div class="vignette100">
<img src="vignette.php?dst_w=100&image=images/1_2001.jpg" alt="" />
</div>
<div class="vignette100">
<img src="vignette.php?dst_w=100&image=images/1_2001.jpg" alt="" />
</div>
<div class="espace_L_5"></div>
<div class="vignette100">
<img src="vignette.php?dst_w=100&image=images/1_2001.jpg" alt="" />
</div>
<div class="vignette100">
<img src="vignette.php?dst_w=100&image=images/2_2001.jpg" alt="" />
</div>
<div class="espace_L_5"></div>
<div class="vignette100">
<img src="vignette.php?dst_w=100&image=images/1_2001.jpg" alt="" />
</div>
<div class="vignette100">
<img src="vignette.php?dst_w=100&image=images/3_2001.jpg" alt="" />
</div>

la class vignette100 :

Code :

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

1
2
3
4
5
6
7
 
.vignette100 {
position:relative;
float:left;
width:100px;
height:100px;
}

Merci de votre aide

**Bisûnûrs** · 19/11/2007, 11h12

Ce problème survient quand vous avez spécifié une hauteur inférieure au line-height calculé du div. En effet, IE6 alloue automatiquement l'espace nécessaire à un texte éventuel.

Mettre un overflow:hidden corrige ce problème :

Code html :

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

<div style="height:5px;overflow:hidden"></div>

**nicerico** · 19/11/2007, 11h21

merci BEAUCOUP pour l'astuce

**nicerico** · 19/11/2007, 11h53

j'ai un autre petit souci :

j'ai un liste (li) qui commence par une image
ie7 et ff ok mais pas ie6 (le dernier li affiche parciellement l'image au niveau de la hauteur)

le css du li :

Code :

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

1
2
3
4
5
6
7
8
.detail_cata li {
	background:url(puce2.jpg) no-repeat left 3px;
	margin-left:5px;
	padding-left:20px;
	font-size:12px;
	color:#30130b;
	list-style:none;
}

le code 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
<div id="catalogue_detail">
	<div class="detail_cata">
		<ul>
		<li>Ref : <?=$row["ref_pdt"]?></li>
		<li><?=$row["nom"]?></li>
		<li>Description</li>
		<li>Poids : <?=$row["poids"]?> gr</li>
		<li>Taille : <?=$row["taille"]?> cm</li>
		<li>Prix boutique : <?=$row["prix1"]?> €</li>
		</ul>
</div>
 
#catalogue_detail {
	position:relative;
	width:480px;
	height:310px;
	top:20px;
	left:250px;
	right:250px;
}
.detail_cata {
	position:relative;
	float:left;
	width:200px;
	height:220px;
	margin-top:5px;
	margin-left:5px;
}

Merci encore pour l'aide

**Bisûnûrs** · 19/11/2007, 12h09

Pour les puces, je te conseille la variante du docteur Sam visible sur cette page :

http://plambert.developpez.com/css-debutant/cours4.php

**volubil** · 10/08/2012, 16h05

Malgré toute l'attention que j'ai porté à ce sujet, je ne parviens pas à insérer une ligne d'espace entre mes DIV

le code donné par Bisûnûrs

Code :

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

<div style="height:5px;overflow:hidden"></div>

n'opère pas sur mon essai

Ma page est pourtant des plus simples :

Un logo centré
Une ligne d'espace
Trois photos centrées
Une ligne d'espace
Une légende sous chaque photo.

Pour parvenir à cette ligne d'espace, j'ai recours à une bidouille qui consiste à écrire dans un DIV un texte de la couleur du fond.

Au résultat cela donne le code ci-dessous. Ca ne fait pas riche

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<div align="center">
<div style="float: left; width: 99%"><img src="images/logchev.jpg" width="240" height="103" /></div>
<div style="float: left; width: 100%; color: #FFF;">-----</div>
<div style="float: left; width: 33%"><img src="images/chevrolet-camaro.jpg" width="275" height="183" /></div>
<div style="float: left; width: 33%"><img src="images/chevrolet_niva.jpg" width="275" height="183" /></div>
<div style="float: left; width: 33%"><img src="images/chevrolet-corvette.jpg" width="275" height="183" /></div>
<div style="float: left; width: 100%; color: #FFF;">-----</div>
<div style="float: left; width: 33%">Camaro</div>
<div style="float: left; width: 33%">Niva</div>
<div style="float: left; width: 33%">Corvette</div>
</div>
</body>

Pouvez-vous me proposer une méthode plus déontologique ?

Merci de vos conseils

mis en page ie6 vs ie7

CSS

Discussions similaires

Partager

Partager