Discussion :

[cutpeter56]

Bonjour à tous,

J'ai donc un soucis de CSS sous IE alors que sous Firefox tout fonctionne trop bien. Malheureusement, tous nos collaborateurs utilisent IE.

voici la partie CSS qui pose problème :

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
#kezako-plus {
   display: block;
   width: 330px; 
   height: 170px;
   margin: -135px -30px 0 0;
   float: right;
}
 
 
 
#accolade1 {
	width:250px;
 	font-family: "Trebuchet MS"; 
 	font-size: 12px; 
 	color: #59504A; 
 	text-decoration: none;
 	text-align:right;
 	padding:0 0 0 540px;
 	margin: 5px 0 0 0;
}
 
	#accolade1 a:link, #accolade1 a:visited {color: #59504A; text-decoration : none; }
	#accolade1 a:hover { text-decoration: none; }
 
#accolade2 {
 	font-family: "Trebuchet MS"; 
 	font-size: 12px; 
 	color: #59504A; 
 	text-decoration: none;
 	text-align:right;
 	padding:0 0 0 570px;
 	margin: 15px 0 0 0;
}

et mon code HTML :

Code :

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

1
2
3
4
5
6
7
<div id="kezako" >
Ne pas plonger dans le grand bain sans les bouées, quelques définitions 
qui vont rendrons clairs comme l'eau de roche les changements à venir 
dans la sphère des projets DSI. Attention, après ça, vous parlerez 
l'informatique.
</a>
<a id="kezako-plus" href="http://www.baudlocminehb.info/blog/index.php?post/2008/06/04/Kezako"></a></div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="accolade1">
<a href="http://www.baudlocminehb.info/blog/index.php?post/2008/06/04/Les-objectifs-du-Plan-SI-2006/2009"><table>
	<tr>
		<td>
<img src="http://www.baudlocminehb.info/blog/themes/frog/img/parenthese.png"></td>
		<td><font size="5">Les objectifs</font><font size="6">
		</font>
<img src="http://www.baudlocminehb.info/blog/themes/frog/img/plus.png"><br>
		<font size="1">du Plan SI 2006/2009</font></td>
	</tr>
</table>
</a>
</div>

Code :

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

1
2
3
4
5
6
<div id="accolade2">
<p>
<a href="http://www.baudlocminehb.info/blog/index.php?post/2008/06/04/Resultats-denquete">
<img border="0" src="http://www.baudlocminehb.info/blog/themes/frog/img/parenthese.png"><font size="5">Résultats</font>
<img border="0" src="http://www.baudlocminehb.info/blog/themes/frog/img/plus.png" width="17" height="20"><br>
&nbsp;&nbsp;&nbsp;&nbsp; <font color="#888888" style="font-size: 16pt">d'enquête</font><br><font size= "1">ce que vous pensez de la hotline</font></a></p>

Le blog est disponible ici : http://www.baudlocminehb.info/blog/index.php?

[hed62]

Le premier bloc HTML : une balise <a> est fermée alors que aucune n'est ouverte, normal ?

2e bloc : les balises font partent un peu en nouille je trouve...

3e bloc : pourquoi tout ce tas d'espace ? un alignement à droite ? je crois qu'un style="text-align:right;" serait plus mieux

[cutpeter56]

merci de ces précisions !

après correction, voici ce que ça donne :

Code :

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

1
2
3
4
5
6
7
 
<div id="kezako" >
Ne pas plonger dans le grand bain sans les bouées, quelques définitions 
qui vont rendrons clairs comme l'eau de roche les changements à venir 
dans la sphère des projets DSI. Attention, après ça, vous parlerez 
l'informatique.
<a href="http://www.baudlocminehb.info/blog/index.php?post/2008/06/04/Kezako"><div id="kezako-plus"></div></a>

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
 
<div id="accolade1">
<a href="http://www.baudlocminehb.info/blog/index.php?post/2008/06/04/Les-objectifs-du-Plan-SI-2006/2009">
<table>
<tr>
	<td>
		<img src="http://www.baudlocminehb.info/blog/themes/frog/img/parenthese.png">
	</td>
	<td>
		Les objectifs
		<img src="http://www.baudlocminehb.info/blog/themes/frog/img/plus.png"><br>
		<font size="1">du Plan SI 2006/2009</font>
	</td>
</tr>
</table>
</a>
</div>

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="accolade2">
<a href="http://www.baudlocminehb.info/blog/index.php?post/2008/06/04/Resultats-denquete">
<table>
<tr>
	<td>
		<img border="0" src="http://www.baudlocminehb.info/blog/themes/frog/img/parenthese.png">
	</td>
	<td>
		En bref <img border="0" src="http://www.baudlocminehb.info/blog/themes/frog/img/plus.png">
	</td>
</table>
</a>
</div>

Les décalages sont toujours présents, donc je ne vois vraiment pas du coup... Maudit IE.

[hed62]

Essaie bêtement de mettre un border=1 à tes tables, peut être verras tu une boulette plus "globale" genre une balise td fermée trop tot, etc...

Firefox donne exactement ce que tu souhaite ?
Car pourquoi mettre 2 style d'accolade, j'ai du mal à saisir...

[cutpeter56]

les 2 accolades n'ont pas les même padding et margin...

lorsque je mets des bordures... Ca marche pas !

et oui Firefox c'est parfait...

[hed62]

lorsque je mets des bordures... Ca marche pas !

C'était pas le but c'était juste pour essayer de dépister une erreur de table/tr/td.

Je pense que je devrais changer mes lunettes... je ne vois pas de différence de margin/padding entre les deux accolades sous firefox... pourrais tu envoyer des screenshots (un sous IE, un sous Firefox)?
Merci.