Problema con gradient en firefox

guzzano · #1 (**permalink**) 20/10/2012, 23:42

Buenos días. Tengo configurado mi CSS para que tenga un efecto gradient en el fondo del sitio. Con Chrome funciona perfectamente pero con Firefox o Opera, se ve cortado.

Aquí con chrome:

Aquí con firefox:

El código es el siguiente:

Código HTML:

Ver original<? //if (isset($_SESSION['login']['estado']) != TRUE) { include('paginas/no_logeado.html'); exit();} ?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html xml:lang = "es" xmlns = "http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
        <title>mPlayer</title>
        
        <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic+SC' rel='stylesheet' type='text/css'>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <link rel = "stylesheet" href="recursos/css/reveal.css">
        
        <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="recursos/js/jquery.jplayer.min.js"></script>
       
        <script src="recursos/js/jquery.reveal.js" type="text/javascript"></script>
 
        <script type="text/javascript">
        $(document).ready(function() {
            $('#agregar_cancion_s').click(function(e) {e.preventDefault(); $('#dialogo_agregar_cancion').reveal(); }); 
            $("#buscar_cancion").click(function() { });
 
            $("#jquery_jplayer_1").jPlayer({
                    ready: function () {
                        $(this).jPlayer("setMedia", {
                            mp3: "http://www.todo-chat.tk/musica/Hip%20Hop/Snoop%20Dogg/Snoop%20Dogg%20-%20Snoop%20Dogg%20Ft.%20Dr.%20Dre%20-%20The%20Next%20Episode.mp3" }); },
                            
            swfPath: "recursos/js/",
            supplied: "mp3",
            cssSelectorAncestor: "",
            cssSelector: {
                play: "#play",
                pause: "#pause",
                currentTime: "#currentTime",
                duration: "#duration" }});
 
            $("#autor").mouseenter(function() {
                $("#tiempo").css("display", "block"); });
 
            $("#autor").mouseleave(function(e){ 
                $("#tiempo").css("display", "none"); });
                 });
                
        </script>
        
    </head>
        
    <body style = "font-family: 'Carrois Gothic SC', sans-serif; background: rgb(254,255,232); background: -moz-linear-gradient(-45deg,  rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(254,255,232,1)), color-stop(100%,rgba(214,219,191,1))); background: -webkit-linear-gradient(-45deg,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); background: -o-linear-gradient(-45deg,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); background: -ms-linear-gradient(-45deg,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); background: linear-gradient(135deg,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=1 ); margin: 6 auto; width: 850px;">
 
        <div id="dialogo_agregar_cancion" class = "reveal-modal" style = "text-align: center">
             <b><span style = "font-size: 39;">Agregar más canciones</span></b>
             <p>Para agregar más canciones, necesitas que introduzcas  el nombre y la canción del artista de la siguiente manera: <b>Artista - Canción</b>, el sistema la buscará y te permitirá
              agregarla a tu playlist.</p>
                         
              Canción: <input type = "text" name = "nombre_cancion" style = "border-radius: 5px; border: 1px solid #000000; outline: none; padding-left: 2px; font-size: 10px;">
              <button id = "buscar_cancion">Buscar...</button>
              <a class="close-reveal-modal">×</a>
        </div>
    
        <div style = "height: 120px; margin-left: auto; margin-right: auto;">
            <div style = "float: left;">
                <span style = "font-size: 60px;">REPRODUCTOR DE <span style = "color: #0FB7CA">MÚSICA</span><br>
                <span style = "font-size: 20px;">¡Por qué si haces música con el corazón no te molesta compartirla! </span> 
            </div>
 
            <div style = "float: left; padding-left: 9px;">
                <div style = "border-left: 3px solid #FFFFFF; height: 90px; margin-top: 7px; position: absolute;"></div>
                <div style = "padding-top: 0px; padding-left: 9px;">
                    <p style = "color: #D61052">Alberto Jsé</p>
                    <span id = "agregar_cancion_s" style = "font-size: 12px; cursor: pointer;">Agregar al playlist</span><br/>
                    <span style = "font-size: 12px;">Notificaciones (<font color = "C40909">0</font>)</span><br/>
                    <span style = "font-size: 12px;">Información</span><br/>
                </div>
            </div>
        </div>
 
        <div id = "contenido">
            <div style = "padding-top: 20%;">
                <div style = "width:380px; height: 14px; padding-left: 40px; text-align: center;">
                    <div id = "play" style = "display: inline-block; cursor: pointer; background-image: url(recursos/imagenes/play.gif); width: 16px; height: 17px;"></div>
                    <div id = "pause" style = "display: inline-block; cursor: pointer; background-image: url(recursos/imagenes/pause.gif); width: 16px; height: 17px;"></div>
                    <div id = "autor" style = "-vertical-align: middle; display: inline-block; cursor: default;"><b>Pink Floyd</b> - Shine On You Crazy Diamond</div>
                    <div id = "tiempo" style = "display: none;">(<span id = "currentTime" style = "font-size:10px;"></span> / <span id = "duration" style = "font-size:10px;"></span>)</div>
                    <div id="jquery_jplayer_1" class="jp-jplayer"></div> 
                </div>
            </div>
        </div>
 
 
        <div style = "width: 100%;  position: absolute; bottom: 0; left: 0; border-top: 1px solid #FFFFFF; background: #000000; color: FFFFFF; font-size: 18px;">
            <div style = "padding-top: 4px; padding-left: 4px;">
                Powered by <span style = "color: F2EF22">H00k.ve</span> <span style = "font-size: 12px; color: #75756E;"> Este sitio no aloja ningún tipo de contenido. Los sonidos aquí suministrados están almacenados en otros servidores ajenos a nuestro proyecto. Por ende, el equipo de mPlayer no se hace responsable del uso inadecuado de estos. Para mayor información (+58) 0416 1945283 ó [email protected]. </span>
            </div>
        </div>
    </body>
</html>

En el body estan cargado todo los estilos de CSS incluyendo en gradient. También se aceptan consejos si tengo algún error en las etiquetas. Eso es todo. Saludos y gracias. Buen día, valgase la redundancia.

flashmax · #2 (**permalink**) 21/10/2012, 07:48

hola te falto darle al body height:100%

guzzano · #3 (**permalink**) 21/10/2012, 09:21

Muchísimas gracias, me sirvió perfecto.

Buen día.