Discussion :

[jerome38000]

Bonjour à tous.
J'ai un petit problème de positionement!
j'ai deux bloc div : l'un à l'attribut float:left; et l'autre à l'attribut float:right;, ce qui me permet de les placer les 2 l'un à coté de l'autre. Cela marche bien mais j'ai un petit soucis avec le bloc de gauche. En effet, entre IE et Firefox, la margin-left attribuée à ce bloc ne fait pas la même mesure et c'est IE qui ne me met pas la bonne distance avec le cadre principal :

Code :

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

1
2
3
4
5
6
 
width:270px;
margin-left:20px;
margin-top:20px;
background-color:yellow;
float:left;

Il interprete de telle sorte qu'il y a bien plus de 20px (peut être le double).

Si vous êtes déjà tombé sur un cas similaire ou que vous savez comment bien faire comprendre à IE que je souhaite QUE 20 px, je vous en serais reconnaissant.
Merci davance

[Perceval]

Pour faire simple, IE et FF ne gère pas de la même façon le margin. C'est pour ca qu'il faut bien souvent y'aller à taton pour trouve le juste milieu.

[jerome38000]

Merci pour ta réponse !
Mais tout de même, du simple au double, c'est hardcore !

Autre petite question : Je cherche à placer un div en absolute. Il s'affiche bien sous firefox mais n'apparait pas sous IE. Pourtant, il est bien présent dans le code. Ce n'est pas la première fois que ca m'arrive en plus... J'ai tenté de lui affecter un z-index mais rien ne marche.

Code :

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

1
2
3
4
5
6
7
 
position:absolute;
top:200px;
left:20px;
width:300px;
height:100px;
z-index:10;

Merci d'avance !

[Perceval]

il faudrait voir aussi les propriété des autres div pour comprendre ce qui fait qu'il n'apparait pas...

et si tu avais un lien pour mieux comprendre le problème....

[jerome38000]

J'ai trouvé la solution :
Il faut ajouter display:inline;

J'ai depuis ce matin un nouveau problème. Je l'illustrerais par un lien que j'ai conçu pour vous montrer au mieux.

Mon objectif : faire une liste où lorsque je survole un élément de la liste, celui-ci "s'encadre" et un lien apparait dans le bloc de droite. Car chaque élément de ma liste est composé de 2 blocs : un à droite et un à gauche. Tout marche pour le mieux sur quasi tous les navigateurs sauf.....IE !

Pour gérer l'encadrement, j'utilise le javascript.

Et le lien : http://jerome38000.free.fr/css/test.php


Le problème : Lorsque je lance la page, c'est impéccable, vous pouvez remarquer que les bordures ont bien 2 px de chaque coté, c'est impec. Le problème arrive lorsque je viens en survole sur un élément... car la bordure du bas s'élargit de 2 px. Mes tests m'ont montré que la source du problème avec une telle configuration vient des width que je définis. Je suis contient que les margin et padding ne sont pas interprétés de la même façon selon les navigateurs mais il est tout de même étrange que le problème n'arrive qu'à partir du moment où le javascript change les propriétés, et non dès le début !


Et voici le code désormais :
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
 
		<ul>
			<li id="li1" onmouseover="hover_in('1')" onmouseout="hover_out('1')">
				<div class="bloc1">bloc1</div>
				<div class="bloc2">
					<a href="#" id="lien1" />lien</a>
				</div>
			</li>
			<li id="li2" onmouseover="hover_in('2')" onmouseout="hover_out('2')">
				<div class="bloc1">bloc1</div>
				<div class="bloc2">
					<a href="#" id="lien2" />lien</a>
				</div>
			</li>
		</ul>

Javascript :

Code :

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

1
2
3
4
5
6
7
8
9
 
		function hover_in(id){							
				document.getElementById("li"+id).style.backgroundColor='#6895b7';
				document.getElementById("lien"+id).style.visibility='visible';
			}
			function hover_out(id){							
				document.getElementById("li"+id).style.backgroundColor='#285577';
				document.getElementById("lien"+id).style.visibility='hidden';
			}

et enfin 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
 
ul{
	list-style-type:none;
}
ul li{
	clear:both;
	width:500px;
	height:50px;
	margin-top:5px;
	background-color:#285577;
	padding:2px;
}
ul li .bloc1{
	float:left;
	width:100px;
	height:50px;
	background-color:red;
}
ul li .bloc2{
	float:left;
	width:400px;
	height:50px;
	background-color:pink;
}

Sauriez-vous me guider vers la solution de ce problème ?
à la place du javascript la pseudo classe hover est-elle envisageagle ?

Merci d'avance pour vos propositions