Estoy haciendo un nuevo diseño de una de mis páginas, y me encontre con una decepción de parte de Mozilla Firefox, aunque la verdad intento descubrir si es un bug de mozilla o si es por algo que he hecho mal.
La cosa es así, haciendo el diseño con css de una de las cajas le colo que entre otras las siguientes propiedades:
- border: solid 6px #4c4648;
- outline: 2px dashed #cfa840;
- outline-offset: -8px;
en las pruebas locales se ve perfecto pero cuando lo subo al servidor y cargo la página me llevo la sorpresa de ver que en Mozilla Firefox el outline-offset no sierra en el costado izquierdo de la caja, es decir queda como un gran corchete de cierre ( ] ). La linea recorre bien el lado lateral derecho de la caja los superiores e inferiores, pero no cierra en el lado izquierdo, sigue de largo por arriba y abajo como si la caja fuera excecivamente amplia cuando tiene un "max-width: 1100px;"
Otra cosa es que esto solo ocurre en Firefox, en los demas se ve a la perfección y en IE aunque no toma el valor negativo -8px lo muestra como si tuviera un valor de 0px, que no esta mal considerando de que cierra por completo la caja. en cambio Firefox toma el valor negativo pero no cierra el lado izquierdo de la caja.
Otra cosa curiosa es que en la primera pestaña que esta de intro y no tiene ningún ancla la linea se muestra perfectamente bien, pero en el contenido de las pestañas sucede lo que describo anteriormente.
Ahora bien otro dato, esto solo pasa con el valor negativo, pues cuando lo pongo en 0px o en valores positivos la linea cierra toda la caja sin ningun tipo de problema.
Estoy un poco desilucionado pues soy un defensor de Mozilla Firefox y la verdad siempre había estado encantado como este navegador interpreta el codigo, si es un bug espero poder informarlo y lograr que lo reparen.
Les dejo el link de la página para que lo vean y se fijen el codigo CSS, si desean, para ver si hay algun error: [URL="nvo-galeon.elgaleonargentino.com.ar/tutoriales.html"]
Si alguien pudiera orientarme sobre el motivo por el cual sucede esto y como solucionarlo estaría muy agradecido. Ademas, bueno espero sus respuestas desde ya muchas gracias por su tiempo, paciencia y ayuda.
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Hola gente esto lo agregue el 15/08/2012
He descubierto cual es el problema es Add This, y sus botones para compartir, cuando le asigno la propiedad "display: none;" al div que los contiene la linea de "outline-offset: -8px;" se muestra correctamente, no si si alguno de uds. a tenido algun problema similar con esta aplicacion para compartir, espero puedan reponder este post, pues ya no se como hacer para que este complemento no arruine el diseño.