[CSS] petit problème DIV sous Firefox

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par cedric_g, 24 Janvier 2008.

  1. cedric_g
    cedric_g WRInaute accro
    Inscrit:
    18 Janvier 2006
    Messages:
    2 930
    J'aime reçus:
    2
    Bonjour


    Me suis aperçu que je devais faire qqchose de "mal" sur mes sites, car en cours de développement sur un nouveau projet, ça m'a sauté aux yeux même si avant ça ne me gênait pas plus que ça.

    Mon problème : j'utilise une balise DIV pour "contenir" des liens en liste (balises UL / LI), avec juste en-dessous un titre (balise H2) et la suite du contenu. Mais ce p... de Firefox ne prend JAMAIS en compte l'espace entre la DIV et le H2 (j'ai tout essayé : marge, padding, autant sur le H2 que sur la DIV ou la balise UL, nada !)

    Je n'arrive pas à empêcher cela sous Firefox (alors qu'IE réagit à priori correctement, en tout cas pour moi :mrgreen: )


    Mon code CSS :

    Code:
    /* Liens vers articles (depuis accueil)
    ********************************************/
    div#actus-container {
    	width: 210px;
    	text-align:center;
    	padding-bottom: 20px;
    	margin: 0px auto
    }
    
    ul#actus-lien 	{ 
    	float:left 
    }
    
    ul#actus-lien, ul#actus-lien li { 
    	list-style:none;
    	margin:5px 0 0 0;
    	padding:0 
    }
    
    ul#actus-lien li {
    	width:210px;
    	text-align: justify;
    }
    
    ul#actus-lien img {
    	display:inline;
    	float:left;
    	width:40px;
    	height:40px;
    	border:0px solid;
    	margin:0 8px 0 0
    }
    
    ul#actus-lien a {
    	display:block;
    	padding: 5px;
    	color: #666666;
    	background:#EFEFEF;
    	border: #A0A0A0 1px solid;
    	text-decoration: none
    }
    
    ul#actus-lien a:hover {
    	color: #000000;
    	background:#F4F4F4;
    }
    
    Le code HTML :
    Code:
    <h2>Du m&ecirc;me auteur...</h2>
    			<div id="actus-container">
    				<ul id="actus-lien">
    					<li>
    						<a href="http://www.aube-nature.com">
    							<img src="images/aube-nature.jpg" alt="Photo nature" />
    							<strong>Aube Nature</strong><br />
    							photographie animalière et de nature dans le département de l'Aube et ailleurs...	
    						</a>
    					</li>
    					<li>
    						<a href="http://reportages.aube-nature.com">
    							<img src="images/reportages-animaliers.jpg" alt="Reportages animaux" />
    							<strong>Reportages animaliers</strong><br />
    							réalisés par l'auteur et dédiés aux animaux et à l'environnement...
    						</a>
    					</li>
    					<li>
    						<a href="http://blog.aube-nature.com">
    							<img src="images/blog-photo.jpg" alt="Blog photo" />
    							<strong>Blog photo nature</strong><br />
    							dédié aux techniques de photographie animalière et de nature et ce qui s'y rapporte...
    						</a>
    					</li>
    					<li>
    						<a href="http://www.chatterie-koolkat.com">
    							<img src="images/chatterie-koolkat.jpg" alt="Maine coons et sphynx" />
    							<strong>Maine coons et de sphynx</strong><br />
    							chats géants américains et chats nus canadiens, élevés en milieu familial...
    						</a>
    					</li>
    				</ul>
    				</div>		
    			<h2>&Agrave; d&eacute;couvrir...</h2>
    ici la suite, blablabla...
    
    Et ça donne ça sous Firefox :evil:

    [​IMG]


    (même comportement quelle que soit la balise qui suit... Il "colle" toujours à son successeur !)


    Une idée ?... J'ai tout essayé, je précise que la liste est évidemment de hauteur variable.



    Merci
     
  2. chtipepere
    chtipepere WRInaute occasionnel
    Inscrit:
    8 Janvier 2004
    Messages:
    428
    J'aime reçus:
    0
    Essaie ça :
    Code:
    /* CORRECTIONS DIV FLOAT */
    ul#actus-lien:after {
    	content: ".";
    	display: block;
    	height: 0;
    	font-size: 0;
    	clear: left;
    	visibility: hidden;
    }
    ul#actus-lien {
    	display: inline-block;
    }
    * html ul#actus-lien {
    	height: 1%;
    }
    ul#actus-lien {
    	display: block;
    }
    /* FIN CORRECTION FLOAT */
    A mettre par exemple juste après :
    Code:
    ul#actus-lien    {
       float:left
    }
    Histoire que ça reste propre.
    Dis-moi ce que ça donne.

    Edit : Firefox se comporte toujours très bien ! :D (si tant est que tu utilises une doctype)
    Sinon, ce sont les autres navigateurs qui ne se comportent pas "normalement" ;)
     
  3. cedric_g
    cedric_g WRInaute accro
    Inscrit:
    18 Janvier 2006
    Messages:
    2 930
    J'aime reçus:
    2
    Merci pour ton aide, mais cela ne fonctionne pas (aucun changement)
     
  4. chtipepere
    chtipepere WRInaute occasionnel
    Inscrit:
    8 Janvier 2004
    Messages:
    428
    J'aime reçus:
    0
    Oui
    Pardon, c'est normal, faut mettre la correction sur le div, pas le ul :
    Code:
    /* CORRECTIONS DIV FLOAT */
    div#actus-container:after {
       content: ".";
       display: block;
       height: 0;
       font-size: 0;
       clear: left;
       visibility: hidden;
    }
    div#actus-container {
       display: inline-block;
    }
    * html div#actus-container {
       height: 1%;
    }
    div#actus-container {
       display: block;
    }
    /* FIN CORRECTION FLOAT */
    Tu peux essayer?
     
  5. Bobulum
    Bobulum WRInaute discret
    Inscrit:
    21 Mars 2005
    Messages:
    56
    J'aime reçus:
    0
    Ou sinon un petit <br> simple pourrait faire l'affaire non?

    Code:
    <br class="clear" />
    Avec en CSS :

    Code:
    .clear {
    clear: both;
    }
     
  6. chtipepere
    chtipepere WRInaute occasionnel
    Inscrit:
    8 Janvier 2004
    Messages:
    428
    J'aime reçus:
    0
    Oui, le résultat sera le même, mais c'est pas beau :D
     
  7. cedric_g
    cedric_g WRInaute accro
    Inscrit:
    18 Janvier 2006
    Messages:
    2 930
    J'aime reçus:
    2
    Génial !!!

    Vous êtes des cracks :D


    (la solution corrigée de chtipepere fonctionne à merveille !)


    Merci à vous deux. D'ici ce WE, un nouveau site verra le jour... un peu grâce à vous !

    (à ce propos, je pense que je vais battre mon record, avec un site construit en 3 jours 8) )
     
  8. chtipepere
    chtipepere WRInaute occasionnel
    Inscrit:
    8 Janvier 2004
    Messages:
    428
    J'aime reçus:
    0
    Aller, un petit résolu ?
     
  9. webmasterlamogere
    webmasterlamogere WRInaute passionné
    Inscrit:
    17 Décembre 2006
    Messages:
    1 647
    J'aime reçus:
    1
    merci pour la correction. J'ai testé chez moi en ne mettant que la partie ":after" et cela suffit.
    Code:
    div#actus-lien:after {
       content: "";
       display: block;
       height: 0;
       font-size: 0;
       clear: left;
       visibility: hidden;
    } 
     
  10. chtipepere
    chtipepere WRInaute occasionnel
    Inscrit:
    8 Janvier 2004
    Messages:
    428
    J'aime reçus:
    0
    Hop hop hop
    ATTENTION
    Tout ce code n'est pas là pour rien!
    La pseudo classe after ne fonctionne pas sur tous les navigateurs!!!
    L'ensemble du code que j'ai donné permet une compatibilité avec l'ensemble des navigateurs courants : IE6, IE7, FF, Safari, et IE5 MAC (de mémoire)!!!
    Remets tout, tu seras tranquille.
    Je vous ai retrouvé la source.
     
  11. Bellegarde-webb
    Bellegarde-webb WRInaute impliqué
    Inscrit:
    12 Juillet 2006
    Messages:
    987
    J'aime reçus:
    0
    Merci chtipepere, la "source" peut-être très utile à tous et toutes. :)
     
  12. Vap
    Vap WRInaute impliqué
    Inscrit:
    17 Juin 2007
    Messages:
    983
    J'aime reçus:
    0
    Merci chtipepere.

    Daprès ta source, le hack ne marche pas pour IE7... Il faut mettre le css que tu donne dans un commentaire conditionel, voir ce complement

    Je m'en vais tester tout ça illico!
     
