Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP problème CSS décalage "padding" différent sous opéra

problème CSS décalage "padding" différent sous opéra

6 réponses
Avatar
thierry
Bonjour,

J'ai un soucis d'interpr=E9tation d'un css sous Op=E9ra. Tout fonctionne
parfaitement sous firefox et IE. l'ID "decalagehaut" et affect=E9 =E0 une
balise <div id=3D"decalagehaut">.

#decalagehaut {
padding-top: 80px;
}

Pour caler mon =E9l=E9ment de la m=EAme mani=E8re il faudrait que le
param=E8tre "padding-top" soit =E0 72px, bref 8 pixels qui font la
diff=E9rence... Que faut-il faire pour un affichage compatible sur ces
trois navigateurs ? Faut-il rajouter une condition, dans ce cas quelle
est la syntaxe ?

Thierry
Signaler un problème avec ce contenu

6 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
ASM
a écrit :
Bonjour,

J'ai un soucis d'interprétation d'un css sous Opéra. Tout fonctionne
parfaitement sous firefox et IE. l'ID "decalagehaut" et affecté à une
balise <div id="decalagehaut">.

#decalagehaut {
padding-top: 80px;
}

Pour caler mon élément de la même manière il faudrait que le
paramètre "padding-top" soit à 72px, bref 8 pixels qui font la
différence... Que faut-il faire pour un affichage compatible sur ces
trois navigateurs ?



il faut trouver d'où viennent ces 8px ...

Est-ce que les marges et padding du body ont été précisées ?

Qu'y a t-il au-dessus de decalagehaut ?

Que contient decalagehaut ? a-t-il un H1 ou Hn en début ?
Si oui, ce Hn a-t-il reçu une règle css ? (pertinente ?)

--
Stephane Moriaux et son [moins] vieux Mac
Avatar
thierry
Il n'y a absolument rien au dessus de cette balise <div> et les marges
ont été mises à zero comme suit :
body {
margin: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

C'est vraiment un mystère...
Avatar
ASM
a écrit :

C'est vraiment un mystère...




#decalagehaut p { margin: 5px 0; }

--
Stephane Moriaux et son [moins] vieux Mac
Avatar
ASM
a écrit :
Il n'y a absolument rien au dessus de cette balise <div> et les marges
ont été mises à zero comme suit :
body {
margin: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

C'est vraiment un mystère...




bon, en fait il faut préciser la taille de police ...
en unités absolues

#decalagehaut {
padding-top: 80px;
font-family: arial;
font-size: 12px;
}

--
Stephane Moriaux et son [moins] vieux Mac
Avatar
thierry
En fait j'ai fini par trouver, il s'agissait de mon image de fond, il
ya un décalage de 8 pixels sur Opéra apr défaut, j'ai précisé
ainsi :

#accueil {
background-image: url(../images/bg_accueil.png);
background-repeat: no-repeat;
padding-top: 0px;
}

c'est le paramètre padding-top: 0px; qui fait toute la différence !!!
Avatar
ASM
a écrit :
En fait j'ai fini par trouver, il s'agissait de mon image de fond, il
ya un décalage de 8 pixels sur Opéra apr défaut, j'ai précisé
ainsi :

#accueil {
background-image: url(../images/bg_accueil.png);
background-repeat: no-repeat;
padding-top: 0px;
}

c'est le paramètre padding-top: 0px; qui fait toute la différence !!!




j'ai rien compris !

où est passé decalagehaut ?

ou bien accueil est-il dans decalagehaut ?
dans ce cas chez moi ça décale
(il faut préciser la taille de police dans decalagehaut)
L'image de fond ne compte pas dans l'histoire ... sauf pour visualiser
le blème

#decalagehaut {
padding-top: 80px;
font-size: 12px;
}
#accueil {
background-image: url(images/grille.gif);
}

<body>
<div id="decalagehaut">
<div id="accueil">
<p>blabla</p>
</div>
</div>

est OK chez moi

--
Stephane Moriaux et son [moins] vieux Mac