Foros del Web » Creando para Internet » CSS »

Error de posición de imagen en firefox y IE9 de imagen

Estas en el tema de Error de posición de imagen en firefox y IE9 de imagen en el foro de CSS en Foros del Web. Este código hace referencia a un menú para blogger mi problema esta en que no se ve igual en FIREFOX Y IE Quiero que se ...
  #1 (permalink)  
Antiguo 31/01/2011, 15:41
 
Fecha de Ingreso: agosto-2008
Mensajes: 117
Antigüedad: 9 años, 3 meses
Puntos: 0
Error de posición de imagen en firefox y IE9 de imagen

Este código hace referencia a un menú para blogger mi problema esta en que no se ve igual en FIREFOX Y IE

Quiero que se vea como esta ahora con firefox
http://portada-discosamsterdam.blogspot.com/

El código o parte que falla es:

.menu ul li ul span {
background: url('http://www.carlosbartual.com/disco/flecha.png');
margin: -20px -10px; --SI EN VEZ DE -10px Pongo 50px entonces IE BIEN---
width: 20px;
height: 10px;
position: absolute;
}

He probado a ponerlo: _margin: -20px 50px; debajo del actual pero no funciona.

como puedo hacer que la flecha este igual en ie y en firefox

Gracias

Código HTML:
<style>

#contenido {
	position:absolute;
	top:-1px;
	left:251px;
	margin-left: -225px;
	width: 720px;
	margin: 0 auto;
	padding: 20px 0;
	min-height: 100%;
	height: -21px !important;
}

.menu li {
list-style-type: none;
float: left;
font-size: 15px;
font-weight: bold;
line-height: 70px;
padding-right: 20px;
}

.menu {
width: 100%;
height: 70px;
}

.menu li a {
text-decoration: none;
color: #fff;
display: block  !importnat;
position: relative;
width: 150px !importnat;
}

.menu li a:hover {
color: #fff;
}

.menu ul li ul span {
background: url('http://www.carlosbartual.com/disco/flecha.png');
margin: -20px -10px;
width: 20px;
height: 10px;
position: absolute;
}

.menu ul li ul {
display: none; 
background: url('http://www.carlosbartual.com/disco/bg.png');
padding: 10px 0;
position: absolute;
margin: -12px -20px;
.margin: 69px -170px;
_margin: 69px -170px;
}

.menu ul li:hover ul {
display: block;
}

.menu ul li ul li {
display: block;
float: none;
position: relative;
color: #fff;
padding: 0 20px;
line-height: 30px;
}

.menu ul li ul li a{
color: #fff;
}

.menu ul li ul li a:hover {
color: #fff;
}

.menu li a:hover {
color: #fff;
}li a:hover {
color: #fff;
} {
color: #fff;
}lor: #fff;
}

</style>

<div id="contenido">
  <div class="menu">
	<ul>
	  <li><a href="#">Inicio</a></li>
		<li><a href="#">Tienda</a></li>
		<li><a href="#">Novedades</a>
        <ul><span></span>
			<li><a href="#">Recomendado</a></li>
			<li><a href="#">lista</a></li>
		</ul>
		</li>
        <li><a href="#">Contacto</a></li>
        <li><a href="#">Chat</a></li>
        <li><a href="#">videos</a></li>
		<li><a href="#">Enlaces</a>
		<ul><span></span>
			<li><a href="#">Podomatic</a></li>
			<li><a href="#">Myspace</a></li>
            <li><a href="#">facebook</a></li>
            <li><a href="#">Flickr</a></li>
            <li><a href="#">Mixpod</a></li>
		</ul>
		</li>
	  <li><a href="#">blog</a></li>
      <li><a href="#">Conciertos</a></li>
	</ul>
</div></div> 
  #2 (permalink)  
Antiguo 31/01/2011, 15:56
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

Comprueba esto. Hay un error importnante. Seguro que usas un blackberry y no te entran los dedos.
menu li a {
text-decoration: none;
color: #fff;
display: block !importnat;
position: relative;
width: 150px !importnat;}

Voy a comprobar el resto.
  #3 (permalink)  
Antiguo 31/01/2011, 16:18
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

Me gusta más cómo queda con margin: -20px 30% o margin:-20px 30px.
Así lo veo bien tanto en IE como en Firefox.

