[Ovillo] problema con márgenes negativos en IE

2006-06-13 Por tema Núria Ramoneda
Estoy tratando de hacer una versión vertical de un menú horizontal que
aparece en listamatic [1].
El caso es que el menu en Firefox se ve perfectamente, pero en IE sólo se ve
la mitad, debido a que no muestra lo que hay más allà del margen negativo
que utilizo para crear la línia (borde) entre los elementos de la lista. He
estado mirando sobre el tema y probando pero no encuentro la solución y
quizás sea porqué no acabo de entender cómo manejar el problema (cierto) o
porque no hay solución.
Un ejemplo en: http://www.filsalvent.net/provamenuvertical.htm
En fin, si alguien tiene una idea o una referencia en dónde pueda encontrar
ideas... se agradece de antemano.

Núria

Aqui va la css:
*{margin:0;padding:0;}

#navcontenidor{
margin-left: 50px;
}

#navlist
{
width:60px;
margin-left: 60px;
padding:10px 0 10px 0;
border-left: 3px solid #00A0D8;
z-index: 1;
}
#navlist ul
{
margin-left:-60px;
position: relative;
z-index: 2;
}

#navlist li
{
list-style-type: none;
text-align: center;
margin-bottom:20px;
overflow: visible;}

#navlist li a
{
padding: 1px 7px;
color: #00A0D8;
background-color: #fff;
border: 2px solid #ccc;
text-decoration: none;
font-weight:bold;
display:block;

}

#navlist li a:hover
{
color: #000;
border: 2px solid #00A0D8;
border-top: 2px solid #00A0D8;
border-bottom: 2px solid #00A0D8;
}

I aquí el código xhtml:

div id=navcontenidor
div id=navlist
div class=sizer
ul id=nav
li id=activea href=# id=current22/a/li
lia href=#Item two/a/li
lia href=#Item three/a/li
lia href=#Item four/a/li
lia href=#Item five/a/li
li/li
/ul
/div
/div
/div

[1] http://css.maxdesign.com.au/listamatic/horizontal19.htm
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] problema con márgenes negativos en IE

2006-06-13 Por tema nicolas carrera
Hola Nuria mira a ver si añadiendo esto sale lo que tu quieres
   
  #navlist ul
{
margin-left:-60px!important;
margin-left:0px;
position: relative;
z-index: 2;
}


Núria Ramoneda [EMAIL PROTECTED] escribió:
  Estoy tratando de hacer una versión vertical de un menú horizontal que
aparece en listamatic [1].
El caso es que el menu en Firefox se ve perfectamente, pero en IE sólo se ve
la mitad, debido a que no muestra lo que hay más allà del margen negativo
que utilizo para crear la línia (borde) entre los elementos de la lista. He
estado mirando sobre el tema y probando pero no encuentro la solución y
quizás sea porqué no acabo de entender cómo manejar el problema (cierto) o
porque no hay solución.
Un ejemplo en: http://www.filsalvent.net/provamenuvertical.htm
En fin, si alguien tiene una idea o una referencia en dónde pueda encontrar
ideas... se agradece de antemano.

Núria

Aqui va la css:
*{margin:0;padding:0;}

#navcontenidor{
margin-left: 50px;
}

#navlist
{
width:60px;
margin-left: 60px;
padding:10px 0 10px 0;
border-left: 3px solid #00A0D8;
z-index: 1;
}
#navlist ul
{
margin-left:-60px;
position: relative;
z-index: 2;
}

#navlist li
{
list-style-type: none;
text-align: center;
margin-bottom:20px;
overflow: visible;}

#navlist li a
{
padding: 1px 7px;
color: #00A0D8;
background-color: #fff;
border: 2px solid #ccc;
text-decoration: none;
font-weight:bold;
display:block;

}

#navlist li a:hover
{
color: #000;
border: 2px solid #00A0D8;
border-top: 2px solid #00A0D8;
border-bottom: 2px solid #00A0D8;
}

I aquí el código xhtml:

  
  
  
  
  
   22
  
   Item two
  
   Item three
  
   Item four
  
   Item five
  
   









[1] http://css.maxdesign.com.au/listamatic/horizontal19.htm
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


 __
Correo Yahoo!
Espacio para todos tus mensajes, antivirus y antispam ¡gratis! 
Regístrate ya - http://correo.yahoo.es 
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] problema con márgenes negativos en IE

2006-06-13 Por tema Núria Ramoneda
Grácias Nicolás, lo acabo de probar y tampoco va (en IE, en Firefox sigue
viéndose correctamente)
Por cierto que ahora me doy cuenta que al pegar antes el código html sólo se
ha pegado el contenido.
Lo vuelvo a poner:
div id=navcontenidor
div id=navlist
div class=sizer
ul id=nav
li id=activea href=# id=current22/a/li
lia href=#Item two/a/li
lia href=#Item three/a/li
lia href=#Item four/a/li
lia href=#Item five/a/li
li/li
/ul
/div
/div
/div



