28173 sujets

CSS et mise en forme, CSS3

bonjour,
je voudrais mettre une bordure de 1px sur une image et laisser un espace blanc de 12px entre cette image et la bordure.
j'ai fais ceci :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>border padding</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
.bordure_photo IMG {BORDER-RIGHT: #1B75B5 1px solid; PADDING-RIGHT: 12px; BORDER-TOP: #1B75B5 1px solid; PADDING-LEFT: 12px; PADDING-BOTTOM: 12px; BORDER-LEFT: #1B75B5 1px solid; PADDING-TOP: 12px; BORDER-BOTTOM: #1B75B5 1px solid;background-color:#ffffff;}
</style>

</head><body>
<div class='bordure_photo'><img src="http://www.csdm.qc.ca/stejarc/dictionnaire/imagesdicopq/planete.jpg" border="0" cellspacing="0" cellpadding="0"></div>
</body></html>

ca marche tre bien sous mozilla, mais sous IE ca ne marche pas !
pour que ca marche a la fois sous IE et moz il faut que je mette en doctype<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> mais le probleme, c'est que, si je mets ceci en doctype, j'ai plein d'autres choses qui ne marche pas dans ma page (gestion de la hauteur, ...).
comment faire?
merci de votre aide
Modifié par attentio (17 Apr 2006 - 17:13)
Salut,

C'est une histoire de box model et doctype. Avec le code suivant, ça marche sous FF1.5, IE6 (pas sous IE5.5 ni IE5). Je n'ai pas testé les autres navigateurs.

Edit: Avec le code, ce sera mieux
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
	<title>border padding</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<style>
	.bordure_photo img {
		border: #1B75B5 1px solid;
		padding: 12px;
		background-color:#ffffff;
	}
	</style>
</head>
<body>
	<div class="bordure_photo">
		<img src="border%20padding_files/planete.jpg" />
	</div>
</body>
</html>

Modifié par Antoine Cailliau (17 Apr 2006 - 18:54)