Soñando por los dias, pensando con los pies... y sigo escribiendo con la fe.
« Notepad2
Código resaltado »

Menu circular en CSS

Jueves 22 de Marzo del 2007 Compártelo

Páginas: 1 2 3

Creando el CSS

Empezaremos dando estilo al contenedor y al div que creamos para arreglar el bug en IE5.5. El bug de IE5.5 que tratamos de arreglar es un problema con la forma en que representa las cajas. La cosa es así: si una caja tiene 200px de alto pero el contenido dentro de la misma es más alto que esto, IE5.5 se estira hasta cubrir todo el contenido en lugar de quedarse con su altura y seguir la propiedad de overflow respectiva (que puede ser mostrar scrollbars, esconder o mostrar el contenido). Esto rompía el fondo del menu y se veía todo chueco. También arregla algunos errores con la propiedad CSS 'z-index', pues IE requiere que esta propiedad sea aplicada al contenedor y no a los elementos contenidos. Con todo esto en mente, el CSS queda así:

TEXTO PLANO
CSS:
  1. /* contenedor */
  2. div#menwrap {
  3.     width: 220px;
  4.     height: 220px;
  5.     margin: 5em auto;
  6.     padding: 0;
  7.     background: #fff url('background.jpg') no-repeat center 0;
  8. }
  9.  
  10. div#ie_height_fix {
  11.     width: 1px;
  12.     height: 220px;
  13.     margin: 0;
  14.     padding: 0;
  15. }

Seguiremos con nuestra lista. Le daremos un espacio de 50px de los elemento alrededor para darle espacio y que se vea bien; un ancho y alto de 220px; le quitaremos el padding y las bullets que por default tiene y por último lo posicionaremos relativamente para poder posicionar absolutamente los elementos contenidos dentro de ella.

TEXTO PLANO
CSS:
  1. ul#menu {
  2.     margin: 50px auto;
  3.     height: 220px;
  4.     padding: 0;
  5.     width: 220px;
  6.     height: 220px;
  7.     list-style: none;
  8.     list-style-type: none;
  9.     position: relative;
  10. }

Seguimos con el elemento <li>. Este elemento será de 45px de alto y ancho; que es el alto y ancho de las imagenes de fondo; le quitaremos margin y padding y lo mostraremos como bloque. De nuevo, quitaremos las bullets que por default trae (algunos navegadores lo aplican a <li> otros a <ul>) y cambiaremos el tamaño de la fuente. El paso más importante es posicionar absolutamente estos elementos. Al posicionarlos absolutamente, se amontonarán en la esquina superior izquierda de nuestro menu lo cual es bueno, pues tendremos más control al posicionar nuestros items al rededor de nuestro círculo. Tambien agregamos la propiedad z-index: 2;. Esta propiedad se encarga de acomodar los elementos en cascada, por así decirlo. El número 1 se mostrará primero, el número 2 detrás de el, el 3 detrás del 2 y así sucesivamente. Es poner elementos uno encima de otro. Cabe recordar que esta propiedad solo funciona con elementos que han sido posicionados, por ejemplo, con position: absolute; (como en nuestro caso).

TEXTO PLANO
CSS:
  1. ul#menu li {
  2.     width: 45px;
  3.     height: 45px;
  4.     margin: 0;
  5.     padding: 0;
  6.     display: block;
  7.     list-style: none;
  8.     list-style-type: none;
  9.     position: absolute;
  10.     z-index: 2;
  11.     font-size: 8pt;
  12.     font-family: verdana, arial, tahoma, serif;
  13. }

Con todo este embrollo de CSS, tenemos algo como esto:

CSS Menu Paso 1

Como pueden ver, todo está amontonado. Eso es bueno. tambien pueden ver el header de nuestro menu encimado. Vamos a darle algo de estilo. Primero que nada, posicionaremos absolutamente la tag <h2>; le daremos un ancho de 150px y un alto de 35px. Con esto tenemos una pequeña cajita hasta arriba a la derecha; para centrarla le daremos algo de margin hacía arriba y abajo. Como queremos tener una imagen de fondo para esta tag, un padding centrara el texto y la imagen de la sección; alinearemos el texto a la izquierda e identaremos el texto unos 45px (que es más o menos el ancho de la imagen). Por último, le daremos un z-index de 0:

