Firefox float:right

Version imprimable

Firefox float:right

Hello tout le monde,

Petit souci chez moi et pas moyen de comprendre ce qu'il se passe. Fonctionne sous chrome.
css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.presentation {
	visibility: hidden;
	position: absolute;
	left: -50px; top: 40%;
	width: 100%;
	transform: translateY(-50%);
	padding: px-to-rem(30px);
	background-color: rgba(#fff, 0.75);
	text-align: right;
 
 
	.title {
		margin-bottom: 0;
	}
 
	p {
		color: $light-blue-3ds-color;
		font-family: $app-font-family;
		font-size: px-to-rem(28px);
	}
}
#step1-screen {
	z-index: 11;
 
	.presentation .title {
		display : inline-block;
	}
 
	.presentation .num {
		content: url('../images/title1.png');
		margin-top: px-to-rem(26px);
		padding-left: px-to-rem(26px);
		float:right;
	}
 
	.presentation .p {
		display : inline-block;
	}
}

Code:

1
2
3
4
5
<div class="presentation">
						<span class="num"></span> 
						<h3 class="title">Blabla</h3>
						<p>Blablabla</p>
					</div>

Le but étant d'avoir un double titre de taille différente avec "1" entouré d'un cercle qui correspond au .png

Merci d'avance :)

27/02/2016, 09h15
NoSmoking

Bonjour,
ton code CSS me parait des plus farfelu, utilises tu un préprocesseurs CSS, si oui lequel ?
27/02/2016, 15h39
ptitdje

J'utilise sass :)

Je récapitule mon souci. J'ai une image à droite de 2 textes. J'ai donc .num ( mon image ) qui est en float:right et les deux textes en display:inline-block.

L'image s'affiche sous chrome bien à droite. Ne s'affiche pas sous firefox :/

Ce que je constate c'est une height nul. L'image fait 50x0 sous firefox. Même si je fixe une height et une width cela donne 50x50 mais aucun affichage. Pareil en rajoutant une position ou n'importe quelle fourberie.

Je suis perdu dans cet non-affichage.
27/02/2016, 16h33
NoSmoking

Citation:

...cela donne 50x50 mais aucun affichage.

vérifie le format de l'image, essaie avec une image gif pour voir.
29/02/2016, 10h53
Inikaam

Bonjour ptitdje,

La propriété css "content" est destinée aux pseudos-éléments :before et :after, tous les navigateurs ne le traitent pas nécessairement sur des éléments normaux.

https://developer.mozilla.org/fr/docs/Web/CSS/content
http://stackoverflow.com/questions/1...irefox-browser

D'autre part, pourquoi utiliser content dans un span alors qu'une balise img aurait été cent fois plus pratique (surtout si l'url est en dur) ?

À défaut, je te suggère d'utiliser une div plutôt qu'un span, le span est un élément inline qui n'est pas approprié pour l'utilisation que tu en fais.