CSS simple Positionnement div & float

Fermé
Babybel54 Messages postés 24 Date d'inscription dimanche 9 décembre 2007 Statut Membre Dernière intervention 8 mars 2013 - 9 juin 2009 à 15:52
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 11 juin 2009 à 13:13
Bonjour,

Voilà mon problème est sur cette page : http://gotti.matthieu.free.f/oriffpl/liens.html
Quand on la regarde avec IE ça rend le résultat voulu, mais avec Firefox non.

Hier j'avais le problème inverse avec cette même page..
J'ai donc rajouter dans mon css:
overflow: hidden;
display:inline-block;
clear:both;

et cela donne ce résultat, quelqu'un peut il m'aiguiller pour que j'ai la même chose sur les 2 explorateurs, sans avoir à utiliser 2 styles différents (un pour IE et l'autre pour firefox).

voilà l'adresse de mon CSS : http://gotti.matthieu.free.fr/oriffpl/images/style.css

Merci d'avance pour vos réponses :)
A voir également:

3 réponses

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
9 juin 2009 à 18:24
salut,

chez moi sous FF ça semble correct, as-tu réussi ?
0
Babybel54 Messages postés 24 Date d'inscription dimanche 9 décembre 2007 Statut Membre Dernière intervention 8 mars 2013 1
11 juin 2009 à 08:51
Chez moi sous Firefox, ça me semble pas correct puisque chaque description est en dessous des images et que sur IE c'est à coté.

Je n'ai pas réussi ^^
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
11 juin 2009 à 13:13
salut,

sans IE c'est plus difficile à voir…
-;o)

si tu veux le texte à côté il faut enlever le {clear:both;} car il remet le bloc dans le flux alors que tu veux qu'il soit à côté (il annule le {float:left;} de l'image).
.liens_description_gauche {
clear:both;
color:#808080;
float:right;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
margin-top:5px;
text-align:justify;
vertical-align:bottom;
width:192px;
}
tu dois pouvoir faire beaucoup plus simple, donc plus stable avec quelque chose du genre :
<div class="liens_gauche">
	<p id="unapl">L'Union NAtionale des Professions LIbérales <a href="https://www.unapl.fr/">www.unapl.fr</a></p>
</div>

et en CSS :
div.liens_gauche p{
	padding-left:80px;
	background-position:0 50%;
	background-repeat:no-repeat;
}
div.liens_gauche p a{
	display:block;
	text-align:center;
}
div.liens_gauche p#unapl{
	background-image:url(images/logo_unapl.jpg);
}
0