TEXTO PLANO
CSS:
  1. div#menwrap h2 {
  2.     position: absolute;
  3.     width: 150px;
  4.     height: 35px;
  5.     margin: 60px 0 0 45px;
  6.     padding: 10px 0 0 0;
  7.     text-align: left;
  8.     font-size: 1.5em;
  9.     z-index: 0;
  10.     text-indent: 45px;
  11. }

Ahora le daremos estilo al span que está dentro de nuestro header. Este span lo mostraremos como bloque de 90px de ancho y le daremos 5px de margin hacia arriba y 25px hacia la izquierda. Esto para colocarlo en su lugar (abajo del título de la sección, centrado en el círculo). Le daremos además un padding de 10px para poder darle un borde hacía arriba de 2px de ancho y de este modo "subrayar" el título de la página. Bajaremos un poco el tamaño de la fuente, eliminaremos el identado que dimos anteriormente a la tag <h2> y cambiaremos el color de la misma. Por último, alinearemos el texto al centro:

TEXTO PLANO
CSS:
  1. div#menwrap h2 span {
  2.     display: block;
  3.     text-indent: 0;
  4.     font-size: .8em;
  5.     width: 90px;
  6.     border-top: 2px solid #abe9ab;
  7.     margin: 5px 0 0 25px;
  8.     padding: 5px 0 0 0;
  9.     color: #666;
  10.     text-align: center;
  11. }

Ya hemos estilizado nuestro header, pero falta una cosa: la imagen. La imagen la colocaremos identificando la clase del <h2>. En el ejemplo tenemos class="mail", pero cada sección tiene una clase que se llama del mismo modo que el id del anchor de la sección. Por lo tanto, aplicaremos la imagen a todas las clases de cada sección. La imagen será posicionada a la izquierda y a -45px de arriba para ocultar la parte de la imagen que tiene el círculo verde a su alrededor:

TEXTO PLANO
CSS:
  1. /* Headers */
  2.  
  3. div#menwrap h2.home {
  4.     background: url('home.gif') no-repeat left -45px;
  5. }
  6.  
  7. div#menwrap h2.tutos {
  8.     background: url('tutos.gif') no-repeat left -45px;
  9. }
  10.  
  11. div#menwrap h2.files {
  12.     background: url('files.gif') no-repeat left -45px;
  13. }
  14.  
  15. div#menwrap h2.search {
  16.     background: url('search.gif') no-repeat left -45px;
  17. }
  18.  
  19. div#menwrap h2.mail {
  20.     background: url('mail.gif') no-repeat left -45px;
  21. }
  22.  
  23. div#menwrap h2.id {
  24.     background: url('id.gif') no-repeat left -45px;
  25. }
  26.  
  27. div#menwrap h2.write {
  28.     background: url('write.gif') no-repeat left -45px;
  29. }
  30.  
  31. div#menwrap h2.logout {
  32.     background: url('logout.gif') no-repeat left -45px;
  33. }

Ahora nuestro menu se ve así:

CSS Menu Paso 2

Ya va tomando forma. :) Ahora solo nos queda acomodar los iconos al rededor del círculo. Para esto, tenemos que acomodar cada icono por separado, con precisión de pixel y posicionando absolutamente cada elemento. Primero que nada, vamos a esconder la información; es decir, todo el texto dentro de nuestros anchors:

TEXTO PLANO
CSS:
  1. /* Esconder información */
  2.  
  3. ul#menu li a.menitem span, ul#menu li a.menitem strong, ul#menu li a.menactive span, ul#menu li a.menactive strong {
  4.     display: none;
  5. }

Y ahora vamos a mostrar la información cuando pasemos el mouse sobre el anchor: Para esto posicionaremos el tag <strong> y el tag <span> absolutamente; los mostraremos como bloques y los pondremos a la izquierda del menu. El tag <hspan>, que es la descripción, será una caja amarilla con un borde un poco más oscuro, tendrá 120px de ancho, el atributo de z-index: 1; y le daremos 20px de padding hacia arriba para poder colocar ahí el tag <strong>, que es el título de la sección. Este tag (<strong>) tendrá un ancho de 100px y un borde al fondo de 1px color amarillo. También le daremos la propiedad de z-index: 2; para colocarlo sobre el tag <span>. A ambas tags les daremos el atributo left: 50px; para alejarlo 5px a la derecha de nuestro icono (¿recuerdas que la imagen es de 45px de ancho? Le vamos a dar 5px de espacio entre el icono y el tooltip; por lo que 45px+5px = 50px) y top:0; para que esté a la misma altura que nuestro icono. También he agregado el atributo opacity para los navegadores que lo soportan:

