#css vs #explorer, #chrome, #firefox, hacks y el espiritu santo, amen

buenas a todos

que bonito es que los objetos html se vean iguales en todos los navegadores verdad? … microsoft opina lo contrario, explorer como siempre dando la nota

en chrome y firefox genial y en explorer 11 las font un pelin mas grandes, la cuenta para que el input del buscador se vea por debajo del menu

solucion rapida y facil, css especifico para expl0rer … que no vale para nada claro, ejemplo de codigo:

<!--[if lte IE 8]>
    <link rel="stylesheet" href="ie8.css" type="text/css" />
<![endif]-->

este codigo estara muy guapo para controlar si usuario tiene el 6 o el 7 o el 8 … bla bla bla, pero si el usuario tiene el 11 no funciona y seguimos en las mismas

tras varios cabezazos contra el monitor decidi recurrir al javascript … que ingenuo!, explorer ya esta de vuelta. Tras probar 4 scripts diferentes que ni me molesto en pegar aqui ninguno funciono, explorer 11 es un bug gigante inexpugnable

solucion final definitiva que funciona : olvidarse de intentar reconocer explorer y hacerlo con chrome y firefox, a la primera funciono. Con estos dos codiguillos muestro un css de un objeto especifico y a explorer lo trato de estardar.

@-moz-document url-prefix()
{
  #div { display: block; }
}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
  #div { display: block; }
}

Que pasa con explorer 10 … 9 … 8 … 7 … 6 … la gente que usa esos navegadores deberian tener prohibido tener ordenadores por seguir usando software de una empresa cuyos empleados no se sabe en que estan pensando … (yo uso windows 7 si, pero ahora no estamos hablando de mi)

 

#CSS div height: 100% – Alto de capa para chrome, firefox y explorer by @zoneartcss

Fuente: zoneartcss.com

Bua…. como lo dice el titulo… porfin una solucion, sino la correcta, supongo que la unica por el momento… (y si me equivoco manda la tuya haciendo click aqui), y siempre que necesitamos dar esteefecto en nuestros diseños… acabamos haciendolo con javascript… o si tenemos un diseño fijo, estatico, pues optamos por el uso de una imagen de fondo… que no es lo mas conveniente en algunas ocaciones pero si nos ahorra horas y frustraciones pero bueno. eh aqui la solucion para igualar nuestras columnas, cuando estan dentro de un div contenedor… y dar el efecto de divs relativamente iguales en su altura...

Al lio… tenemos nuestro div contenedor (class=”all”) y dentro tenemos otros 2 div ‘s (class=”contenido” y class=”lateral”) y queremos que tengan la misma altura cubriendo asi el 100% del contenedor (class=”all”)… entonces el html es:…

<div class="all">
    <div class="contenido">
        <p>nuestra primera columna</p>
    </div>
    <div class="lateral">
        <p>nuestra segunda columna.</p>
    </div>
</div>

Ahora para dar el efecto necesitamos hacer uso del “overflow” para que nos oculte el scroll que nos da el “padding” y el “margin“, que son ridiculamente enormes y nos da mucha altura.

.all{overflow:hidden;}
.contenido, .lateral{float:left;padding-bottom:30000px;margin-bottom:-30000px;}

Click para ver demo en linea

#CSS height: 100% – Alto de capa que sea el de la ventana del navegador SOLO PARA EXPLORER by @deswebcom

Fuente : Miguel Angel Alvarez – desarrolloweb.com

Este ejemplo SOLO FUNCIONA en EXPLORER

Necesitaba un div que fuera tan alto como el total de la web (vamos, como el contenido) y olvidarme de medir y esas cosas tan divertidas

El titulo de este post me llevo a dudar hasta que probe el ejemplo, pense que me haria el div tan alto como la ventana del navegador y luego no seguiria alargandose con el contenido de la web … pero afortunadamente se estira hasta el infinito y mas alla!!

Aqui os dejo el ejemplito, perdonad mi explicacion enrevesada pero ahora os haceis una idea de porque me echaron de la real academia de la lengua, verdad? …


<html>
<head>
<title>maquetado CSS utilizando todo el height</title>

<style type="text/css">
html,body{
margin:0px;
height:100%;
}
</style>

</head>
<body>

<div id="map" style="height: 100%;background-color:#ffff99;">Contenido que tiene que ocupar todo el espacio del navegador.</div>

</body>
</html>