cambia tamaño y tipo de fuente según el navegador en pstopmenu

[Syd]

Hola

 

Tengo un problema con el tamaño y tipo de las fuentes en distintos navegadores. En este caso, al instalar el pstopmenu y probarlo en distintos navegadores, hay diferencias bastante grandes, hasta el punto de que un campo se puede colocar debajo por llegar al límite del width, con lo que se me queda totalmente descuadrado. Alguna ayuda?

 

Saludos

[Syd]

Alguna ayuda?

[nadie]

Hola

 

Tengo un problema con el tamaño y tipo de las fuentes en distintos navegadores. En este caso, al instalar el pstopmenu y probarlo en distintos navegadores, hay diferencias bastante grandes, hasta el punto de que un campo se puede colocar debajo por llegar al límite del width, con lo que se me queda totalmente descuadrado. Alguna ayuda?

 

Saludos

Coméntanos con que navegadores te pasa, y pon un ejemplo de tales navegadores, para que la comunidad pueda ayudarte de la mejor manera.

[Syd]

Una imagen vale más que mil palabras no?, jeje

El tamaño horizontal del menu cambia. Opera y Chrome son casi iguales, o iguales

[Syd]

Lo que sí creo que empiezo a ver nítidamente es que la distancia entre cada carácter es mayor en explorer que en chrome, por ejemplo. Lo de que cambie el tipo de letra ya no lo tengo tan claro, diría que no. A ver si alguien me puede ayudar. Gracias

[Syd]

Por cierto, he intentado cambiar el tipo de letra (del menú, que da opción para ello), el tamaño, etc, pero la diferencia se mantiene

[Syd]

Alguna ayuda?

[YMOON]

Hola, yo tengo el mismo problema, en IE cambia el tipo fuente de la tienda! no entiendo porque!

Alguien sabe como solucionarlo?

 

Gracias!!

[Syd]

Hola, pues yo no he conseguido solucionarlo, ahí lo ando, y te recomiendo que mires también los demás navegadores, chrome, opera, firefox...

[Syd]

Hay alguien que pueda ayudar para este problema? también me trae de cabeza...

[Syd]

Alguna pista?

[Syd]

Gracias, Nadie, me has hecho pensar. Entré en el css del módulo y encontré esto. Intenté eliminando una de las dos, pero quedó igual.

 

/* Fonts */

#topmenustyle ul.topmenustyle li a span

{ 

  font-family: Arial;

  font-size: 13px;

  font-weight: 600;

}

 

#topmenustyle ul.topmenustyle li div ul li a span

{ color:#5E5E5E;

  font-family: Trebuchet MS;

  font-size: 12px;

  font-weight: 400;

}

 

 

 

Bueno, pego el menu.css entero:

 

#topmenustyle * {

  margin: 0px;

  padding: 0px;

  list-style-type: none;

  text-decoration: none;

  z-index:2007;

}

div#topmenustyle {

position:relative;

/*Position of the menu according to the homepage*/

  padding-bottom:4px;

}

#topmenustyle ul.topmenustyle {

  white-space: nowrap;

}

 

/* Geometrical arrangement */

#topmenustyle ul.topmenustyle li {

  display: inline-block;

  height: 46px;

  position: relative;

}

 

#topmenustyle ul.topmenustyle li div {

  position: absolute;

  top: 46px;

  left: 0px;

}

 

#topmenustyle ul.topmenustyle li div div {

  position: absolute;

  top: -6px;

  left: 188px;

}

 

/* Escaping style for lower levels */

#topmenustyle ul.topmenustyle li div ul li {

  display: block;

  float: none;

  width: auto;

  height: auto;

}

 

/** Graphics **/

 

/* Horizontal sliding doors */

#topmenustyle ul.topmenustyle li a {

  padding-left: 13px;

  background-image: url("images/item1.png");

  background-repeat: no-repeat;

  background-position: left -1000px;

  display: inline-block;

  margin: 10px 2px;

}

 

#topmenustyle ul.topmenustyle li a span {

  padding-right: 14px;

  padding-left: 0px;

  background-image: url("images/item1.png");

  background-repeat: no-repeat;

  background-position: right -1000px;

  display: inline-block;

  height: 27px;

  line-height: 27px;

  cursor: pointer;

}

 

#topmenustyle ul.topmenustyle li:hover a {

  background-position: left -54px;

}

 

#topmenustyle ul.topmenustyle li:hover a span {

  background-position: right -81px;

}

 

#topmenustyle ul.topmenustyle li.current a {

 

  background-position: left 0px;

}

 

#topmenustyle ul.topmenustyle li.current a span {

color: #FFFFFF;

  background-position: right -27px;

}

 

/* Escape Horizontal doors */

#topmenustyle ul.topmenustyle li div ul li a {

  display: block;

  padding: 0px;

  margin: 0px;

  background: none;

}

 

#topmenustyle ul.topmenustyle li div ul li a span {

  display: block;

  padding: 0px;

  background: none;

  height: auto;

  width: 165px;

  line-height: 25px;

  padding: 7px 0 7px 9px;

  white-space: normal;  

}

 

/* Vertical sliding doors */

#topmenustyle ul.topmenustyle li div { 

  width: 200px;

  padding-top: 6px;

  background-image: url("images/submenu-top.png");

  background-repeat: no-repeat;

  background-position: 0px top;

}

 

#topmenustyle ul.topmenustyle li div ul { 

  padding: 6px 6px 9px 6px;

  padding-top: 0;

  background-image: url("images/submenu-bottom.png");

  background-repeat: no-repeat;

  background-position: 0px bottom;

}

 

