Div dentro de Div se ve diferente en Firefox

german_martin · #1 (**permalink**) 15/08/2011, 20:57

Hola!
Hace 3 horas que me estoy sacando los pelos por esto. Tengo un DIV dentro de otro. El de adentro tiene qe mostrar el numero 390 pero se ve desalineado! se ve para abajo, toque todo pero no logro posicionarlo.
Solo sucede con firefox. Chrome y IE anda muy bien

miren la imagen

Este es el codigo. Que puede ser?

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style>

   

                .buttons a, .buttons button{

            display:block;

            float:left;

            margin:0 7px 0 0;

            background-color:#f5f5f5;

            border:1px solid #dedede;

            border-top:1px solid #eee;

            border-left:1px solid #eee;

 

            font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;

            font-size:12px;

            line-height:130%;

            text-decoration:none;

            font-weight:bold;

            color:#565656;

            cursor:pointer;

            position: relative;

            padding:5px 10px 6px 7px; /* Links */

        }

        .buttons button{

            width:auto;

            overflow:visible;

            padding:4px 10px 3px 7px; /* IE6 */

        }

        .buttons button[type]{

            padding:5px 10px 5px 7px; /* Firefox */

            line-height:17px; /* Safari */

        }

        *:first-child+html button[type]{

            padding:4px 10px 3px 7px; /* IE7 */

        }

        .buttons button img, .buttons a img{

            margin:0 3px -3px 0 !important;

            padding:0;

            border:none;

            width:32px;

            height:32px;

        }

 

        /* STANDARD */

 

        button:hover, .buttons a:hover{

            background-color:#dff4ff;

            border:1px solid #c2e1ef;

            color:#336699;

        }

        .buttons a:active{

            background-color:#6299c5;

            border:1px solid #6299c5;

            color:#fff;

        }

 

        /* POSITIVE */

 

        button.positive, .buttons a.positive{

            color:#529214;

        }

        .buttons a.positive:hover, button.positive:hover{

            background-color:#E6EFC2;

            border:1px solid #C6D880;

            color:#529214;

        }

        .buttons a.positive:active{

            background-color:#529214;

            border:1px solid #529214;

            color:#fff;

        }

 

        /* NEGATIVE */

 

        .buttons a.negative, button.negative{

            color:#d12f19;

        }

        .buttons a.negative:hover, button.negative:hover{

            background:#fbe3e4;

            border:1px solid #fbc2c4;

            color:#d12f19;

        }

        .buttons a.negative:active{

            background-color:#d12f19;

            border:1px solid #d12f19;

            color:#fff;

        }

 

        /* REGULAR */

 

        button.regular, .buttons a.regular{

            color:#336699;

        }

        .buttons a.regular:hover, button.regular:hover{

            background-color:#dff4ff;

            border:1px solid #c2e1ef;

            color:#336699;

        }

        .buttons a.regular:active{

            background-color:#6299c5;

            border:1px solid #6299c5;

            color:#fff;

        }

        #number {

         position: absolute;

         margin-bottom: 40px;

         height: 110px;

         padding: 10px 0 0 0;

         top:0;

         width:0px;

         font-family: Times New Roman;

         font-size: xx-large;

         text-align: right;

        }

 

        

 

    </style>

    

</head>

<body>

 

    <div id="Boton" class="buttons" >

        <button type="submit" class="positive" name="save" onclick="javascript:location.href = 'grilla.aspx?vista=Windows'; return false;"><img src="Icon_Windows2003.png" alt=""/>

        <div id="number">390</div>

        <div>Equipos Microsoft Windows</div>

        </button>

    </div>

    

</body>

</html>

cristian_qc · #2 (**permalink**) 15/08/2011, 21:54

CREO que el problema es que firefox no te reconoce varios estilos dentro de un button, por favor corrijanme si me estoy equivocando. Pero viendo en firebug solo reconoce uno de los estilos dentro del button.

german_martin · #3 (**permalink**) 15/08/2011, 22:06

mmm Gracias cristian pero la verdad no entiendo nada

cristian_qc · #4 (**permalink**) 15/08/2011, 22:25

Dije cualquier cosa, hace de cuenta que no dije nada.
Intentá esto a ver si es lo que necesitás:

Código HTML:

Ver original<div id="Boton" class="buttons">
        <button type="submit" class="positive" name="save" onclick="javascript:location.href = 'grilla.aspx?vista=Windows'; return false;">
            <div style="font-family: Times New Roman;font-size: xx-large;text-align:left;background: url( 'Icon_Windows2003.png' )no-repeat center;">390</div>
            <div>Equipos Microsoft Windows</div>
        </button>
</div>