Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Codigo css no funcionan en firefox y safari

CSS - Codigo css no funcionan en firefox y safari

Volver
Nuevo Tema
<<>>
 
Vista:
Mensajes realizados anteriormente (No estaban la última vez que entraste)Codigo css no funcionan en firefox y safari
exequiel (06/02/2017 02:55:19)443 visitas
1 respuesta
Mensajes realizados anteriormente (No estaban la última vez que entraste)Codigo css no funcionan en firefox y safari
Enrique (03/04/2017 20:52:25)
Imágen de perfil de exequiel

Codigo css no funcionan en firefox y safari

Publicado por exequiel (1 intervención) el 06/02/2017 02:55:19
Hola buenasss...!!
Eh creado un after con un background de fondo, ese after aparece cuando pasamos el cursor sobre cada una de las imagenes. En naviegadores como el chrome, opera e internet explorer edge funciona de diez pero en el safari o firefox no. El problema central es que la imagen aparece pero no esta centrada. Les mando una imagen del problema.

Les agradecería si pueden ayudarme...!!
Slds....!!

Este es una parte del código html.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<main class="main">
	<div class="services">
		<div class="service-imagenes seguridad">
			<h3 class="service-imagenes__title ">Sistema de Seguridad</h3>
		</div>
 
		<div class="service-imagenes paginas">
			<h3 class="service-imagenes__title ">Diseño de Paginas Web</h3>
		</div>
 
		<div class="service-imagenes computacion">
			<h3 class="service-imagenes__title ">Técnicos Computacionales</h3>
		</div>
 
		<div class="service-imagenes telefonico">
			<h3 class="service-imagenes__title ">Técnicos Telefónicos</h3>
		</div>
 
	</div>

Parte del codigo CSS

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
.services {
  background: #ffffff;

  margin-top: .5em;
  margin-bottom: 8em;
  width: 100%;
  height: 100%; }
  @media screen and (min-width: 768px) {
    .services {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      padding-top: 3em; } }
  @media screen and (min-width: 1201px) {
    .services {
      margin-left: -1em; } }
  @media screen and (min-width: 1300px) {
    .services {
      margin: auto; } }
 
.service-imagenes {
  top: 1em;
  border-radius: 50%;
  position: relative;
  height: 280px;
  width: 311px;
  margin: auto;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  color: #ffffff;

  margin-bottom: 1em;
  font-size: .8em;
  cursor: pointer; }
  .service-imagenes__title {
    margin-top: -9em; }
  @media screen and (min-width: 933px) {
    .service-imagenes {
      margin-left: 7em; } }
  @media screen and (min-width: 1201px) {
    .service-imagenes {
      margin-left: 14em; } }
  @media screen and (min-width: 1300px) {
    .service-imagenes {
      margin: auto; } }
  .service-imagenes:nth-of-type(1):after {
    background: url("img-seg.png") center center no-repeat; }
  .service-imagenes:nth-of-type(2):after {
    background: url("img-diseño.png") center center no-repeat; }
  .service-imagenes:nth-of-type(3):after {
    background: url("img-compu.png") center center no-repeat; }
  .service-imagenes:nth-of-type(4):after {
    background: url("img-tel.png") center center no-repeat; }
 
.seguridad {
  background: url("sistemaseg.png") no-repeat center steelblue; }
 
.paginas {
  background: url("diseñoweb.png") no-repeat center #E42D40;

  color: #ffffff; }

 
.computacion {
  background: url("tecnicopc.png") no-repeat center steelblue; }
 
.telefonico {
  background: url("tecnicotel.png") no-repeat center #E42D40;

  color: #ffffff; }

 
.service-imagenes:hover:after {
  opacity: 1;
  transform: scale(1);
  border: 1px solid black; }
 
.service-imagenes:after {
  content: "";
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transition: all 1s;
  transform: scale(0);
  opacity: 0; }

paginaWeb
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Enrique
Val: 126
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Codigo css no funcionan en firefox y safari

Publicado por Enrique (43 intervenciones) el 03/04/2017 20:52:25
El detalle es que en safari y mozilla se les cargar las variantes css para que las reconosca el navegador,
pueden ser -webkit, o -moz
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar