28220 sujets

CSS et mise en forme, CSS3

[résolu] Line-height et Explorer ?

Bonjour,

Je vous amène encore un cas d'incompatibilité FF / IE Smiley smile

J'utilise la classe CSS line-height pour que mon texte soit centré verticalement dans mon calque "fil d'ariane".

Dans FF, c'est nickel, par contre dans IE, ça ne marche pas du tout. J'ai aussi essayé vertical-align qui marche encore moins j'ai essayé de mettre des paddings dans mon #ariane et #ariane p mais pas de bon résultat.

http://www.exoconcept.ch/tests/sic/

Quelqu'un aurait-il une suggestion ?

Sinon je rencontre un autre problème (sempiternel celui-ci, je n'ai jamais trouvé une vraie solution). J'ai mis un background blanc à mon conteneur, et je voudrais qu'il s'étire jusqu'au bas de la page... Hors si je mets height:auto il ne se passe rien, si je mets height:100% lorsque je scrolle je me retrouve avec du vide.

Mille mercis d'avance pour votre aide !
Modifié par Corinne (21 Oct 2005 - 13:25)
Salut !

Et bien parce que... ça ne marche pas Smiley biggol

Je crois que ça ne marche pas parce que je les ai disposée en ligne (inline) afin de pouvoir les mettre côte à côte.
Administrateur
Ce qui est sûr, c'est que line-height fonctionne sur IE (si elle est appliquée sur un bloc, bien sûr). Donc il doit y avoir un autre problème chez toi, et sans voir le code il est impossible de l'identifier.

Pour info, as-tu suivi ce point de la FAQ et ses exemples ?
http://forum.alsacreations.com/faq/#item3

jp949 a écrit :
Salut.
pourquoi tu ne mets pas des margin top et bottom a <h1> et <p>presentation?

Cette technique est très hasardeuse et est complètement dépendante de la taille du texte. Si celui-ci est modifié, alors il ne sera plus du tout centré.
Modifié par Raphael (19 Oct 2005 - 16:14)
C'est ton image qui perturbe IE. Remplace là simplement par un chevron en texte, tout le monde y gagnera.
Modérateur
bonjour,

en usant d'un padding, j'obtiens un resultat identique sous ff et le même sous IE, voici ce qu j'ai changer au css:

#ariane {
	height: 2em;
	background-color: #D3E0EA;
	padding-top:0.5em;
}


essaie pour voir si cela te convient .
Raphael a écrit :
Ce qui est sûr, c'est que line-height fonctionne sur IE (si elle est appliquée sur un bloc, bien sûr). Donc il doit y avoir un autre problème chez toi, et sans voir le code il est impossible de l'identifier.


Tiens cela va me permettre d'éclairer l'un de mes doutes. Si j'applique un display:inline à un élément bloc (h1 dans mon cas) devient-il à proprement parler un élément ligne (cela impliquerait que tout ce qui peut s'appliquer à un bloc uniquement ne s'apliquerait plus à cet élément) ?

gcyrillus a écrit :
en usant d'un padding, j'obtiens un resultat identique sous ff et le même sous IE


Je n'osais pas placer un padding dans mon div à cause du modèle de boîtes différent FF / IE. Mais apparemment, seul le left & right sont impliqués dans cette affaire puisque cela fontionne parfaitement ?

Xavier a écrit :
C'est ton image qui perturbe IE

Ah ? Pourquoi une image pertuberait-elle IE ?

Merci à tous de votre aide et de vos éclaircissements.
Modifié par Corinne (20 Oct 2005 - 13:54)
a écrit :
Ah ? Pourquoi une image pertuberait-elle IE ?
Tu fais comme tu veux, mais si jamais tu essayes de la retirer en conservant ton line-height:30 px tu verras que les choses rentrent dans l'ordre.

Les images sont des "inline replaced elements" ce qui les distingue des autres
"inline elements" dans la norme CSS2.1 (notamment ils ont droit à une hauteur). Il doit y avoir un bug IE sur ces éléments. J'ai déjà constaté cette anomalie plusieurs fois sans réellement maîtriser les paramètres influant sur ce bug. Ce défaut ne semble pas faire parti des problèmes liés à la propriété haslayout.
Sujet clos
Aller à