28221 sujets

CSS et mise en forme, CSS3

[RESOLU] Affichage d'un paragraphe different entre IE et Mozilla

Bonjour le forum,

Mon code HTML est le suivant :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>La Lettre</title>

	<style type="text/css" title="currentStyle">
		@import "style.css";
	</style>
	
</head>

<body id="lettre">

<div id="conteneur">
		<div id="article1">
			<h3><span>Article 1</span></h3>
			<p class="p1"><span>A1</span></p>
			<p class="p2"><span>A2</span></p>
		</div>
</div>

</body>
</html>


Ma feuille de style associée est :


body
 {
	color: #3c3c3c;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 17px;
	background-color: White;
	text-align: center;
	margin: 0;
	padding: 0;
}

#conteneur
{
	text-align: left;
	margin: 8px auto;
	padding: 0;
	width: 700px;
	height: 300px;
	border: 1px solid #C6C7E7;
}

#article1
{
	margin-top: 10px;
	margin-right: 15px;
	padding-bottom: 5px;
	width: 670px;
	float: right;
	border: 1px solid #C6C7E7;
}

#article1 h3
{
	margin: 8px 0;
	padding: 0;
	width: 450px;
	height: 26px;
	float: left;
}

#article1 .p1, #article1 .p2, #article1 .p3, #article1 .p4, #article1 .p5
{
	/*margin: 0;*/
	padding: 0 0 8px 8px;
	width:   655px;
	text-align: justify;
	float:   left;
}


Mes questions sont les suivantes :
- L'affichage Mozilla est celui que je désire: l'encadré de "article1" est centré alors que sous IE il est pour je ne sais quelle raison mystérieuse collé à gauche. Je dois me mélanger les pinceaux avec les float.
- Sous IE, si je ne met pas "height" dans "conteneur", il s'ajuste automatiquement au contenu; alors que sous Mozilla, je suis obligé de lui spécifié la taille du conteneur. Comment faire sous Mozilla pour qu'il détecte automatiquement la taille du conteneur et ajuste l'encadré en conséquence ?

Merci.
Modifié par grandtom (02 Mar 2005 - 10:44)
heu... Avant de répondre à tes questions, autant partir d'un code cohérent : à quoi sont supposés servir les différents float ?
- #article1 (670 pixels de large) flotte dans un conteneur de 700px : pourquoi ?
- h3 (450px de large) et .p1 (655px) sont vraiment supposés flotter côte à côte, dans 670 pixels ? Ils vont peut-être avoir un peu de mal, là, si je ne me trompe pas Smiley cligne

Quelque-chose m'échappe : s'agit-il d'une technique de centrage exotique ?

D'autre part, le title="currentStyle" de ton élément style peut être problématique en cas d'ajout de styles alternatifs : l'élément title de <style>, <link>, etc. doit caractériser aussi clairement que possible le style concerné, afin de permettre de l'identifier dans une liste de styles disponibles (exemple: style="Mon site en rose fushia")
Modifié par Laurent Denis (02 Mar 2005 - 10:03)
C'est effectivement un technique exotique de centrage !

Je suis parti d'un exemple et après de multiples modifications, j'en suis arrivé là mais il doit avoir beaucoup mieux je suppose.

La largeur du conteneur fait 700 px composé de "article1" qui fait 670px collé à droite avec un margin-right à 15px, ce qui nous donne 670+15+15 restant = 700 . Sous Mozilla ca passe et pas sous IE.

Quant à h3, c'est une image de 450px en réalité.

Une idée pour height également?
Bon, alors : laissons froidement tomber la technique de centrage exotique par les float Smiley lol

Intrinsèquement, c'est une mauvaise idée: float est fait pour un tas de choses, mais en aucun cas pour centrer. C'est, comment dire ? antinomique, ça vous irait ?

Première étape, donc (on verra après s'il y a problème) :
- Centre tes éléments de manière classique (margin:Zpx auto et le text-align:center qui va bien pour IE5.x) comme tu le fais pour ton conteneur principal.
- Du coup, a priori, plus de problème de height (ni de height nécessaire, en fait) puisque ton h3 et tes .p seront en flux, donc compris dans le calcul de hauteur de tes conteneurs.
Un seul mot Laurent : merci Smiley smile

A peine revenu de la pause café, je lis ton post et ca résoud tous mes problèmes. Au revoir les float, et tout marche automatiquement ! En centrant de manière classique, c'est propre et la taille s'ajuste automatiquement sous IE et Mozilla.

Merci d'avoir pris de ton temps !
Sujet clos
Aller à