Chargement...
Similar Threads - [CSS] problème DIV Forum Date
[Réglé] [CSS] Problème de largeur de "div" Développement d'un site Web ou d'une appli mobile 31 Août 2006
[CSS] : problème de mise en page FF3 Développement d'un site Web ou d'une appli mobile 31 Août 2008
[CSS] Problème d'alignement sous IE... Développement d'un site Web ou d'une appli mobile 14 Mai 2007
[CSS] Problème avec IE6... Développement d'un site Web ou d'une appli mobile 17 Janvier 2007
[CSS] Problème d'alignement sous Firefox (OK avec IE) Développement d'un site Web ou d'une appli mobile 18 Octobre 2006
[résolu] [CSS] Problème de transparence Développement d'un site Web ou d'une appli mobile 30 Novembre 2005
[CSS] problème de marge dans liste Développement d'un site Web ou d'une appli mobile 28 Octobre 2005
[CSS] Application (non souhaitée) d'un effet au parent via :not(:hover) Développement d'un site Web ou d'une appli mobile 17 Novembre 2020
[CSS] Alignement de cadre. Développement d'un site Web ou d'une appli mobile 24 Mai 2013
[CSS] Aligner une image à coté d'une div en display:table-cell ? Développement d'un site Web ou d'une appli mobile 2 Mai 2012
[CSS] Alignement vertical du texte Développement d'un site Web ou d'une appli mobile 20 Avril 2011
[css] Petit souci pour le menu du jour! Développement d'un site Web ou d'une appli mobile 29 Août 2010
[css] Comment centrer un bloc css? Développement d'un site Web ou d'une appli mobile 25 Août 2010
[CSS] Comment faire apparaître le sous-menu ? Développement d'un site Web ou d'une appli mobile 22 Juillet 2010
[CSS] Overflow, float:right, et internet explorer Développement d'un site Web ou d'une appli mobile 10 Août 2009
[css] <li> image en vertical-align:bottom Développement d'un site Web ou d'une appli mobile 18 Juillet 2009
[CSS] bouton non cliquable Développement d'un site Web ou d'une appli mobile 16 Juillet 2009
[CSS] IE8 Développement d'un site Web ou d'une appli mobile 15 Juillet 2009
[CSS] decalage image et texte Développement d'un site Web ou d'une appli mobile 18 Juin 2009
[CSS] : scroller overflow et ie6 :-( Développement d'un site Web ou d'une appli mobile 12 Mai 2009