28173 sujets

CSS et mise en forme, CSS3

[Résolu] Pb de CSS avec Ie7, Ie8 et méthode Clearfix

Bonjour,

j'utilise Joomla 1.5 avec le framework T3 V2 de Joomlart pour le template.

J'ai un problème récurrent sur la 1er page de mon site à priori les autres pages sont moins affectées).

voici une vue d'écran de mon site sous FF3.6 (cliquer pour voir l'image en plus grand) :
http://nsa19.casimages.com/img/2010/12/21/mini_10122110115483577.png

Voici le même site sous Ie8 :
http://nsa19.casimages.com/img/2010/12/21/mini_101221101420635834.png

> Smiley decu -> Je déteste Internet Explorer !!!!!

Si je change le code du fichier addon.css comme suit :

.clearfix:after { /* FF, O, etc. */
	content: ".CLEARFIX";
	display: block;
	height: 0;
	clear: both;
	font-weight: bold;


Le résultat sous Ie8 est le suivant :
http://nsa19.casimages.com/img/2010/12/21/mini_101221101701344295.png

Ca permet de voir que le probleme de mise en page est lié à l'utilisation de Clearfix. Dans Ie7, le problème, je n'est pas la même problème (juste le pied de page qui n'est pas à sa place).

Est ce que quelqu'un aurait une idée pour résoudre ce problème ??

Cordialement.

Junior76

NB : Possibilité d'avoir l'URL par message privé.
NB2 : J'ai lu ici et là que Alsacréation était la communauté la plus à la pointe concernant le CSS -> j'espère que c'est vrai . Smiley cligne
Modifié par junior76 (28 Dec 2010 - 22:19)
Bonjour,

Quel doctype ton theme utilise t-il ? (ou rendu de page en quel mode ? quirk, standard)

Pour IE , il est possible que le height : 0 ne soit pas suffissant.
Generalement on peux ajouter: overflow:hidden ou font-size:0; pour forcer a zero la hauteur d'un element vide formaté en block.

GC
gc-nomade a écrit :
Bonjour,

Quel doctype ton theme utilise t-il ? (ou rendu de page en quel mode ? quirk, standard)

Pour IE , il est possible que le height : 0 ne soit pas suffissant.
Generalement on peux ajouter: overflow:hidden ou font-size:0; pour forcer a zero la hauteur d'un element vide formaté en block.

GC


Bonjour merci pour votre réponse. Concernant le doctype, le voici :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


J'ai tenté d'ahouter overflow et/ou font-size à ma class clearfix, mais rien n'a changé.

Mon .clearfix :

.clearfix:after { /* FF, O, etc. */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	overflow: hidden;
	font-size: 0;
}


Je vous envoie par MP l'URL, vous aurez surement un meilleur aperçu de ce qui peut poser problème.

Cordialement

Junior76
bonsoir,

je viens de voir votre site.

De visu , cela ressemble a un défaut de fusion de marges.

En passant votre page au validateur, un element <span> n'a pas était correctement refermé.

En forçant les marges internes des span enfant des élément avec la class .clearfix, tout semble rentré dans l'ordre.

 .clearfix span   {padding:0!important;}

.clearfix:after { /* FF, O, etc. */
	content: "";/* ne rien affiché dedans , c'est inutile */
	display: block;
	clear: both;
}


Il est probable qu'il suffit de corrigé le défaut de balisage (refermé le span) pour que tout rentre dans l'ordre sans surplus de style.
http://validator.w3.org/ a écrit :
Validation Output: 7 Errors

1. Error Line 204, Column 202: end tag for "span" omitted, but OMITTAG NO was specified

…adon"><span>Read More</span></a> </div><div> </div><div style=" clear: both;"…

&#9993;

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
2. Info Line 204, Column 18: start tag was here

Conférences et...<span style="padding: 10px 0px; margin: 0;"><a href="/index.ph…


Pour le reste il y a a mon gout trop de div , de style en ligne et de feuille de style ... plutôt galère a suivre tout ça ... merci le validateur Smiley smile .

Cordialement, GC
gc-nomade a écrit :

En passant votre page au validateur, un element &lt;span&gt; n'a pas était correctement refermé.


Effectivement, un bug dans un module que j'avais utilisé ne referme pas correctement le SPAN en cas d'utilisation de CSS spécifique -> j'ai viré le CSS spécifique (donc le SPAN) et TOUT est rentré dans l'ordre.

Il est effectivement inutile de réaliser le surplus de style préconisé.

gc-nomade a écrit :

Pour le reste il y a a mon gout trop de div , de style en ligne et de feuille de style ... plutôt galère a suivre tout ça ... merci le validateur Smiley smile .

Cordialement, GC

C'est car j'utilise un CMS (Joomla) avec un template (Joomlart Framework T3 V2) qui permet de très nombreuses customisations. Au début, j'en ai galéré, mais maintenant, je maitrise la structure du template et donc de cette succession de DIV. En fait, il y a un système de surcharge de feuille de style qui permet de mettre à jour le framework sans devoir ré-écrire tout ces propres CSS qui sont séparées du core -> c'est lourd, mais super efficace. Ma feuille de style fait 330 lignes (en étant bien aéré) pour tout le site -> tout le reste fait parti du core.

junior76 a écrit :
NB2 : J'ai lu ici et là que Alsacréation était la communauté la plus à la pointe concernant le CSS -> j'espère que c'est vrai . cligne


On ne m'avait donc pas menti -> après 3 jours de galère -> la solution m'est donnée sur un plateau d'argent !!!!! MERCI -> Merci encore pour le coup de main. Je n'y serais jamais arrivé sans vous !!!! Smiley jap

Cordialement

Junior76
Sujet clos
Aller à