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"> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<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"); });
});
<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;"> <a class="close-reveal-modal">×
</a>
<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 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 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 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>
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.