css3 en Explorer count-column ,como hacerlo

taldigi · #1 (**permalink**) 27/06/2012, 02:39

Otra vez acudo aquí , porque leyendo tantos manuales y tantas cosas no he conseguido aplicarlos estilos de count-column en Explorer,
En este foro he escrito un tema
http://www.forosdelweb.com/f53/como-maquetar-con-div-filas-columnas-sin-espacio-blanco-999940/#post4217227
El count-column de css3 es la solucion perfecta a lo que quiero hacer.
pero no funciona en INTERNET EXPLORER y en Mozilla funciona pero no igual que en chrome.

en chrome esta pagina http://misanuncios.16mb.com/
se ve como quiero pero en explorer no.
y claro los usuarios la mayoria tiene explorer por lo menos en espana

Me encontrado con " modernizr" Pero no me funciona
POngo este codigo css3

Código:

#columnascategorias {
-moz-column-count: 4;
-moz-column-gap: 10px;
-moz-column-fill: auto;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
column-count: 4;
column-gap: 10px;
column-fill: auto;
column-rule: 1px dotted #BBB;
}
div.unidadcategorias {
margin: -6px 0 -6px 0;
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
column-break-inside: avoid;

}



#contenedorcategorias #columnascategorias .unidadcategorias img {

}
.unidadcategorias h3 {
margin: 0;
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
column-break-inside: avoid;
}

pongo

Código:

<script type="text/javascript" src="modernizr.js"></script>

en la <head><script type="text/javascript" src="modernizr.js"></script></head>

Y no funciona , y no entiendo porque y como solucionarlo.
Ya me vuelvo loco,

Es muy importante para cualquier desarollador tiene que tener a mano un modo de compatibilidad css3 con todos nawegadores,
Pero todo lo que he leído en Internet y he intentado aplicar a mi sitio no me funcionaba,
la verdad que necesito ayuda y estoy seguro que muchos tenia problemas similares.

kseso? · #2 (**permalink**) 28/06/2012, 04:08

¿No había ya una consulta sobre el mismo asunto? (1)
No recuerdo si era también suya.
De lo que no tengo duda es que se había quedado a la espera de que se compartiese la página del problema. Pero hace ya tanto tiempo...
ufff!! qué pereza da tener que volver a repasarse todo otra vez...

Así que generalidades:
"y claro los usuarios la mayoria tiene explorer por lo menos en espana"
Más que discutible, si por "tener" quiere decir usar. (4)

"cualquier desarollador tiene que tener a mano un modo de compatibilidad css3 con todos nawegadores"
Hay cientos de páginas donde verificar el soporte de cualquier navegador/versión a cualquier propiedad de css (y a características de cualquier otro lenguaje). (2)

"Pero todo lo que he leído en Internet y he intentado aplicar a mi sitio no me funcionaba"
Pues una de dos, o lo ha aplicado mal o no era lo que tendría que aplicar. Pero como desconocemos qué y cómo más no podemos hacer. (3)
Un ejemplo:
Y no funciona , y no entiendo porque y como solucionarlo (modernizr.js)

~~...........................................~~
~~...........................................~~
~~...........................................~~

Edito:
1.- este tema

2.- Google, ese gran ignorado

3.- Google, ese gran desaprovechado
En particular Columnizer.
Y teniendo un mínimo de... se pueden encontrar artículos con ejemplos, como éste.

4.- De todo punto innecesario un enlace.

taldigi · #3 (**permalink**) 28/06/2012, 05:01

Hola Kseso de nuevo y muchas gracias por tu tiempo.
Tu ejemplo que me has dado en otro ejemplo me vale para mi pagina sin embargo no me funciona en explorer.
http://ksesocss.blogspot.com/p/demo-columnas-css-ocupacion-del-espacio.html
Mira tu pagina de ejemplo no funciona en explorer versión antigua.
Si lo solucionas y me dices como va valer, pero yo no puedo conseguirlo .
esto esta bien
http://misanuncios.16mb.com/pruba/imagenes/ScreenShot004.png

pero esto no
http://misanuncios.16mb.com/pruba/imagenes/ScreenShot003.png

Ya cuando voy a poder ,voy a coger el toro por los cuernos .
me parece que con
css3-multi-column.js
Yo entiendo que css3-multi-column.js es un polyfill
Modernizr usa polyfills pero como usarlo para este ejemplo

http://ksesocss.blogspot.com/p/demo-columnas-css-ocupacion-del-espacio.html

Que es el mismo que necesito.

La verdad que tengo un lió pero voy a ver los links que me has enviado aunque no entiendo ingles ,intento con traductor de chrome.
Kseso otra vez muchas gracias , y dime si lo solucionas y como, te lo agradezco mucho.

taldigi · #4 (**permalink**) 01/07/2012, 04:18

para que count-column funciona en EXPLORER
hace falta poner esto
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" type="text/css" href="columnas.css" />


</head>

y importante que se carge primero css y luego javascript

NO se porque no funciona con mootools.js

pero esto ya es otro tema que luego voy a empezar.
Este tema ya esta solucionado y cerrado.