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

[calbart]

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> 

[sanxuan]

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.

[sanxuan]

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%.

[calbart]

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

[calbart]

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

[calbart]

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..

[sanxuan]

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.

[calbart]

gracias lo que necesites dimelo, un saludo

[calbart]

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/

[sanxuan]

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.

[calbart]

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> 

[jomaruro]

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.

[sanxuan]

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>