/* Hover Effect on Submenus */

#topmenustyle ul.topmenustyle ul li:hover

{

 

}

#topmenustyle ul.topmenustyle li.current ul li a span {

color: #5E5E5E;

width: 165px;}

#topmenustyle ul.topmenustyle li.current ul li a span:hover {

color:#09C6F5;}

 

#topmenustyle ul.topmenustyle ul li a span:hover

{

color:#09C6F5; 

}

 

 

/* Main header line */

#topmenustyle {

  height: 46px;

  padding-left: 14px;

  background:transparent url(images/bg.png) repeat-x;

  clear: both;

  z-index:2007;

}

 

/* Text shadow */

#topmenustyle span

{

  color: #EB2E83;

}

 

#topmenustyle li:hover>a>span 

{

  color: #FFFFFF;

}

 

/* Fonts */

#topmenustyle ul.topmenustyle li a span

{ 

  font-family: Arial;

  font-size: 13px;

  font-weight: 600;

}

 

#topmenustyle ul.topmenustyle li div ul li a span

{ color:#5E5E5E;

  font-family: Trebuchet MS;

  font-size: 12px;

  font-weight: 400;

}

 

/* Lines between li */

#topmenustyle ul.topmenustyle li div ul

{

  padding-bottom: 8px;

}

 

#topmenustyle ul.topmenustyle li div ul li:first-child

{

  border-top-width: 0px;

}

 

 

/* Menu logic */

#topmenustyle li>div { visibility: hidden; }

#topmenustyle li:hover>div { visibility: visible; }

/* */

 

/* Hover Effect on Subtopmenustyles */

#topmenustyle ul.topmenustyle ul li:hover

{

  background-color: #fff;

}

 

/* Lines between li */

#topmenustyle ul.topmenustyle li div ul li

{

  background-image:url(images/hr.gif);

  background-repeat: repeat-x;

  background-position: left bottom;

}

#topmenustyle ul.topmenustyle ul a.parent {

  background: url(images/arrow.gif) no-repeat right center;

  margin-right: -1px;

}

 

 

/* ie7 */

#topmenustyle ul.topmenustyle li {

  *zoom: 1;

  *display: inline;

}

 

#topmenustyle ul.topmenustyle li a {

  *zoom: 1;

  *display: inline;

}

 

#topmenustyle ul.topmenustyle li a span {

  *zoom: 1;

  *display: inline;

}

 

/* IE6 */

#topmenustyle ul.topmenustyle li a {

  _background-image: url("images/item.gif");

}

 

#topmenustyle ul.topmenustyle li a span {

  _background-image: url("images/item.gif");

}

 

#topmenustyle ul.topmenustyle li div { 

  _background-image: url("images/submenu-top.gif");

}

 

#topmenustyle ul.topmenustyle li div ul { 

  _background-image: url("images/submenu-bottom.gif");

}

 

#topmenustyle ul.topmenustyle li a:hover {

  _background-position: left -54px;

}

 

#topmenustyle ul.topmenustyle li a:hover span {

  _background-position: right -81px;

  _color: #FFFFFF;

}

#topmenustyle ul.topmenustyle li li a:hover span {

  _color:#09C6F5; 

}

 

/* Menu logic for IE6 */

#topmenustyle div { _display: none; }

#topmenustyle div li:hover div { _visibility: visible;_display: block; }

#topmenustyle div li:hover li:hover div { _display: block; }

#topmenustyle div li:hover li:hover li:hover div { _display: block; }

/* */

 

#topmenustyle span.search { 

display:block; 

padding:10px 10px 10px 10px;

}

span.search input {

  -moz-border-radius: 10px  10px 10px 10px ;

  float:right;

  padding: 3px 0;

  padding-left: 10px;

  margin-top: 4px;

  background: #CCCCCC url(images/search.png) no-repeat left center;

  font-weight:bold;

  height:24px;

}

[Syd]

Alguien tiene alguna solución para esto?

[nexxuseis]

Proba poniendo em en vez de px a ver como te queda, la otra vez lei que los em se comportan mejor, por ej font-size: 1.1em; si te sale muy grande anda bajando a 1em, 0.9em, etc.

Edited October 12, 2012 by nexxuseis (see edit history)

[Syd]

Muchas gracias, así probé y quedó igual. Quizá debería pensar en otro menú, pero da rabia una vez pagado este

 

[nexxuseis]

Probaste en %?

 

http://www.librosweb...ulo1/texto.html

 

De todas formas si no hay solucion es porque tenes el menu completo a lo ancho, si tan solo te sobrara unos 50px no va haber problema, sino los productos menos importantes podes ponerlo en una categoria que diga "Otros Productos" y metes 2 o 3 subcategorias.

 

Quizas es el font-family, yo tengo un menu con font-family: Corbel y font.size: 13px, para probar como se comporta le puse 43px y el tamaño con firefox-ie son casi identitos en cuanto al width (solo unos 2px de diferencia)

Edited October 12, 2012 by nexxuseis (see edit history)

[Syd]

Gracias, de lo que me he dado cuenta es de que nada cambia ponga lo que ponga... o sea que aunque por ahí fuera la solución no puedo probarla. Y he probado cosas absurdas y todo, pero nada cambia. Estoy editando el css de la carpeta themes-custom del menu, que es el que elegí yo, personalizado. No se me ocurre mucho más...

[Syd]

Les