TEXTO PLANO
CSS:
  1. /* Mostrar información en :hover */
  2.  
  3. ul#menu li a.menitem:hover strong {
  4.     display: block;
  5.     text-align: left;
  6.     position: absolute;
  7.     width: 100px;
  8.     border-bottom: 1px solid #ffdb5e;
  9.     padding: 2px 0 2px 0;
  10.     margin: 0 0 0 5px;
  11.     color: #333;
  12.     left: 50px;
  13.     top: 0;
  14.     z-index: 2;
  15. }
  16.  
  17. ul#menu li a.menitem:hover span {
  18.     display: block;
  19.     position: absolute;
  20.     width: 120px;
  21.     text-align: left;
  22.     border: 1px solid #ffe897;
  23.     background-color: #ffefb7;
  24.     padding: 20px 2px 2px 2px;
  25.     color: #333;
  26.     left: 50px;
  27.     top: 0;
  28.     z-index: 1;
  29.     opacity: .9;
  30. }

Con todo esto ya practicamente hemos terminado. Solo nos falta dar algo de estilo a los iconos. Empezaremos con darles estilo cuando están activos y cuando no. Cuando un icono no está activo, queremos mostrar el fondo con el icono sin el círculo verde, por lo que posicionamos la imagen de fondo hasta abajo. Cuando el mouse pasa encima de un icono que no está activo, mostraremos la imagen con el círculo verde, por lo que posicionamos el fondo hasta arriba. Finalmente, cuando el icono está activo mostraremos la imagen con el círculo verde para diferenciarlo de los que no lo están. De nuevo, he agregado el atributo opacity para los navegadores que lo soportan:

TEXTO PLANO
CSS:
  1. /* Fondo en :active y :hover */
  2.  
  3.     /* Items del menu no activos */
  4.    
  5.     ul#menu a.menitem:link, ul#menu a.menitem:visited {
  6.         background-position: left bottom;
  7.         opacity: .7;
  8.     }
  9.    
  10.     ul#menu a.menitem:hover, ul#menu a.menitem:active,  {
  11.         background-position: left top;
  12.         background-color: transparent;
  13.         opacity: .9;
  14.     }
  15.    
  16.     /* Items del menu activos */
  17.    
  18.     ul#menu li a.menactive {
  19.         background-position: left top;
  20.         background-color: transparent;
  21.         opacity: 1;
  22.     }
  23.  
  24.     ul#menu li a.menactive:hover {
  25.         opacity: 1;
  26.     }

Con todo esto lo único que nos queda es dar estilo a los anchos. Empezaremos con mostrarlos como un bloque de 45px por 45px posicionado absolutamente y quitando el borde (si es necesario):

TEXTO PLANO
CSS:
  1. /* Dando estilo a los anchors */
  2.     ul#menu a {
  3.     border: 0;
  4.     position: absolute;
  5.     width: 45px;
  6.     height: 45px;
  7. }

Ya solo nos queda especificar la imagen de cada icono y posicionarla en su lugar. Para posicionarlas usaremos los atributos top y left. ¿Recuerdas que todos nuestros <li> están hasta arriba a la izquierda? Esto nos facilitará el posicionamiento de los iconos. Relativo a esta posición (hasta arriba a la derecha) daremos los valores de top y left e iremos acomodando los iconos alrededor del círculo. También especificaremos la iamgen de fondo de cada anchor:

TEXTO PLANO
CSS:
  1. #home {
  2.     top: -20px;
  3.     left: 95px;
  4.     background-image: url('home.gif');
  5. }
  6.  
  7. #tutos {
  8.     top: 20px;
  9.     left: 170px;
  10.     background-image: url('tutos.gif');
  11. }
  12.  
  13. #files {
  14.     top: 90px;
  15.     left: 200px;
  16.     background-image: url('files.gif');
  17. }
  18.  
  19. #search {
  20.     top: 155px;
  21.     left: 170px;
  22.     background-image: url('search.gif');
  23. }
  24.  
  25. #mail {
  26.     top: 195px;
  27.     left: 95px;
  28.     background-image: url('mail.gif');
  29. }
  30.  
  31. #id {
  32.     top: 155px;
  33.     left: 10px;
  34.     background-image: url('id.gif');
  35. }
  36.  
  37. #write {
  38.     top: 90px;
  39.     left: -20px;
  40.     background-image: url('write.gif');
  41. }
  42.  
  43. #logout {
  44.     top: 20px;
  45.     left: 10px;
  46.     background-image: url('logout.gif');
  47. }