Hola Nuria mira a ver si añadiendo esto sale lo que tu quieres

  #navlist ul
{
margin-left:-60px!important;
margin-left:0px;
position: relative;
z-index: 2;
}


Núria Ramoneda [EMAIL PROTECTED] escribió:
  Estoy tratando de hacer una versión vertical de un menú horizontal que
aparece en listamatic [1].
El caso es que el menu en Firefox se ve perfectamente, pero en IE sólo se ve
la mitad, debido a que no muestra lo que hay más allà del margen negativo
que utilizo para crear la línia (borde) entre los elementos de la lista. He
estado mirando sobre el tema y probando pero no encuentro la solución y
quizás sea porqué no acabo de entender cómo manejar el problema (cierto) o
porque no hay solución.
Un ejemplo en: http://www.filsalvent.net/provamenuvertical.htm
En fin, si alguien tiene una idea o una referencia en dónde pueda encontrar
ideas... se agradece de antemano.

Núria

Aqui va la css:
*{margin:0;padding:0;}

#navcontenidor{
margin-left: 50px;
}

#navlist
{
width:60px;
margin-left: 60px;
padding:10px 0 10px 0;
border-left: 3px solid #00A0D8;
z-index: 1;
}
#navlist ul
{
margin-left:-60px;
position: relative;
z-index: 2;
}

#navlist li
{
list-style-type: none;
text-align: center;
margin-bottom:20px;
overflow: visible;}

#navlist li a
{
padding: 1px 7px;
color: #00A0D8;
background-color: #fff;
border: 2px solid #ccc;
text-decoration: none;
font-weight:bold;
display:block;

}

#navlist li a:hover
{
color: #000;
border: 2px solid #00A0D8;
border-top: 2px solid #00A0D8;
border-bottom: 2px solid #00A0D8;
}

I aquí el código xhtml:






   22

   Item two

   Item three

   Item four

   Item five


[1] http://css.maxdesign.com.au/listamatic/horizontal19.htm
___


___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] problema con márgenes negativos en IE

2006-06-13 Por tema nicolas carrera
Pero ahora que es lo que te sucede con lo anterior lo que hacíamos era anular 
para el ie el valor negativo del margin.

Núria Ramoneda [EMAIL PROTECTED] escribió:  Grácias Nicolás, lo acabo de 
probar y tampoco va (en IE, en Firefox sigue
viéndose correctamente)
Por cierto que ahora me doy cuenta que al pegar antes el código html sólo se
ha pegado el contenido.
Lo vuelvo a poner:
  
  
  
  
  
   22
  
   Item two
  
   Item three
  
   Item four
  
   Item five
  
   











Hola Nuria mira a ver si añadiendo esto sale lo que tu quieres

#navlist ul
{
margin-left:-60px!important;
margin-left:0px;
position: relative;
z-index: 2;
}


Núria Ramoneda escribió:
Estoy tratando de hacer una versión vertical de un menú horizontal que
aparece en listamatic [1].
El caso es que el menu en Firefox se ve perfectamente, pero en IE sólo se ve
la mitad, debido a que no muestra lo que hay más allà del margen negativo
que utilizo para crear la línia (borde) entre los elementos de la lista. He
estado mirando sobre el tema y probando pero no encuentro la solución y
quizás sea porqué no acabo de entender cómo manejar el problema (cierto) o
porque no hay solución.
Un ejemplo en: http://www.filsalvent.net/provamenuvertical.htm
En fin, si alguien tiene una idea o una referencia en dónde pueda encontrar
ideas... se agradece de antemano.

Núria

Aqui va la css:
*{margin:0;padding:0;}

#navcontenidor{
margin-left: 50px;
}

#navlist
{
width:60px;
margin-left: 60px;
padding:10px 0 10px 0;
border-left: 3px solid #00A0D8;
z-index: 1;
}
#navlist ul
{
margin-left:-60px;
position: relative;
z-index: 2;
}

#navlist li
{
list-style-type: none;
text-align: center;
margin-bottom:20px;
overflow: visible;}

#navlist li a
{
padding: 1px 7px;
color: #00A0D8;
background-color: #fff;
border: 2px solid #ccc;
text-decoration: none;
font-weight:bold;
display:block;

}

#navlist li a:hover
{
color: #000;
border: 2px solid #00A0D8;
border-top: 2px solid #00A0D8;
border-bottom: 2px solid #00A0D8;
}

I aquí el código xhtml:






22

Item two

Item three

Item four

Item five


