min-width en IE6
7 seguidores
Pues eso estoy con un diseño liquido y a la hora de ponerme con los anchos mínimos pa que no se descuadre todo pues de lujo en FF, Opera,... peeeeero.... en IE6 (pa variar) nasti. He buscado por ahi y he visto varias soluciones con javascript(Ni de coña) y esta con CSS:
http://www.planseldon.com/blog/min-width-en-internet-explorer-ii/
que es un poco guarrilla pero creo que podría valer.
¿Qué os parece esta solución?, ¿Cómo lo soléis hacer vosotros?
Gracias.
Diego
cbp
prueba con esto:
<code>
elemento_que_sea {
min-width: 200px;
width: auto !important;
width: 200px;
}
</code>
demssite
Mmmmm no consigo que me valga. Es un diseño liquido, es decir tiene un ancho auto con un margen del 6% a la izquierda y querria que no tuviese nunca menos de 550 px pero no me va...
cbp
¿y si es líquido porque quieres restringir un ancho a una medida absoluta?
hartum
Señor cbp, ha vuelto usted!!!!
¿Que tiene de malo el javascript incrustado en el CSS y comentarios condicionales?
cbp
cbp strikes back!! :P
¿javascript incrustado en css? ¿no me estará usted mezclando capas, no?
orange
Yo utilizaría expressions en la CSS de Explorer 6.
hartum
cbp
cbp strikes back!! :P
¿javascript incrustado en css? ¿no me estará usted mezclando capas, no?
No hombre no, vayamos por partes:
- lo primero de todo es que el min-width, min-height no funciona en explorer y de aqui parte el problema
- segundo, creo que la mejor forma(y la ams elegante) de diferenciar explorer de otros navegadores para darle formato es con los comentarios condicionales, es decir, si eres explorer carga tal hoja de estilos, que por supuesto solo funciona en explorer.
- por ultimo si tenemos una forma elegante de incluir CSS en explorer y explorer admite comportamiento js en sus hojas de estilos, incluyendo por ejmplo archivos .htc ¿porque no utilizar js solo y esxclusivamente en el casod e que lo necesitemos?
Aqui un par de ejemplos:
http://www.planseldon.com/blog/min-width-en-internet-explorer-i/
este sin js pero me parece mas marrullera:
http://www.planseldon.com/blog/min-width-en-internet-explorer-ii/
cbp
ah, vale vale, creía que hablabas de incluir el código javascript directamente en la css que comparten todos los navegadores. si hay comentarios condicionales de por medio la cosa cambia, que la basura queda localizada.
de todas formas sigo sin tener respuesta a mi pregunta ¿por qué un ancho mínimo de 550px en un diseño líquido? si es líquido que sea líquido del todo ¿no?
orange
No tiene por qué, de hecho es una medida de "seguridad" para garantizar que la información del site pueda ser accesible de forma correcta (hay determinados diseños que necesitan un mínimo de espacio para garantizar que la maquetación no se descojona).
cbp
tampoco tiene por qué descojonarse la maquetación si lo haces bien, aunque no me atrevo a decir que sea independiente del diseño porque fijo que hay casos en que me tendría que tragar las palabras.
y si hablamos de accesibilidad también podemos citar a la gente que tiene un ángulo de visión muy reducido y posiblemente sean incapaces de manejarse con un diseño de 550px de ancho. para ellos resulta muy útil poder hacer todo muy pequeño sin que se desmaquete.
orange
Amigo mio me da que te estás tirando a la piscina sin pensártelo demasiado...
cbp
tampoco tiene por qué descojonarse la maquetación si lo haces bien
Métete en cualquier web y dime un diseño que siga cumpliendo sus funciones adecuadamente en 200px de ancho (y que no lo hagan no quiere decir para nada que no estén "bien diseñadas").
El único escenario donde vería esos tamaños "normales" es en dispositivos móviles, y para eso CSS te brinda el tema de CSS's específicas, con lo que podemos abordar diferentes presentaciones para entornos tan dispares.
cbp
y si hablamos de accesibilidad también podemos citar a la gente que tiene un ángulo de visión muy reducido y posiblemente sean incapaces de manejarse con un diseño de 550px de ancho. para ellos resulta muy útil poder hacer todo muy pequeño sin que se desmaquete.
Esto directamente creo que te lo acabas de inventar. No hay ni un checkpoint de accesibilidad que trate nada en este estilo.
Pero vamos, que si haces un diseño elástico la web siempre podrá "decrecer".
cbp
a ver, compañero, que el que se está tirando a la piscina eres tú :P
cuando quieras te enseño una página que funciona bien a 200px o a menos si te apetece. hay un problema con las imágenes de fondo, pero para eso hay una funcionalidad que las deshabilita. si lo hiciese ahora de nuevo, de hecho, el problema ni existiría porque he pasado por el aro de "el logo es una imagen en el código". el diseño acompaña, es cierto, y se hizo teniendo en cuenta que pudiese decrecer, pero eso no quita validez al hecho de que si haces todo relativo no tiene por qué cascar.
respecto al segundo punto, el problema es ese, que en los checkpoint no viene porque las WCAG son una mierda en algunas cosas, directamente. pregunta a gente, y creo que tú podrás porque seguramente conozcas, si ese problema existe y si esa es una buena solución para quien lo padece.
orange
cbp
cuando quieras te enseño una página que funciona bien a 200px o a menos si te apetece.
Veámosla... y una vez vista vamos a ver cuantas webs hay por el mundo, que todos convendremos que están bien diseñadas, y que no cabrían ni 2 palabras en 200px.
cbp
pregunta a gente... si ese problema existe
Vamos, que te has tirado a la piscina sin saber siquiera si lo que decías era una enfermedad de verdad o no
:D
cbp
eh eh eh ¿qué es eso de hacer corta-pega para que parezca que diga otra cosa? :P decía que preguntes porque yo lo he oído de gente que sí sabe que existe, gente con dispacidades que nos lo dijo una vez terminado un proyecto. vamos, que acertamos de coña.
¿que no quepan 2 palabras en 200px? eso depende del tamaño del texto ¿no?
http://cdmc.sqy.es
haz zoom hacia atrás y obvia el problema de parte de la cabecera, que tiene que ver con lo que decía antes de los logos como imágenes de fondo de css en lugar de estar presentes en el código.
txuma Plus
cbp
haz zoom hacia atrás ...
A lo mejor yo no me he enterado, pero creo que en lo que consiste la cuestión no es en hacer zoom hacia atrás, sino en como se adapta esa web si la ventana de mi navegador sólo tienen 200px de ancho. Así que creo que estáis hablando de cosas diferentes.
cbp
efectivamente, si es eso de lo que trata la cuestión sí, estábamos hablando de cosas diferentes.
de todas formas, si tu ventana sólo tiene 200px, puedes hacer zoom hacia atrás, y si está bien hecha no se descojonará :P
txuma Plus
vamos, que lo que tú estás planteando es el concepto de diseño elástico, un diseño donde las medidas de los elementos están basadas en el tamaño del texto del usuario.
cbp
justo, y de hecho la clave para hacerlo me la dió Borja hace tiempo, no me acuerdo en qué hilo. llevarlo al extremo para que todo lo que haya en pantalla dependa del tamaño del texto, incluidas las imágenes, los flash, etc.
orange
Efectivamente, la clave es conseguir un diseño elástico perfecto. Y elástico no es líquido y no necesitas que tu web se vea bien en 200px... Aquí quería yo llegar desde el principio...
;)
txuma Plus
Mira que bien, todos de acuerdo. Cuánto echaba yo de menos las disertaciones de la CSSecta :)
zigotica
ya te digo
¿que es de su vida, le lapin blanc?
cbp
jejeje, pero qué frikis sois :P
pues aquí me tiene, señor zigotica, polemizando con estos señores, que hacía ya tiempo y también lo echaba de menos ¿y usted, todo bien?
zigotica
polemizar es bueno, mientras no se ponga usted en plan "¿por que no te callas?" :)
todo bien por aqui, ampliando la familia, pim pam pum.
hartum
por si a alguien le interesa dejo la solucion js que se incluye en las CSS.
<code>
#elemento{
max-width: 100%;
min-width: 950px;
width: expression((documentElement.clientWidth <950) ? "950px" : "100%" );
}</code>
orange
Y si a alguien le importan los Explorer 5.x
<code>width: expression(((document.documentElement.clientWidth && document.documentElement.clientWidth < 950) || (document.body.clientWidth && document.body.clientWidth < 950)) ? "950px" : "auto" );
</code>
demssite
Bueno, a todo esto, el que tiró la piedra y escondió la mano vuelve a la escena....
No sé porqué no me llegó ninguna notificación al mail de que se había respondido este post y como andaba con más cosas del proyecto no me di cuen hasta que lo leí ahora.
cbp lo de ese mínimo es porque sino se me descojona el diseño. Si disminuyes el temaño de fuente ya es otro tema porque sí que está todo en unidades relativas dependientes de las fuentes, pero no era ese el caso que quería afrontar.
Un saludo
demssite
orange
Y si a alguien le importan los Explorer 5.x
<code>width: expression(((document.documentElement.clientWidth && document.documentElement.clientWidth < 950) || (document.body.clientWidth && document.body.clientWidth < 950)) ? "950px" : "auto" );
</code>
Sí importa ;-).
Una duda, no entiendo muy bien las condiciones document.documentElement.clientWidth && document.documentElement.clientWidth
¿no es lo mismo? ¿por qué se pone 2 veces? y una cosa más esto funciona sin javascript activado?
orange
Una forma es para explorer 6 y la otra para los 5.x
scuain
<code>
#elemento{
max-width: 100%;
min-width: 950px;
width: expression((documentElement.clientWidth <950) ? "950px" : "100%" );
}
</code>
Muy interesante, pero no me acaba de funcionar... Tengo
<code>#elemento{
max-width: 96em;
min-width: 76em;
}
</code>
pero si cambio el "100%" por "96em" no funciona. ¿Me puede echar alguien una mano?
orange
No entiendo qué quieres decir con que "no te funciona", ¿qué quieres hacer exactamente?