Discussion :

[thierryG]

Bonjour
je me prends sérieusement la tête pour avoir une mise en page identique sous IE et firefox.
Allez jeter un oeil sur les différences. IE me met des marges, firefox non tout est bien collé.

Voici un extrait du code de mon fichier

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="header" style="vertical-align:bottom">
		<img src="img/pageHeader1.gif" border="0" style="float:left; left:0px; top:0px; width:131px; height:146px;" />
		<img src="img/pageHeader2.gif" border="0" style="float:left; width:134px; height:146px;" />
		<img src="img/pageHeader3.gif" border="0" style="float:left; width:136px; height:146px;" />
		<img src="img/pageHeader4.gif" border="0" style="float:left; width:136px; height:146px;" />
		<img src="img/pageHeader5.gif" border="0" style="float:left; width:135px; height:146px;" />
		<img src="img/pageHeader6.gif" border="0" style="float:left; width:162px; height:146px;" />
		<img src="img/pageHeader7.gif" border="0" style="width:125px; height:146px;" />
		<img src="img/SiteEnsibsPages_03.gif" border="0" usemap="#accueil" style="float:left; z-index:10000; position:absolute; clear:left; left:0px; top:0px; width:260px" />
		<map name="accueil"><area shape="rect" coords="12,14,237,72" href="#" onClick="callPage('P=0');"></map>
	</div>
	<div id="top_menu">
		<div id="top_menu_items">

et voici le code de la feuille de style

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
 
#header
{
	background-image:url(img/fondHeader.gif); /* A remplacer par fonheader*/
	background-position:top;
	background-repeat:repeat-y;
	position:relative;
	top:0px;
	width:960px;
	height:145px;
	text-align:left;
}
#header
{
	margin:0px;
	padding:0px;
	border-style:none;
	border-width:0px;
}
#top_menu
{
	background-image:url(img/fondTopMenu.gif);
	background-position:top;
	background-repeat:no-repeat;
	text-align:left;
	width:960px;
	height:26px;
}
#top_menu_items
{
	margin-left:0px;
}

A priori c'est entre les div qu'il y a des problèmes, mais je n'arrive pas à comprendre pourquoi.

Quelqu'un aurait-il une explication

merci

cordialement

[FremyCompany]

Quel résultat souhaites tu obtenir ?

[rems033]

Ouhlalou !
Dans ton code CSS, il y 2 "#header" !
Et puis je pense que pour avoir un résultat fini et propre, il faudrait creer de nouveau div dans ton div header comme dans ce tuto. Il est excellent et tu apprendras vite à tout gérer rapidement !
Une fois que tu as défini des div imbriquées, tu ajoutes dans le CSS de ton div auquel tu veux attacher une image : background-image:url(...); sans oublier de préciser un overflow:hidden pour éviter les écarts blancs entre les images (souvent un problème de compatibilité IE FF)
J'oublie de te dire que les dimensions de ton image doivent évidemment être définies dans ton CSS pour le div concerné !
Bon courage à toi

[rems033]

Sinon, pour répondre uniquement à ta question : ajoute un

Code :

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

overflow:hidden;

dans les balises images pour l'attribut "style"