Por cierto, tienes una manera original de posicionar elementos. Si redimensiono la ventana el logotipo se solapa con el menú. Creo que se podría mejorar.
Yo no suelo mezclar la posición absoluta con márgenes, me ahorra problemas, y los divs y otros elementos de bloque los centro con margin: 0 auto en lugar de con left: 50%.
  #4 (permalink)  
Antiguo 31/01/2011, 17:02
 
Fecha de Ingreso: agosto-2008
Mensajes: 117
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

voy a probar tus consejos, por lo que corresponde a mi forma de programar seguro que es un desastre, ya que hasta hace no mucho me dedicaba de una forma pro a diseñar espacios de myspace para músicos, los códigos en myspace eran una locura, me tire 4 meses rompiéndome los cuernos para entender como funcionaban dentro de la plataforma, ya que existían muchísimas limitaciones, esto ha hecho que coja malos vicios y ahora voy algo de culo, con la codificación. De hecho este diseño lo cree para myspace, pero al final myspace a cambiado toda la plataforma y todos los diseños que hice se fuero al cielo...

mira en este blog aun conservo el menú original que solo podía utilizar en myspace, este lo estoy integrado ahora ya que blogger permite más cosas.

http://noticiasfranciscoroman.blogspot.com/

disculpa si soy algo destronado con los códigos, es lo que tiene...

si pongo:

!important;

el menú se ve así:


Y si cambio a 30px la flecha sigue viendose mal

Última edición por calbart; 31/01/2011 a las 17:17
  #5 (permalink)  
Antiguo 31/01/2011, 19:35
 
Fecha de Ingreso: agosto-2008
Mensajes: 117
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

Hola es cierto he probado lo de las pantallas a más resolución y se me queda a la izq, como puedo solucionarlo, ayudar
  #6 (permalink)  
Antiguo 31/01/2011, 19:46
 
Fecha de Ingreso: agosto-2008
Mensajes: 117
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

Hola sanxuan si sirve de algo me he bajado el paquete de esta web

http://www.tinnta.com/sencillo-menu-...-solo-con-css/


y he intentado que dentro de un witget htmlscript de blogger, meter el css y los div para que no busque archivos en directorios ya que en blogger no puede ser.

La verdad casi lo he logrado, pero el problema del adaptación según resolución no se como solucionarlo, a la vez que la flecha.

Necesito que sea trasparente y que los submenus sea el fondo en png tipo transparencia la flechita también la he re diseñado yo para el diseño que tengo

Haber si me echas un cable porque llevo tres dias con el menu y no me aclaro

si quieres te mando las partes a un mail y lo ves en un blogger directamente..
  #7 (permalink)  
Antiguo 31/01/2011, 19:59
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

Creo que con la dirección de tu blog será suficiente. No es muy complicado probar a hacerlo de otra manera.
De todos modos es dentro del blog donde podré comprobar tu código. Si tiene unas medidas fijas, quizas no se vea mal. Ya te comento cuando eche un vistazo.
  #8 (permalink)  
Antiguo 31/01/2011, 20:06
 
Fecha de Ingreso: agosto-2008
Mensajes: 117
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

gracias lo que necesites dimelo, un saludo
  #9 (permalink)  
Antiguo 02/02/2011, 12:53
 
Fecha de Ingreso: agosto-2008
Mensajes: 117
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

Hola he creado otro pos y en el he colocado todos los códigos y como van, espero que te puedan servir:

http://www.forosdelweb.com/f54/ayuda...logger-882271/
  #10 (permalink)  
Antiguo 02/02/2011, 20:20
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

Puedes añadir este CSS al final del que tienes o incluir sólo las propiedades dentro de las ya existentes, sustituyendo las que tengan el mismo nombre. Con eso yo veo bien el menú y se centra correctamente.

#header-wrapper{
margin:0 auto;
}
#contenido{
left:50%
}
.menu{
margin-left:-270px;
}
Espero que te sirva. Saludos.
  #11 (permalink)  
Antiguo 03/02/2011, 03:52
 
Fecha de Ingreso: agosto-2008
Mensajes: 117
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

Puedes ponerme en el código que te mando los cambios que me indicas, porque lo he probado y creo que lo hago mal, no lo tengo muy claro.

En el post de arriba esta la otra dirección con los códigos, si puedes y no es mucha molestia, copialos como los tengo yo y así veras exacto como reacciona.

No soy muy bueno con el tema de css

Código HTML:
<style>

#contenido {
	position:absolute;
	top:15px;
	left:231px;
	margin-left: -225px;
	width: 750px;
	margin: 0 auto;
	padding: 20px 0;
	min-height: 100%;
	height: -21px !important;
}