[1] http://css.maxdesign.com.au/listamatic/horizontal19.htm
___


___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


 __
Correo Yahoo!
Espacio para todos tus mensajes, antivirus y antispam ¡gratis! 
Regístrate ya - http://correo.yahoo.es 
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] problema con márgenes negativos en IE

2006-06-13 Por tema Núria Ramoneda
Verás, ahora se ve todo el texto del elemento (antes sólo la mitad) pero el
borde queda a la izquierda al ser margin=0 para IE.
He subido la modificación para que veas el efecto ahora:
http://www.filsalvent.net/provamenuvertical.htm
Puede que ésto que en FF o Opera se ve bien no se pueda conseguir con IE.
No?

N.

de nicolas carrera
Enviado el: martes, 13 de junio de 2006 16:08

Pero ahora que es lo que te sucede con lo anterior lo que hacíamos era
anular para el ie el valor negativo
del margin.


___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] problema con márgenes negativos en IE

2006-06-13 Por tema Manuel Razzari
Prueba tal vez con un float:

#navlist ul {
  margin-left: -60px;
  float: left;
  position: relative;
}

On 6/13/06, Núria Ramoneda [EMAIL PROTECTED] wrote:
 Verás, ahora se ve todo el texto del elemento (antes sólo la mitad) pero el
 borde queda a la izquierda al ser margin=0 para IE.
 He subido la modificación para que veas el efecto ahora:
 http://www.filsalvent.net/provamenuvertical.htm
 Puede que ésto que en FF o Opera se ve bien no se pueda conseguir con IE.
 No?

 N.

 de nicolas carrera
 Enviado el: martes, 13 de junio de 2006 16:08

 Pero ahora que es lo que te sucede con lo anterior lo que hacíamos era
 anular para el ie el valor negativo
 del margin.


 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
 http://ovillo.org/mailman/listinfo/ovillo



-- 
Manuel Razzari
YO   - http://ultimorender.com.ar/funkascript
CVAM - http://conVistaAlMar.com.ar
___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] problema con márgenes negativos en IE

2006-06-13 Por tema jaume op
En primer lugar dar gracias por lo mucho que he aprendido en esta lista.
Solo decir que creo que en principio para que una ul se coloque en
posicion igual en distintos navegadores a parte de los margin hay que tener
en cuenta los padding. Todo a cero en un principo y de ahi a hacer calculos
y hacks si fueran necesarios.
Gracias


2006/6/13, Manuel Razzari [EMAIL PROTECTED]:

 Prueba tal vez con un float:

 #navlist ul {
 margin-left: -60px;
 float: left;
 position: relative;
 }

 On 6/13/06, Núria Ramoneda [EMAIL PROTECTED] wrote:
  Verás, ahora se ve todo el texto del elemento (antes sólo la mitad) pero
 el
  borde queda a la izquierda al ser margin=0 para IE.
  He subido la modificación para que veas el efecto ahora:
  http://www.filsalvent.net/provamenuvertical.htm
  Puede que ésto que en FF o Opera se ve bien no se pueda conseguir con
 IE.
  No?
 
  N.
 
  de nicolas carrera
  Enviado el: martes, 13 de junio de 2006 16:08
 
  Pero ahora que es lo que te sucede con lo anterior lo que hacíamos era
  anular para el ie el valor negativo
  del margin.
 
 
  ___
  Lista de distribución Ovillo
  Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
  Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://ovillo.org/mailman/listinfo/ovillo
 


 --
 Manuel Razzari
 YO   - http://ultimorender.com.ar/funkascript
 CVAM - http://conVistaAlMar.com.ar
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://ovillo.org/mailman/listinfo/ovillo

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] problema con márgenes negativos en IE : solucionado

2006-06-13 Por tema Núria Ramoneda
Poniendolo en float tampoco va, incluso entonces en FF se pierde el borde.
Pero bueno, rascando aquí y allá y probando más he dado con la solución (la
habia, pués).
He tenido que añadirle al UL un width:100% (lo tenia antes en un div de
clase, pero no le gustaba)
También añadir el mismo ancho dado al contenedor (navlist en este caso y
100px) al li, para compensar el poner el a en display:block, lo que hace que
el ancho de los li quede a merced del texto introducido.
Por otro lado, para que la línea quede centrada respecto a los li, hay que
poner como margen izquierdo del navlist la mitad del width, y en el ul poner
esa misma mitad en negativo.
En fin, grácias a todos por la colaboración.
Ahí queda el menu, por si alguien le quiere echar un ojo:
http://www.filsalvent.net/provamenuvertical.htm

Núria



 de Manuel Razzari

Prueba tal vez con un float:

#navlist ul {
  margin-left: -60px;
  float: left;
  position: relative;
}


___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://ovillo.org/mailman/listinfo/ovillo