Positionnement sous IE

Bonjour,

Je voudrais savoir comment faire pour que le positionnement soit le même dans tous les navigateurs. En effet, lorsque j'essaye de placer un <h1> dans une div sous Firefox, il va automatiquement mettre une marge entre le haut de la div et le dit <h1>, alors que sous Internet Explorer, le <h1> va se coller au haut de la div.

Firefox :


Internet Explorer :


Enfin, voici le code html et le CSS :

<div id="boite">
<div id="dedans"><h1>Bonjour !</h1></div>
</div>

#boite
{
	width:500px;
	background-color:#0FF;
	height:100px;
}
#dedans
{
	border:solid 1px;
	width:200px;
	background-color:#0C9;
	height:50px;
}
#dedans h1
{
	font-size:16px;

}

Merci d'avance

Salutation Typpo

Fait toi un reset en CSS, souvent placer au sélecteur « body ». D'ailleurs ne start jamais un fichier CSS sans le sélecteur body

body {
 margin:0; padding:0;
}

Ainsi tous les navigateurs seront reseté à zéro, pour ces deux instructions.
Alors à partir de la tu pourras faire des margin et padding dans les autres sélecteurs et dans ton cas h1

#dedans {     
 border:solid 1px;     
 width:200px;    
 background-color:#0C9;     
 height:50px;
 margin: 0 auto; /* centralise le bloc #dedans */ 
}
#dedans h1 {
 font-size:16px;
 padding:5px;
}

C'est que la valeur par défaut varie d'un navigateur à un autre : c'est la raison du reset.
Je te suggère de t'intéresser au reset en CSS. Il y a des articles sur le sujet qui valent la peine d'être lus.

De même sur la question d'héritage en CSS, le rapport parent/enfant. body étant le parent de tous les autres éléments, et tous les autres éléments sont enfants de body. Tu peut placer d'autres instructions sur body, comme la font-family et font-size et plusieurs autres encore.

Résultat »



Comprend ici que le test a été fait rapidement, je n'ai pas tout vérifier, c'est une base. Cependant dans la pratique et la compréhension du reset en CSS, tu découvriras des techniques intéressantes.

Voilà - Bonne chance.

Un exemple perso » Vérifier IE8 FF Chrome et Safari.
Seul Opera le prend mal à cause d'une seule instruction : line-height.
Par contre line-height n'est pas nécessaire pour ce design, si donc j'enlève line-height, Opera représente correctement la séquence au même titre que tous les autres navigateurs.


Modifié par zardoz (07 Jul 2011 - 14:15)

zardoz a écrit :

body {
 margin:0; padding:0;
}

Ainsi tous les navigateurs seront reseté à zéro, pour ces deux instructions.

C'est effectivement utile dans certains cas (on peut regarder du côté de A Simple Base Stylesheet par exemple), mais ce n'est pas le fond du problème ici.

À vue de nez je dirais que le problème constaté dans Internet Explorer est un bug, plus ou moins lié au HasLayout. Ce bug:
- touchera IE6 mais on s'en fiche;
- touchera IE7 et tant pis pour sa gueule;
- ne touchera pas IE8+ tant que tu t'assures que tu es en mode de rendu standard (voir dans les outils pour développeur intégrés à IE8+ quel est le mode de rendu utilisé pour afficher la page).

Salutation

Intéressant l'article hasLayout, que je n'avais pas encore lu.

Moi perso je suis en mode de rendu standard - mode document : normes IE8.
Jusqu'à aujourdh'hui j'utilise le reset en CSS, que je trouve adapté d'ailleurs. Bon nombre de développeur utilise le reset. C'est fréquent disons, même sur Alsa.

Ce que j'apprécie du reset, c'est qu'on part notre structure à zéro. Le reste est une affaire de développement, nous avons le plein contrôle pour la suite. Bien fait c'est du solide.

Le reset en CSS n'est pas juste une adaptation multi-navigateurs. Quand on remet le compteur à zéro, nous savons d'où nous partons. C'est notre structure qui compte.

J'irai approfondir « A Simple Base Stylesheet », Je n'ai jamais dépasser 2 instructions - margin et padding sous reset.

..

zardoz a écrit :
Jusqu'à aujourdh'hui j'utilise le reset en CSS