Y con todo esto ya hemos terminado. Pueden ver el producto terminado aquí. Es un rollo, yo sé; pero traten de analizarlo y no es tan difícil. Ahora bien, la aplicación de este menu sigue siendo un misterio para mi... pero tal vez alguien en algún lugar logre encontrarle un uso.

Proximamente pondré un pequeño tutorial de cómo lograr que el menú sepa dónde está y que imprima una respuesta (una clase, por ejemplo) para mantener la navegación "actual"; es decir, que el menactive se marque solo y nos dé el estilo si estamos en dicha pagina.

Páginas: 1 2 3

Posts relacionados:

52 Comentarios

  1. #1 gravatar Uan 22 de Marzo del 2007, 9:32

    Firefox 1.5.0.11 en XP también funciona

  2. #2 gravatar Sikaffy 22 de Marzo del 2007, 9:51

    OMG, me encanta. ;_;

  3. #3 gravatar isaac 22 de Marzo del 2007, 11:48

    En Safari 2.0.4 y Firefox 2.0.0.2 sobre mac funciona perfecto.
    Un saludo!

  4. #4 gravatar aerovoyager 22 de Marzo del 2007, 13:00

    Firefox 2.0.0.3 en winXP SP2, funciona sin problemas
    IE 7.0 en winXP SP2, funciona sin problemas

  5. #5 gravatar Milton! 22 de Marzo del 2007, 14:26

    Realmente muy bueno!

    Tengo las mismas herramientas que aerovoyager, así que me ahorro el decir que funciona...

    Mis felicitaciones por un muy buen diseño, que (como decís arriba) además de ser atractivo es útil y funcional...

    Saludos!

  6. #6 gravatar mary 22 de Marzo del 2007, 15:27

    esto funciona en linux

  7. #7 gravatar Roberto R. 22 de Marzo del 2007, 15:51

    Impresionante. Muy buen trabajo. Funciona muy bien en los navegadores que lo probé (Safari, IE6 winXP, Firefox).

    Limpio y semántico tu código. Excelente demo =)

  8. #8 gravatar antonio3407 22 de Marzo del 2007, 17:49

    Muy bueno el menu.

  9. #9 gravatar diego 23 de Marzo del 2007, 9:18

    Muy bueno este menu circular!! Lo veo en Opera 9.02 en Win XP perfecto, lo unico que cambiaria si se pudiera seria lo extenso que es, uf. Felicitaciones

  10. #10 gravatar macklus 23 de Marzo del 2007, 9:39

    Impresionante. Es increible ver las cosas que se pueden hacer con algo tan "simple" como CSS

  11. #11 gravatar Pedro Rogério 23 de Marzo del 2007, 9:42

    Buenas Hermano,

    Muy bueno este menu. Gracias!!!

  12. #12 gravatar Pinceladas da Web 23 de Marzo del 2007, 9:59

    MENU CIRCULAR EM CSS...

    Para provar todo o poder das CSS, dêem uma olhada nesse menu circular, totalmente desenvolvido com HTML e CSS, e nada de JavaScript.

    ......

  13. #13 gravatar Adrian Ramiro 23 de Marzo del 2007, 11:50

    Funciona perfectamente en FF 2.0.0.1 bajo Kubuntu Linux y en Konqueror 3.5.2 ( que viene defecto en Kubuntu ).

    Una aplicacion que se me ocurre, click en un objeto y que nos aparezca este menu para seleccionar la accion deseada con el mismo (Comprar, Ver mas Datos, Recomendar a un Amigo, etc). Claro que para esto se complementaria posicionandolo exactamente donde este el mouse en ese momento.

    Excelente trabajo.

  14. #14 gravatar penyaskito 24 de Marzo del 2007, 14:46

    Bien en Opera 9 sobre WinXP SP2 :D

  15. #15 gravatar jav 26 de Marzo del 2007, 11:37

    excelente, andaba buscando algo parecido :D

  16. #16 gravatar Jose L. 26 de Marzo del 2007, 23:59

    ¡Magnífico! Algo 'sencillo' con una aspecto espectacular. Enhorabuena.

  17. #17 gravatar GetronX 28 de Marzo del 2007, 19:10

    Sensacional menu... sin duda algo espectacular.

  18. #18 gravatar Nandocot 29 de Marzo del 2007, 9:38

    Excelênte!!! está funcionando bem.
    Meus parabêns.

    "O Poder dos CSS"

  19. #19 gravatar Web 2.0: Lista (Parte 1) « % absolute ? 6 de Abril del 2007, 23:04

    [...] Menu Circular (CSS) Cada dia o CSS vai me assustando, não tem muito oque falar, apenas clique e mate a curiosidade. [...]

  20. #20 gravatar José Manuel 7 de Abril del 2007, 20:31

    Muy bueno, funciono haciéndolo tal cual lo comentas.
    Intente cambiar el tamaño a 440px, y cambie los iconos por otros para mí más útiles, pero me sucedió una cosa extraña, desaparece a la vista la imagen circular de fondo y las imágenes de los iconos, mueves el ratón, por la pantalla y cuando encuentra donde supuestamente esta el icono aparece el tag del contenido, me podías indicar donde puede estar el fallo, gracias

  21. #21 gravatar MeTaL_oRgY 7 de Abril del 2007, 23:27

    José Manuel El error podría estar en el nombre de los archivos, en algún cambio en las propiedades de los elementos (principalmente en el position), en el tamaño de las imagenes o en las posiciones absolutas de los elementos. Es un código algo delicado y la menor alteración lo afecta todo. Te recomiendo vuelvas a hacerlo, paso por paso, y revisando el resultado final después de cada edición. Así podrás detectar facilmente el cambio que provoca el error.

  22. #22 gravatar Best of March 2007 | Smashing Magazine 11 de Abril del 2007, 10:57

    [...] Circular Menu with CSS [...]

  23. #23 gravatar Menu circular em CSS 11 de Abril del 2007, 19:49

    [...] O site metalize.liveonstyle.com publicou um interessante tutorial sobre como criar um menu em forma de circulo utilizando CSS. Veja um exemplo do menu funcionando aqui. [...]

  24. #24 gravatar Dairesel CSS Menü 11 de Abril del 2007, 22:01

    [...] Yukarda gördüğünüz tarz menüleri belki birçok sitede görmüşsünüzdür ancak genelde Flash teknolojisi kullanılarak yapılmışlardır.Ancak bu gördüğünüz menü CSS tekniğiyle oluşturulmuş  bir menü.Menünün yapımı bu adresde uzun uzun anlatılmış.Ancak sanırım İspanyolca bir anlatım olduğu için sadece kod yapısını inceleyebilirsiniz.(Belki ispanyolca biliyorsunuzdur.)Yada çeviri sitelerine başvurabilirsiniz… [...]

  25. #25 gravatar Sai 11 de Abril del 2007, 23:17

    Can I get the English version help and Demo Page URL please...

  26. #26 gravatar MeTaL_oRgY 12 de Abril del 2007, 9:50

    Sai: I'm very sorry, but there is no translated version of this tutorial. Yet, I believe the HTML and CSS speaks for themselves. You might as well be able to do something with just the example page. Best of lucks!

  27. #27 gravatar Pablo 12 de Abril del 2007, 10:16

    Muy lindo menu y muy buena utilización del css, felicitaciones

  28. #28 gravatar kerberoS 13 de Abril del 2007, 13:49

    ¡excelente! De verdad muy bueno.

  29. #29 gravatar dairesel css menu : İnternet ve Yaşam 13 de Abril del 2007, 15:52

    [...] bugune kadar gormus oldugum en yaratici css menulerden birisini. nasil yapildigini ogrenmek icin : [ 1 ] [ 2 ] [ 3 ]. nasil calistigini gormek icinde buraya goz atabilirsiniz.not : belirtmeliyimki yapilan aciklamalarin hepsi ispanyolca. [...]

  30. #30 gravatar mcdave.net » links for 2007-04-14 14 de Abril del 2007, 1:25

    [...] metal.ize » Blog Archive » Menu circular en CSS (tags: css menu webdesign tutorial web javascript tool howto inspiration) [...]

  31. #31 gravatar Well .. 14 de Abril del 2007, 18:09

    Maybe you should mention, that the icons are part of the tango project oO?

  32. #32 gravatar MeTaL_oRgY 14 de Abril del 2007, 21:01

    Holy mother of god... thanks for remembering that. I was pretty sure that the example page included a link... damn. Well, I've already added a link on the first page of this tutorial...

    I shall apologize to the Tango Icon Project development team. I seriously thought the link was there. Thanks for an awesome set of icons, by the way.

  33. #33 gravatar Webdesign (css, grafica e altro) » Blog Archive » Best of March 2007 18 de Abril del 2007, 11:28

    [...] Circular Menu with CSS This article shows how a beautiful circular navigation menu is created. In Spanish with Source code and an example. [...]

  34. #34 gravatar Antonio Silva 25 de Abril del 2007, 18:50

    Muito bom mesmo essa dica! Parabéns.

    Grato.

  35. #35 gravatar Peter 26 de Abril del 2007, 16:18

    muy interesante para hacer un menu circular

  36. #36 gravatar Rick! 29 de Abril del 2007, 23:02

    Muy bueno para salir de lo comun.....Felicitaciones

  37. #37 gravatar Web 1 de Mayo del 2007, 22:57

    Interestante, el artículo. Saludos

  38. #38 gravatar troie 16 de Junio del 2007, 4:21

    i'am really impressed!!

  39. #39 gravatar EfraNET 29 de Junio del 2007, 13:33

    Excelente trabajo, me funciona re bien. Estoy en proceso de agregar íconos y cambiar las imágenes para adapatarlo a mi trabajo... FELICIDADES NUEVAMENTE.

  40. #40 gravatar Luciane 19 de Julio del 2007, 0:24

    Ola.. Apliquei este menu circular en mi site. http://www.luciane.pro.br/

    Gracias por tu ejemplo e Saludos...

  41. #41 gravatar NicoElojo 25 de Julio del 2007, 23:19

    Hola acabo de implementarlo en mi página para los distintos boliches xD

    http://www.confizona.com.ar/menu/fotos.php

    La verdad que hace mucho que queria hacerlo pero recien ahora le dedique a full.
    La verdad siempre leo tus articulos ;)

    saludos!

  42. #42 gravatar Omar 7 de Agosto del 2007, 16:12

    Puedo hacer un menu animado solo con ccs
    para evitar usar javascript ya que varos usuarios no lo tienen activado ?

  43. #43 gravatar Omar 7 de Agosto del 2007, 16:18

    Esto era lo que estava buscando para mi web :D

  44. #44 gravatar gabriel 6 de Octubre del 2007, 19:15

    hola esta padre el menu pero sabes tengo un problema con firefox 2.0.0.7 no me aparese la imagen de que esta selecionado no se si me puedas ayudar gracias

  45. #45 gravatar moisesrlima 22 de Noviembre del 2007, 12:22

    quero fazer um menu estilo icone do desktop clicavel e arrastavel como o da area de trabalho do widowns, é possível?

    Alguem pode me ajudar???

  46. #46 gravatar Recursos para un Webmaster | DesignPro 3 de Diciembre del 2007, 8:52

    [...] Menu en CSS: Menu circular en CSS, muy interesante. [...]

  47. #47 gravatar David Jacques-Louis 24 de Febrero del 2008, 12:14

    Fantastico

  48. #48 gravatar Ravid 28 de Febrero del 2008, 2:24

    Podrias enviar el codigo en un archivo zip?

    Gracias

  49. #49 gravatar joe2 17 de Marzo del 2008, 8:03

    good work! i am impressed!

  50. #50 gravatar Hadt 30 de Abril del 2008, 9:36

    OK.. ELEGANTE!

  51. #51 gravatar Luis Henrique 2 de Mayo del 2008, 11:42

    Muy bueno! Gracias!

  52. #52 gravatar mossad 11 de Mayo del 2008, 16:04

    hi
    i found this bug on ur site
    my browser is Firefox V:Mozilla/5.0 (Windows; U; Windows NT 5.1; ar; rv:1.8.1.14) Gecko/2008040413 Firefox/2.0.0.14
    and i have the "web developer" add ons
    when i disable the minimum font size from disable menu ...ur site