.menu li {
list-style-type: none;
float: left;
font-size: 15px;
font-weight: bold;
line-height: 70px;
padding-right: 20px;
}

.menu {
width: 100%;
height: 70px;
}

.menu li a {
text-decoration: none;
color: #fff;
display: block !importnat;
position: relative;
width: 150px !importnat;
}

.menu li a:hover {
color: #fff;
}

.menu ul li ul span {
background: url('http://www.carlosbartual.com/disco/flecha.png');
margin: -20px -10px;
width: 20px;
height: 10px;
position: absolute;
}

.menu ul li ul {
display: none; 
background: url('http://www.carlosbartual.com/disco/bg.png');
padding: 10px 0;
position: absolute;
margin: -12px -20px;
.margin: 69px -170px;
_margin: 69px -170px;
}

.menu ul li:hover ul {
display: block;
}

.menu ul li ul li {
display: block;
float: none;
position: relative;
color: #fff;
padding: 0 20px;
line-height: 30px;
}

.menu ul li ul li a{
color: #fff;
}

.menu ul li ul li a:hover {
color: #fff;
}

.menu li a:hover {
color: #fff;
}li a:hover {
color: #fff;
} {
color: #fff;
}lor: #fff;
}

</style>

<div id="contenido">
  <div class="menu">
	<ul>
	  <li><a href="#">Inicio</a></li>
		<li><a href="#">Tienda</a></li>
		<li><a href="#">Novedades</a>
        <ul><span></span>
			<li><a href="#">Recomendado</a></li>
			<li><a href="#">lista</a></li>
		</ul>
		</li>
        <li><a href="#">Contacto</a></li>
        <li><a href="#">Consultas</a></li>
        <li><a href="#">videos</a></li>
		<li><a href="#">Enlaces</a>
		<ul><span></span>
			<li><a href="#">Podomatic</a></li>
			<li><a href="#">Myspace</a></li>
            <li><a href="#">facebook</a></li>
            <li><a href="#">Flickr</a></li>
            <li><a href="#">Mixpod</a></li>
		</ul>
		</li>
	  <li><a href="#">blog</a></li>
      <li><a href="#">Conciertos</a></li>
	</ul>
</div></div> 
  #12 (permalink)  
Antiguo 03/02/2011, 06:12
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

Hola:

Busca información sobre comentarios condicionales en IE y útilizalo para cambiar en IE lo que no te funciona ahora dejando tu CSS tal y como lo tienes para el resto de navegadores.

Saludos.

  #13 (permalink)  
Antiguo 03/02/2011, 12:28
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Error de posición de imagen en firefox y IE9 de imagen

Estoy usando esta página para ver los cambios.
http://portada-discosamsterdam.blogspot.com/
Te pongo en rojo lo que he modificado y en verde lo que debes borrar.

<style>

#contenido {
position:absolute;
top:15px;
left:50%;
margin-left: -270px;
width: 750px;
/*margin: 0 auto; Borra esta línea*/
padding: 20px 0;
min-height: 100%;
height: -21px !important;
}

.menu li {
list-style-type: none;
float: left;
font-size: 15px;
font-weight: bold;
line-height: 70px;
padding-right: 20px;
}

.menu {
width: 100%;
height: 70px;
margin-left:-270px;
}

.menu li a {
text-decoration: none;
color: #fff;
display: block !importnat;
position: relative;
width: 150px !importnat;
margin:-20px 30px}

.menu li a:hover {
color: #fff;
}

.menu ul li ul span {
background: url('http://www.carlosbartual.com/disco/flecha.png');
margin: -20px -10px;
width: 20px;
height: 10px;
position: absolute;
}

.menu ul li ul {
display: none;
background: url('http://www.carlosbartual.com/disco/bg.png');
padding: 10px 0;
position: absolute;
margin: -12px -20px;
.margin: 69px -170px;
_margin: 69px -170px;
}

.menu ul li:hover ul {
display: block;
}

.menu ul li ul li {
display: block;
float: none;
position: relative;
color: #fff;
padding: 0 20px;
line-height: 30px;
}

.menu ul li ul li a{
color: #fff;
}

.menu ul li ul li a:hover {
color: #fff;
}

.menu li a:hover {
color: #fff;
}li a:hover {
color: #fff;
} {
color: #fff;
}lor: #fff;
}

</style>

Última edición por sanxuan; 03/02/2011 a las 12:40

Etiquetas: firefox
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:48.