Firefox (Mi gran enemigo, sin contar IE)
Hola de nuevo, se que soy pesado por esta parte del foro.
No tengo apenas idea de html ni css, todo lo que he ido haciendo lo he hecho a base de ensayo y error.
Os explico mi jodienda (por llamarlo de alguna manera sin que me saque de mis casillas)
Estoy retocando mi página web, añadiéndole cosas nuevas, desde un servidor que tengo montado en mi pc. Hasta ahí todo perfecto.
Total, que empiezo a friquear con el código y tal, uso safari para hacer las pruebas y se ve todo de lujo, uso Chrome como segunda referencia y también, todo de lujo. Hasta que me da por abrir mi maravilloso Firerox, gran amigo. Internet explorer ya lo he dejado de lado, por que no tiene solución.
A ver como os lo explico.
Estoy haciendo una sección en la web, donde expongo mis habilidades (lo más objetivamente posible), para ello hago un rollover de un sprite con al que le añado la caracteristica de :hover, quedando el código tal que así:
#progreso{
width:850px;
height:47px;
}
#progreso:hover{
background-position: 0 -47px;
display: block;
}
En Safari y en Chrome, como ya he comentado, va de lujo, pero en Firefox, no se ve nada, vamos, como si no hubiese puesto nada de nada en esa parte de la web.
También tengo una parte de descargas, donde separo cada elemento con un poco de padding, cual es mi sorpresa cuando entro a mi querido amigo Firefox y no me respeta para nada el padding, me lo descuadra todo totalmente y me lo deja como un adefesio.
Una manita?
Muchas gracias por anticipado :D
MAXer3D
Tendrías que poner un poco más del codigo porque no se ve que tenga ningun error.
¿Probaste con ponerle un overflow:hidden; ?
Alex Bailon
Lo acabo de probar y sigue sin cambios aparentes a primera vista.
El código por ejemplo sería este:
#progreso{
width:850px;
height:47px;
}
#progreso:hover{
background-position: 0 -47px;
display: block;
}
.progresophotoshop{
width:850px;
height:47px;
background:url("/images/habilidades/photoshop.png") no-repeat;
}
y luego el html sería este:
<div id="progresocajon" align="center"><div id="progreso" class="progresophotoshop"></div></div>
MAXer3D
Se me ocurre que la ruta de la imagen este mal:
background:url("/images/habilidades/photoshop.png") no-repeat;
proba con:
background:url("images/habilidades/photoshop.png") no-repeat;
Usuario desconocido
Sería bueno saber con qué versión de firefox tienes problemas. Yo pondría el código así:
#progreso {
width:850px;
height:47px;
display: block;
text-align:center;
}
.progresophotoshop {
background:url("/images/habilidades/photoshop.png") no-repeat;
}
.progresophotoshop:hover {
background-position: 0 -47px;
}
Si el background está definido en el class (.progresophotoshop) y no el id (#progreso), lo correcto sería definir el cambio que se efectua (hover) en el class. También definiría desde el principio que #progreso debe mostrarse como un bloque (display:block), por lo que lo incluiría directamente en el id, y no en id:hover.
Por último "align=center" no debería ir definido en el html, sino en css.
Alex Bailon
Buenos días, acabo de probar las cosas que me ponéis arriba y no me funciona, se me sigue sin ver en firefox, uso la última versión (6.0.2) y por eso me extraña mucho que no se vean estas cosas y que aparte el padding no me lo respete para nada y haya secciones que me las descuadre por completo.
el doctype que tengo es este: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(He leido por foros ingleses y con mi poco nivel de ingles, he podido deducir que tambien puede ser culpa del doctype, pero he provado varios, incluso el nuevo de HTML5 y tampoco me va en firefox)
Os adjunto unas capturas de pantalla de la página vista en safari y vista en firefox, para que veáis las pedazo de diferencias.
http://www.alexbailon.com/downloads/capturas.zip
rey_maria
Si quieres sube el código a alguna url y le echo un ojo
JCMartinez
He probado tu código en una página y la he previsualizado en firefox 6.0.2, ie8, safari 5.0.4 y Chrome 13.
No se si algunas de las versiones de Safari o Chrome son las últimas, pero te puedo decír que el codigo funciona en todos los navegadores.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
#progreso{
width:850px;
height:47px;
}
#progreso:hover{
background-position: 0 -47px;
display: block;
}
.progresophotoshop{
width:850px;
height:47px;
background:url("images/exia.jpg") no-repeat;
}
</style>
<body>
<div id="progresocajon" align="center"><div id="progreso" class="progresophotoshop"></div></div>
</body>
</html>
Intenta comprobarlo en otro ordenador. Una vez me ocurrío que con la misma versión de firefox en distintos ordenadores veía elementos posicionados de forma diferente. No se si es algo que se deba al S.O. La verdad es que no lo se.
Alex Bailon
rey_maria
Te refieres al CSS y al index.html? el CSS lo tengo más desordenado que la habitación de una adolescente en plena edad del pavo y sin novio.
JCMartinez
Pues la verdad, que no se me ocurre una idea para probar el código en otro ordenador, ya que tengo el servidor virtual montado en mi portátil y no sabría como hacerlo.
A mi tambien me parece raro raro raro, puede que sea el firefox para la versión de mac... (que no me extrañaría).
rey_maria
Sí, me refiero a html+css. Si lo tienes liado es igual, siempre que se pueda revisar el problema.
Tu problema es que no se ve lo que quieres poner hover, ¿no?
De paso dime qué versión firefox de mac tienes, porque puedo mirarla en el ordenador del chollo y te diría si se ve bien, ya te contaré cuál tengo yo allí que de memoria no sé. Yo en casa tengo un pc (tengo instalados chrome, ie7,firefox y opera).
Alex Bailon
rey_maria
Mi problema Maria, es que lo que tengo en :hover, no se me directamente en fifefox, he subido unas capturas unos comentarios antes, si puedes descárgatelas y verás todos los problemas que tengo con firefox.
Ahora me pondré manos a la obra de subir a mi servidor el html + css para que puedas trastear. :D
Muchas gracias :D
Alex Bailon
Archivos (no se si están todos) :
http://www.alexbailon.com/downloads/archivos.zip
rey_maria
Creo que no están en concreto los que salían antes en los pantallazos. Míralo con calma y ya lo subirás, le espero poder un ojo durante el fin de semana.
Alex Bailon
está todo el código, lo que no he subido ha sido todas las carpetas de mi web donde están alojadas las imágenes y tal. solo el código y las imágenes del código específico. Aunque cambié los códigos por lo que me dijo Steven en uno de los primeros mensajes. eso está al final del CSS Style.css
Gracias :D
rey_maria
Lo siento Alex, yo con ese zip no me apaño para revisar. Si algún día lo subes, me avisas y a ver si le vemos el problema.
Alex Bailon
rey_maria
Hola María. :D esto es todo lo que tengo de mi web. lo acabo de subir al servidor.
http://www.alexbailon.com/downloads/web.zip
andrewman
Alex, deberías validar tanto el documento html, como las hojas de estilo y tratar de corregir, ha ser posible, todos los errores que te informa.
.bar .mosaic-overlay {
bottom:-100px;
height:45px;
error -> background:url(/images/Caption/bg-black.png;
opacity:0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
z-index:50;
}
No cerraste el paréntesis, por ende las reglas que declaraste bajo ello no se cargan.
Alex Bailon
andrewman
Buah tio!! te voy ha hacer una estatua!! MUCHISIMAS GRACIAS! fué ponerle el parentesis y funcionar perfectamente todo en firefox :D
Que alegre estoy tio! me acabas de alegrar todo el finde semana!!
repito. muchas gracias!!!!
JCMartinez
Te la has ganado:
Alex Bailon
JCMartinez
Ya ves que si me la he ganado! jajajaja