«Le reset en CSS» ça n'existe pas, ou alors tu parles du concept en général. Il existe plusieurs feuilles de styles qu'on appelle «CSS Reset», notamment celles d'Eric Meyer qui font référence.

Ce n'est pas le sujet ici, donc pour clore la parenthèse je pointerai cet article: La technique du Reset CSS.

Oui j'avais déjà lu l'article de Corinne S. Et j'ai relu encore.

Mais je ne m'étais pas arrêter sur la feuille de style de base qui, toujours selon Corinne, tente d'harmoniser plutôt que d'annuler les valeurs par défaut.

J'ai lu l'article de Corinne d'une façon différente. Je vais de ce pas vers la feuille de style de base, question de mieux saisir l'enjeu.

Merci fvsch

..

Bonjour à toutes et à tous,

messieurs que je crois que vous vous égarez !

Bien que le dialogue sur l'usage du RESET soit intéressant et je vous remercie au passage de nous faire part de vos opinions à ce sujet, mais je pense que vous êtes dans l'erreur.

Relisez la question de typpo que je reproduis ici :

"typpo" a écrit :
Je voudrais savoir comment faire pour que le positionnement soit le même dans tous les navigateurs.

Et pour ce faire, il donne un exemple. Il s'agit d'une question précise et non d'une hypothétique façon de développer qui dépend de la manière d'aborder la question. Il ne s'agit pas de la mise en œuvre théorique mais bien d'une façon pratique de résoudre un problème qui de plus est donnée en exemple.

Donc je me suis aussi posé la question du pourquoi de cette divergence de la présentation entre tous les navigateurs. Donc j'ai refais le test et je vous donne le code HTML suivant :

<!doctype html>
<html>
<head>
<title>test</title>
<style type="text/css">
#boite {
	background-color	: #0FF; 
	width				: 500px;
	height				: 100px;
}

#dedans { 
	background-color	: #0C9; 
	width				: 200px; 
	height				: 50px; 
	border				: 1px solid black; 
	margin				: 0 auto;
}

#dedans h1 { 
	font-size			: 16px;
}
</style>
</head>

<body>
<div id="boite"> 
	<div id="dedans"><h1>Bonjour !</h1></div> 
</div>
</body>
</html>

J'ai ajouté le DOCTYPE et le MARGIN manquant au code original pour produire le même résultat sur tous les navigateurs !

J'ai fait les tests sur : Mozilla Firefox 5.0 --- MSIE 8.0 --- Google Chrome 12.0 --- Apple Safari 5.0.5 --- Opera 11.50 qui se sont avérés conformes aux attentes !

Maintenant si la question est effectivement d'ordre général alors le débat sur le RESET peut avoir lieu mais il en demeure que le sujet est trop vaste pour être simplement décrit par une suite de recommandation pouvant aller jusqu'à chaque particularité des navigateurs.

@+
Modifié par Artemus24 (08 Jul 2011 - 12:14)

Artemus24 a écrit :
Bien que le dialogue sur l'usage du RESET soit intéressant et je vous remercie au passage de nous faire part de vos opinions à ce sujet, mais je pense que vous êtes dans l'erreur.

J'ai dit dès le départ qu'il ne s'agissait pas d'un problème de Reset, et j'ai dit ensuite qu'il serait bon de clore la parenthèse car ce n'est pas le sujet ici.

Pour rappel, sur le fond du problème j'écrivais:

fvsch a écrit :
À vue de nez je dirais que le problème constaté dans Internet Explorer est un bug, plus ou moins lié au HasLayout. Ce bug:
- touchera IE6 mais on s'en fiche;
- touchera IE7 et tant pis pour sa gueule;
- ne touchera pas IE8+ tant que tu t'assures que tu es en mode de rendu standard (voir dans les outils pour développeur intégrés à IE8+ quel est le mode de rendu utilisé pour afficher la page).

Et pour préciser: il y a dans IE 6-7 un bug qui cause parfois la «disparition» du margin-top ou du margin-left du premier élément dans un bloc qui a le layout. Ce n'est pas une fusion des marges mais bien une suppression pure et simple de la marge. Les solutions consistent à:
- s'en moquer totalement (ne plus assurer le support d'IE6, et tant pis pour le petit défaut dans IE7);
- ou bien utiliser du padding plutôt que margin dans ce cas précis;
- ou bien jouer sur le hasLayout pour essayer d'éviter ce problème.