28172 sujets

CSS et mise en forme, CSS3

BUG IE d'affichage

Bonjour j'ai plusieurs différents sous le navigateur Microsoft :
- le titre des modules remontent vers le haut et deviennent illisibles
- bordures d'1px sur la liste des articles qui n'apparaît pas
- lettrines qui se touchent...
- les images pour remplacer suivant et etc ne s'affichent pas

Ce constat est fait sous IE 7 Et puis j'en ai sous doute loupé !

(le cercle entourant le module avec l'image n'est plus à prendre en compte)

EDIT : Problème avec la place d'une puce.

Capture avec bordures et puce (sous FF/sous IE7)
Modifié par aAdrien (01 May 2009 - 15:14)
Salut,

... et quoi ? On est censés pouvoir t'aider à partir d'une image ? Smiley rolleyes

Autant nous donner directement le lien vers ta page...
Re',

la première chose à faire serait de corriger les erreurs de validation html et celles de css.

Pour ce qui est de tes questions :

* les titres : on dirait que les éléments ont été rajoutés (et les propriétés css qui vont avec) jusqu'à avoir le bon rendu dans Firefox mais l'ensemble n'est pas très solide et ce n'est pas étonnant que tu aies des problèmes.

Tu pourrais remplacer
[b]html[/b]
<div class="box-titre"><h2><span>Présentation</span></h2></div>


[b]css[/b]
.box-titre {
	padding:0px; 
	text-align:center;
	background-image: url(http://idata.over-blog.com/2/20/35/50/stripe-module.png); 
	height:23px;
}
.box h2 {
	color:#999999; 
	margin-left:10px; 
	margin-right:10px; 
	margin-top:0px; 
	margin-bottom:0px;
	line-height:23px
}
.box-titre h2 span {
	font: 17px/5px Impact,Arial,sans-serif; 
	font-style: italic; 
	color:#FFFFFF;
}
par
[b]html[/b]
<h2 class="box-titre">Présentation</h2>


[b]css[/b]
h2.box-titre {
	margin: 0;
	padding: 3px 0; 
	text-align:center;
	font: 1.6em Impact,Arial,sans-serif; 
	font-style: italic; 
	line-height:17px;
	color:#FFFFFF;
	background: #CC3333 url(http://idata.over-blog.com/2/20/35/50/stripe-module.png); 
	height:17px;
}

* bordure : remplacer grey par gray

* les lettrines : tu pourrais rajouter un margin et/ou un line-height à .article p

* image suivant : remplaces le margin-right par un padding-left.

* etc.
Salut, merci pour ta réponse très détaillée.

Tout d'abord, pour mes bordures c'est réglé, merci.

Pour les lettrines si j'ajoute un margin et/ou un line-height à .article p la marge va être plus importante sous IE que sous FF ?

Enfin, pour l'image suivant j'ai essayé sans succès... (c'est même pire car sous FF il y a un grand écart)

Sinon je pense pas pouvoir toucher au html du titre...
aAdrien a écrit :
Margin et line-height marchent uniquement sous ff... Smiley ohwell
Heureusement que non ! Smiley langue

Il me semble que tu dois avant tout reprendre les bases de css et faire des tests sur les différentes propriétés.

Lire les tutos de la section Apprendre serait également une bonne idée. Smiley cligne
Sujet clos
Aller à