[CSS] petit problème DIV sous Firefox

cedric_g

WRInaute accro
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:

pb-div-ff.jpg



(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
 

chtipepere

WRInaute occasionnel
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" ;)
 

chtipepere

WRInaute occasionnel
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?
 

Bobulum

WRInaute discret
Ou sinon un petit <br> simple pourrait faire l'affaire non?

Code:
<br class="clear" />

Avec en CSS :

Code:
.clear {
clear: both;
}
 

cedric_g

WRInaute accro
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) )
 

webmasterlamogere

WRInaute passionné
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;
}
 

chtipepere

WRInaute occasionnel
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.
 

Vap

WRInaute impliqué
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!
 

Discussions similaires

Haut