Comunidad de diseño web y desarrollo en internet online

CSS Compatible con navegadores Chrome - FireFox - IE

Citar            
MensajeEscrito el 08 Mar 2012 04:51 pm
Buenas, me estoy iniciando en CSS y actualmente poseo un error que por lo que vi es muy común, la compatibilidad de nuestra hoja de estilo con los diferentes navegadores.

Esto lo veo correctamente en Chrome, en FireFox pero no así en IE el cual me alineado a la izquierda.

Intente lo indicado en varios POST pero solo obtuve dos resultados me muestra lo mismo (todo alineado a la izquierda) o todo desordenado.

Me sabrían indicar que es lo que debo hacer?
Eh visto paginas que poseen exactamente el mismo CSS para todos los exploradores, de que forma lo hacen compatible?

Saludos y muchas gracias.

Les dejo el CSS que hice para mi web.

Código HTML :

@charset "utf-8";
/* CSS Document */
body {
   height:100%;
   width:100%;
   position: relative;
   margin: 0;
   padding: 0;
      }
//DIV QUE CONTIENE LOGO, MENU, Y FONDO DEL HEADER
#header{
   width:100%;
   background-color:#333;
   background-image:;
   }
   
#header-visible{
   max-width:1080px;
   height:145px;
   margin: 0 auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
   }
#logo{
   width:1080px;
   height:88px;
   float:left;
   }
#menu{
   width:1080px;
   height:57px;
   float:left
   }
   
//DIV DONDE SE CARGA BANNER FLASH
#banner {
       background-color: grey;
       height:400px;
       padding:5px;
      }

//DIV CONTENEDOR DEL BODY DE LA PAGINA
#contenedor {
       width: 1080px;
      height: 100%;
      margin-left: auto;
       margin-right: auto;  
      }

/*Estilo Columnas*/
#col-1 {
            float: left;
            width:768px;
            height:100%;
         margin: 5px;
         margin-top: 5px;
         }
         

#col-2 {
   background-color:#009;
            float: left;
            width:220px;
            height:100%;
         margin-top: 5px;
         overflow:visible;
         }

#modulo-redes-sociales {width:210px; float:left; padding:10px 5px 10px 5px; font-size:12px; border-bottom:#878787 solid 1px;}

Por PX10

70 de clabLevel



 

chrome
Citar            
MensajeEscrito el 08 Mar 2012 05:59 pm
Investiga sobre hacks o condicionales para mostrar estilos u hojas de estilo únicamente para IE, corrige a mano y se feliz.

Recuerda no clavarte en darle soporte a IE6 y 7. Únicamente a IE8 y 9.

Suerte.

Por Kinduff

Claber

3563 de clabLevel

21 tutoriales
3 articulos

 

web dev wizzard

chrome
Citar            
MensajeEscrito el 09 Mar 2012 12:06 am
Gracias! voy a leer sobre lo que me indicas...

Te hago otra consulta, dentro del DIV contenedor tengo el DIV col-1 y Div col-2 como puedo centrarlos?

te puedo dejar el HTML para que lo veas?

Código HTML :

<html>
<head>
<title>Stand By</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="swfobject.js"></script>
<script language="javascript">
function cargaenIframe(url){
   document.getElementById("ifrm").src = url
}</script>
</head>
<body>
<div id="header">
<div id="header-visible">
   <div id="logo"></div>
   <div id="menu"><embed src="menu.swf" width="1080" type="application/x-shockwave-flash" id="menu" height="60" name="menu" quality="high"></embed></div>
</div>
</div>
<div id="banner">Aqui el banner</div>

<div id="contenedor">
<div id="columnas">
   <div id="col-1"><iframe scrolling="no" frameborder="0" width="768px" height="100%" id="ifrm"></iframe></div>
    <div id="col-2"><div class="modulo-redes-sociales"><img src="/tit-seguinos.png" width="101" height="20" border="0" > <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FStandBy%2F185935714851247&amp;send=false&amp;layout=standard&amp;width=220&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=120&amp;appId=113842835297676" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:220px; height:120px;" allowTransparency="true"></iframe></div>
</div>
</div>

</body>
</html>
</html>

Por PX10

70 de clabLevel



 

chrome
Citar            
MensajeEscrito el 09 Mar 2012 05:49 pm
para poder centrar un div

margin:0 auto;

claro debes quitar el float

saludos cordiales

Por joshuavw

Claber

306 de clabLevel



Genero:Masculino  

Juego, aprendo y programo

firefox
Citar            
MensajeEscrito el 11 Mar 2012 05:45 am
Una pregunta mas, eh estado probando z-index para lograr utilizar un SWF como fondo de mi pantalla.

Algo muy parecido a lo que podemos ver en la web http://es.playstation.com/

No funciono, de hecho encontré un ejemplo mas sencillo pero tampoco me funciono, dejo la web donde se encuentra dicho ejemplo.

http://www.addsomespark.com/overunder/

No se si estoy omitiendo algo de todo lo que hay...

AH! me olvidaba... Funciono de 10 tu consejo MIL GRACIAS!!!


Codigo con el que inserta el SWF al HTML

Código HTML :

<embed type="application/x-shockwave-flash" src="800x800.swf" width="100%" height="100%" style="undefined" id="sotester" name="sotester" bgcolor="#0D6793" quality="high" wmode="transparent" scale="noscale">


CSS

Código HTML :

/* Styles for the "background" layer */
#flashUnder {
   left: 0px;
   top: 0px;
   width:100%;
   height:100%;
}


Script que encontré en el CSS

Código HTML :

<div ID="flashUnder"><!-- This is Non Flash content replaced by the Flash "Background" --></div>
<script type="text/javascript">
      // <![CDATA[
      
      var so1 = new SWFObject("800x800.swf", "sotester", "100%", "100%", "9", "#0D6793");
      so1.addParam("wmode", "transparent");
      so1.addParam("scale", "noscale");
      so1.write("flashUnder");
      
      // ]]>
   </script>

Por PX10

70 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.