[CSS] petit problème DIV sous Firefox

[cedric_g]

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 :

/* 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 :

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

(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]

Essaie ça :

/* 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 :

ul#actus-lien    {
   float:left
}

Histoire que ça reste propre.
Dis-moi ce que ça donne.

Edit : Firefox se comporte toujours très bien ! (si tant est que tu utilises une doctype)
Sinon, ce sont les autres navigateurs qui ne se comportent pas "normalement"

 

[cedric_g]

Merci pour ton aide, mais cela ne fonctionne pas (aucun changement)

 

[chtipepere]

Oui
Pardon, c'est normal, faut mettre la correction sur le div, pas le ul :

/* 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]

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

<br class="clear" />

Avec en CSS :

.clear {
clear: both;
}

 

[chtipepere]

Oui, le résultat sera le même, mais c'est pas beau

 

[cedric_g]

Génial !!!

Vous êtes des cracks


(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) )

 

[chtipepere]

Aller, un petit résolu ?

 

[webmasterlamogere]

merci pour la correction. J'ai testé chez moi en ne mettant que la partie ":after" et cela suffit.

div#actus-lien:after {
   content: "";
   display: block;
   height: 0;
   font-size: 0;
   clear: left;
   visibility: hidden;
}

 

[chtipepere]

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.

 

[Bellegarde-webb]

Je vous ai retrouvé la source.

Merci chtipepere, la "source" peut-être très utile à tous et toutes.

 

[Vap]

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!