|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
cedric_g
WRInaute accro
Inscrit le: 18 Jan 2006
Messages: 1509
Localisation: Aube
|
 Posté le : Jeu Jan 24, 2008 11:51 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
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  )
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ê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>À découvrir...</h2>
ici la suite, blablabla...
|
Et ça donne ça sous Firefox 
(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 impliqué
Inscrit le: 08 Jan 2004
Messages: 467
|
| Posté le : Jeu Jan 24, 2008 12:12 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
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 !  (si tant est que tu utilises une doctype)
Sinon, ce sont les autres navigateurs qui ne se comportent pas "normalement"  |
|
| |
|
|
cedric_g
WRInaute accro
Inscrit le: 18 Jan 2006
Messages: 1509
Localisation: Aube
|
| Posté le : Jeu Jan 24, 2008 12:21 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
| Merci pour ton aide, mais cela ne fonctionne pas (aucun changement) |
|
| |
|
|
chtipepere
WRInaute impliqué
Inscrit le: 08 Jan 2004
Messages: 467
|
| Posté le : Jeu Jan 24, 2008 12:40 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
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
Inscrit le: 21 Mar 2005
Messages: 56
|
| Posté le : Jeu Jan 24, 2008 15:52 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
Ou sinon un petit <br> simple pourrait faire l'affaire non?
| Code: |
| <br class="clear" /> |
Avec en CSS :
| Code: |
.clear {
clear: both;
} |
|
|
| |
|
|
chtipepere
WRInaute impliqué
Inscrit le: 08 Jan 2004
Messages: 467
|
| Posté le : Jeu Jan 24, 2008 15:58 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
| Oui, le résultat sera le même, mais c'est pas beau |
|
| |
|
|
cedric_g
WRInaute accro
Inscrit le: 18 Jan 2006
Messages: 1509
Localisation: Aube
|
| Posté le : Jeu Jan 24, 2008 16:00 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
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  ) |
|
| |
|
|
chtipepere
WRInaute impliqué
Inscrit le: 08 Jan 2004
Messages: 467
|
| Posté le : Jeu Jan 24, 2008 17:29 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
| Aller, un petit résolu ? |
|
| |
|
|
webmasterlamogere
WRInaute accro
Inscrit le: 17 Déc 2006
Messages: 1689
Localisation: urlrewriting.fr
|
| Posté le : Jeu Jan 24, 2008 17:46 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
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 impliqué
Inscrit le: 08 Jan 2004
Messages: 467
|
| Posté le : Jeu Jan 24, 2008 17:51 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
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
WRInaute passionné
Inscrit le: 12 Juil 2006
Messages: 917
Localisation: Besançon
|
| Posté le : Jeu Jan 24, 2008 21:21 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
| chtipepere a écrit: |
Je vous ai retrouvé la source. |
Merci chtipepere, la "source" peut-être très utile à tous et toutes.  |
|
| |
|
|
Vap
WRInaute accro
Inscrit le: 17 Juin 2007
Messages: 1073
Localisation: Bouches-du-Rhône
|
| Posté le : Jeu Jan 24, 2008 22:29 Sujet du message: [CSS] petit problème DIV sous Firefox |
|
|
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! |
|
| |
|
|
| |
|
|
