Foros del Web » Creando para Internet » CSS »

firefox muestra mi letra muy fina

 Estas en el tema de firefox muestra mi letra muy fina en el foro de CSS en Foros del Web. Compara lo fino de la fuente de arriba con la de abajo. OJO: NINGUNA ESTA USANDO BOLD, es solo que se aplica cuando uso display:block ...
  #1 (permalink)  
Antiguo 16/10/2011, 01:34
 
Fecha de Ingreso: julio-2010
Mensajes: 90
Antigüedad: 13 años, 9 meses
Puntos: 0
Pregunta firefox muestra mi letra muy fina
Compara lo fino de la fuente de arriba con la de abajo.

OJO: NINGUNA ESTA USANDO BOLD, es solo que se aplica cuando uso display:block pero no puedo aplicarla por que es un menu desplegable no entiendo por que se ve tan finita en firefox, en iexplorer, opera, chrome se ve gruesa como deberia.

codigo css:





Código CSS: 
Ver original
  1. body{
  2.   margin:0;
  3.   padding:<length> 0 0 0;
  4.   background:#F0F0F0;
  5.  }
  6.  
  7.  @media screen{
  8.   body>div#top-bar-bg{
  9.    position: fixed;
  10.   }
  11.  }
  12.  * html body{
  13.   overflow:hidden;
  14.  } 
  15.  * html div#contentfoot{
  16.   height:100%;
  17.   overflow:auto;
  18.   }
  19. #top-bar-bg{
  20.         position: absolute;
  21.         display:inline-block;
  22.         margin-top: 0px;
  23.         margin-left: 0px;
  24.         margin-right: 0px;
  25.         background-color:#96CE42;
  26.         height: 40px;
  27.         width: 100%;
  28.         box-shadow: 2px 2px 5px #999;
  29.         z-index:50;
  30.         
  31.             
  32. }
  33.  
  34.  
  35.  
  36. #top-bar-menu{
  37.         position: relative;
  38.         margin: 0 auto 0 auto;
  39.         width: 1000px;
  40.         height: 40px;   
  41.             
  42. }
  43.  
  44.  
  45. #down-arrow{
  46.         position: relative;
  47.         float:right;
  48.         margin-top: 8px;
  49.         margin-right:-10px;
  50.         width:7px;
  51.         height:4px;
  52.         background-image:url(../../images/top-bar/down-arrow.gif);
  53.         
  54.         
  55.  
  56. }
  57.  
  58. #menu-wrapper ul{
  59.         padding:0;
  60.         list-style:none;    
  61.         margin-top:0px;
  62.         float:right;
  63.         overflow:auto;
  64.         margin-right:10px;
  65.         
  66.         
  67.         
  68. }
  69.  
  70. #hmenu > li{
  71.         display:inline-block;
  72.         font-family:Myriad pro,Verdana, Geneva, sans-serif;
  73.         text-align:center;
  74.         height:40px;    
  75.         padding-left:5px;
  76.         padding-right:5px;
  77.         cursor:pointer;
  78.         
  79.         
  80.         
  81.         
  82.         
  83.         
  84.  
  85. }
  86.  
  87. #hmenu > li:hover{
  88.         background-color:#AAEA71;   
  89.     }
  90.     
  91. #hmenu > li:active{
  92.         background-color:#AAEA71;   
  93.     
  94.     }
  95.     
  96.     #hmenu > li:focus{
  97.         background-color:#AAEA71;   
  98.     
  99.     }
  100.  
  101.  
  102. #hmenu > li > a{
  103.         display:block;  
  104.         padding: 10px 5px;
  105.         padding-left:5px;
  106.         padding-right:5px;
  107.         width: auto;
  108.         text-decoration:none;
  109.         color:#FFF;
  110.         font-size:15px;
  111.  
  112.         
  113. }
  114.  
  115. li ul{
  116.         position:absolute;
  117.         display:none;   
  118.         
  119.         
  120.             
  121. }
  122.  
  123. .sub-menu a{
  124.         display:block;
  125.         visibility:visible;
  126.         padding:9px 5px;
  127.         width:130px;
  128.         color:#FFF;
  129.         text-decoration:none;
  130.         text-align:left;
  131.         padding-left:10px;
  132.         font-size:15px;
  133.         margin-right:0px;   
  134.             
  135. }
  136.  
  137. .sub-menu{
  138.  
  139.         margin-left:-5px;
  140.         -moz-border-radius-bottomright: 10px;
  141.         -moz-border-radius-bottomleft: 10px; /* Firefox*/
  142.         -webkit-border-bottom-right-radius: 10px;
  143.         -webkit-border-bottom-left-radius: 10px;
  144.         border-bottom-right-radius: 10px;
  145.         border-bottom-left-radius: 10px;    
  146.         z-index:100;    
  147.             
  148. }
  149. .sub-menu a:hover{
  150.     
  151.         background-color:#96CE42;       
  152.         border-bottom-right-radius: 10px;
  153.         border-bottom-left-radius: 10px;
  154.         z-index:100;
  155. }
  156.  
  157.  
  158.  
  159.  
  160. #menu-wrapper li ul{
  161.         background-color:#AAEA71;
  162.         
  163.                         
  164. }
  165.  
  166. #menu-wrapper ul li:focus ul, #menu-wrapper ul li:active ul  {
  167.         background-color:#AAEA71;
  168.         display: block;
  169.                         
  170. }
  171.  
  172.  
  173.  
  174.  
  175.  
  176.  
  177.  
  178.  
  179.  
  180.  
  181.  
  182.  
  183. #menu-wrapper-log ul{
  184.         position:static;
  185.         padding:0;
  186.         list-style:none;    
  187.         margin-top:0px;
  188.         float:left;
  189.         overflow:auto;
  190.         z-index:100;
  191.         
  192.         
  193.         
  194. }
  195.  
  196.  
  197. #hmenu-log > li{
  198.         display:inline-block;
  199.         font-family:Myriad pro,Verdana, Geneva, sans-serif;
  200.         text-align:center;
  201.         height:40px;    
  202.         padding-left:5px;
  203.         padding-right:12px;
  204.         cursor:pointer;
  205.         width:158px;
  206.         background-image:url(../../images/top-bar/log-top-bar.png);
  207.         background-repeat:no-repeat;
  208.         margin-left:10px;
  209.         position:fixed;
  210.         z-index:100;
  211.         
  212.         
  213.         
  214.         
  215.  
  216.  
  217. }
  218.  
  219. #hmenu-log > li:hover{
  220.         background-color:#AAEA71;   
  221.         
  222.     }
  223.     
  224. #hmenu-log > li:active{
  225.         background-color:#AAEA71;   
  226.     
  227.     }
  228.     #down-arrow-log{
  229.         position: relative;
  230.         float:right;
  231.         margin-top: 2px;
  232.         margin-right:-15px;
  233.         width:13px;
  234.         height:13px;
  235.         background-image:url(../../images/top-bar/down-arrow-log.gif);
  236.         
  237.         
  238. }
  239.     #hmenu-log > li:focus{
  240.         background-color:#AAEA71;   
  241.     
  242.     }
  243.  
  244.  
  245. #hmenu-log > li > a{
  246.         display:block;  
  247.         padding: 10px 5px;
  248.         padding-left:5px;
  249.         padding-right:5px;
  250.         width: auto;
  251.         text-decoration:none;
  252.         color:#FFF;
  253.         font-size:15px;
  254.         
  255.         
  256. }
  257.  
  258. .sub-menu-log a{
  259.         display:block;
  260.         visibility:visible;
  261.         padding:9px 5px;
  262.         width:160px;
  263.         color:#FFF;
  264.         text-decoration:none;
  265.         text-align:left;
  266.         padding-left:10px;
  267.         font-size:15px;
  268.         margin-right:0px;   
  269.             
  270.         
  271. }
  272.  
  273. .sub-menu-log{
  274.         margin-left:-5px;
  275.         -moz-border-radius-bottomright: 10px;
  276.         -moz-border-radius-bottomleft: 10px; /* Firefox*/
  277.         -webkit-border-bottom-right-radius: 10px; /* chrome y safari*/
  278.         -webkit-border-bottom-left-radius: 10px;  /* chrome y safari*/
  279.         border-bottom-right-radius: 10px;
  280.         border-bottom-left-radius: 10px;
  281.         z-index:100;
  282.         
  283.         
  284.  
  285.         
  286.  
  287.             
  288. }
  289. .sub-menu-log a:hover{
  290.     background-color:#96CE42;
  291.     -webkit-border-radius-bottom-left: 10px;    
  292.     border-bottom-right-radius: 10px;
  293.     border-bottom-left-radius: 10px;
  294.     z-index:100;
  295.     
  296.     
  297. }
  298.  
  299.  
  300.  
  301.  
  302. #menu-wrapper-log li ul{
  303.         background-color:#AAEA71;
  304.         
  305. }
  306.  
  307. #menu-wrapper-log ul li:focus ul, #menu-wrapper-log ul li:hover ul  {
  308.         background-color:#AAEA71;
  309.         display: block;
  310.         
  311.         
  312.         
  313.                         
  314. }
  #2 (permalink)  
