18041 sujets

Questions générales et questions de débutants

Décalage sous IE dans bloc aux coins arrondis

Bonjour à tous,

Je souhaite mettre en place des blocs aux coins arrondis. J'ai donc suivi les tutoriels qu'on trouve sur Alsacreations et ailleurs. J'avais fait une maquette, ça fonctionnait impeccablement bien sous Firefox et IE. Mais là je viens de l'intégrer ailleurs et ça pose des soucis, et je ne vois pas pourquoi. J'ai fait des recherches sur Internet pour trouver des solutions dans des forums, mais sans succès. Pourtant, je suis quasiment certain que c'est un bug assez récurrent, qui met un décalage sous IE et pas sous Firefox.

Voici mon code source CSS :
.htmlmaker_zoom_block {
	background-color: #ffe898;
	background-image: url('resources/block_background.jpg');
	background-repeat: repeat-x;
}
.htmlmaker_zoom_block_topleft {
	position: relative; /* Peekaboo bug fix for IE6 */
	min-width: 0; /* Peekaboo bug fix for IE7 */
	overflow: hidden; /* Bug sous IE6 */
	width: 10px;
	height: 10px;
	background-image: url('resources/corner1.jpg');
}
.htmlmaker_zoom_block_topright {
	position: relative; /* Peekaboo bug fix for IE6 */
	min-width: 0; /* Peekaboo bug fix for IE7 */
	overflow: hidden; /* Bug sous IE6 */
	float: right;
	width: 10px;
	height: 10px;
	background-image: url('resources/corner2.jpg');
}
.htmlmaker_zoom_block_bottomleft {
	position: relative; /* Peekaboo bug fix for IE6 */
	min-width: 0; /* Peekaboo bug fix for IE7 */
	overflow: hidden; /* Bug sous IE6 */
	width: 10px;
	height: 10px;
	background-image: url('resources/corner3.jpg');
}
.htmlmaker_zoom_block_bottomright {
	position: relative; /* Peekaboo bug fix for IE6 */
	min-width: 0; /* Peekaboo bug fix for IE7 */
	overflow: hidden; /* Bug sous IE6 */
	float: right;
	width: 10px;
	height: 10px;
	background-image: url('resources/corner4.jpg');
}
.htmlmaker_zoom_block_content {
	margin-left: 10px;
	margin-right: 10px;
}


Voici mon code source HTML :
<div class="htmlmaker_zoom_block">
	<div class="htmlmaker_zoom_block_topright"></div>
	<div class="htmlmaker_zoom_block_topleft"></div>
	<div class="htmlmaker_zoom_block_content">
		<table width="99%" height="100%" cellspacing="0" cellpadding="0">
			<tbody>
				<tr valign="top">
					<td width="50%" class="portal_cell1">
						<div class="portal_list_bloc_detail">sdfh</div>
					</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</div>
	<div class="htmlmaker_zoom_block_bottomright"></div>
	<div class="htmlmaker_zoom_block_bottomleft"></div>
</div>


En image jointe, une capture d'écran du problème que ça fait sous IE uniquement.

Merci d'avance pour votre aide si vous le pouvez Smiley smile upload/16749-capture.jpg
En effet, ça semble bien être ça. Je ne connaissais pas ce bug. Maintenant c'est le cas.

Après avoir appliquées les "feintes" indiquées ici, ça semble résoudre le problème. Mais n'y a t-il pas un moyen de résoudre ce bug autrement que par le conditionnel selon le navigateur (de manière à avoir un CSS valide) ?
Le seul correctif pour le bug du Three Pixel Jog s'appelle Internet Explorer 7.
Pour IE6, tout ce qu'on peut faire c'est le subir, ou bien en modifier les effets (impacte le texte adjacent ou bien le bloc contenant ce texte si celui-ci a le layout), ou encore le «compenser» dans Internet Explorer 6 uniquement en diminuant une marge latérale de 3px (quitte à utiliser un margin-left: -3px; à l'occasion) via un commentaire conditionnel.
OK, merci du renseignement. Mais ça confirme malheureusement ce que je pensais Smiley decu Encore merci beaucoup en tous cas.
Sujet clos
Aller à