Antiguo 16/10/2011, 11:01
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 16 años, 1 mes
Puntos: 21
Respuesta: firefox muestra mi letra muy fina
font-weight= bold;

Igualmente mira que un estilo no se superponga con otro. Siempre va a prevalecer el de mayor importancia.

Saludos.
__________________
_
  #3 (permalink)  
Antiguo 16/10/2011, 11:45
 
Fecha de Ingreso: julio-2010
Mensajes: 90
Antigüedad: 13 años, 9 meses
Puntos: 0
Respuesta: firefox muestra mi letra muy fina
opzina Gracias tu ayuda pero ese no es el problema, yo se que se puede usar el font-weight:bold pero no lo quiero usar por que no la quiero negrita. el problema es que en firefox se ve mas fina de lo normal, SOLO EN FIREFOX ahora el por que no lo se!

abajo se ve como se deberia ver y si te fijas en la imagen de superior es mas fina de lo normal!
  #4 (permalink)  
Antiguo 16/10/2011, 13:31
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
  
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años, 1 mes
Puntos: 1329
Respuesta: firefox muestra mi letra muy fina
Ya se ha comentado en anteriores veces este problema. Pero desgraciadamente no hay mucho que hacer. Se trata del renderizado de fuentes que hace el mismo motor del navegador y el Sistema Operativo también influye.

Mírate estos links:

http://uninstallme.com/suavizado-de-...rnet-explorer/
http://www.circulodemaquetadores.com...aliasing-font/
http://www.useragentman.com/blog/200...ng-javascript/
http://www.w3.org/TR/WD-font/#font-smooth-prop

Hay también otras maneras, como Cufon o Texto en flash. Esas son más efectivas.

Saludos
__________________
Grupo Telegram Docker en Español

Etiquetas: chrome, firefox, html, letra, muestra, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 15:52.