Expresando TI

CSS completado 10 años de existencia este año! Los que han estado alrededor por un tiempo, ganarse el pan (o no) el uso de CSS, entonces usted puede conocer la forma en que se han muerto de hambre de una buena selección de fuentes. A pesar de la falta de fuentes de diseñadores como los de CSS Zen Garden han hecho uso de imágenes de fondo CSS para reemplazar las fuentes en la búsqueda de hacer algo de justicia a sus designios. También hemos tratado de Flash / JavaScript hacks ® para lograr nuestros objetivos de diseño. De ninguna manera este es un camino equivocado para conseguir las fuentes que deseamos en nuestros diseños web, pero definitivamente, no es la manera más conveniente. y el diseñador de páginas web en años, como yo, plenamente confiado en una decena de tipos de letra para sus diseños.

Los acontecimientos recientes en los estándares web y los formatos de fuente que sea posible, para representar el texto HTML en otros tipos de letra de las fuentes predeterminadas de siempre. Viene en el "@ tipo de fuente" decleration CSS.

@ Fontface provids una solución para enlazar con el archivo real de la fuente y recuperar desde la web. El uso de @ tipo de fuente, los diseñadores pueden utilizar fuentes sin tener que congelar el texto como imágenes de fondo. La aplicación es muy sencilla, como se muestra a continuación, pero como todas las cosas buenas tienen un papel CON para, no todos los navegadores son compatibles con un solo "tipo de fuente". Si usted está planeando utilizar fontface @ en el sitio con el apoyo que requiere navegador de la Cruz, entonces usted tendrá que proporcionar fuentes de diversos tipos de fuentes de la misma.

1. TrueType - Es un formato diseñado para verse bien en pantalla. Recomendado especialmente para los navegadores de Windows (Chrome).
2. OpenType (CFF) - Este formato es mejor para el trabajo de impresión y no siempre se ven bien en Windows.
3. EOT - Usted necesita este formato si desea orientar su campaña de Internet Explorer. IE no va a usar cualquier otro formato. El EOT se considera "Lite", ya que no son ni comprimido ni de dominio restringido.
4. SVG - Este es un formato XML compatible con algunos exploradores, incluyendo el iPhone.
5. WOFF - Este cross-browser, sólo por Internet formato de la fuente es de peso ligero (datos de la fuente es comprimido zip) y puede ser compilado con TrueType o PostScript describe (CFF). En la actualidad está soportado por Firefox 3.6 +.

El uso de @ fontface

  @ Font-face {
 font-family: "CalligraphyFLFRegular ';
 src: url ('CalligraphyFLF.eot');
 src: local ("CalligraphyFLF '), locales (" CalligraphyFLF'), url ('CalligraphyFLF.woff') formato ('WOFF'), url ('CalligraphyFLF.ttf') formato ('truetype'), url ('CalligraphyFLF . svg # CalligraphyFLF ') formato (' svg ');
 }
 @ Font-face {
   font-family: "Su tipo de letra";
   src: url ("fonts / font_filename.eot");
   src: local ("nombre alternativo"), locales ("Alternatename"),
     url ("fonts / font_filename.woff") en formato ("WOFF"),
     url ("fonts / font_filename.otf") en formato ("OpenType"),
     url ("fonts / font_filename.svg font_filename #") en formato ("SVG");
   }
 h2 {font-family: "Su tipo de letra", Georgia, serif;} 

Como se puede ver en el ejemplo anterior, para incluir el tipo de letra elegido, uno tiene que vincular a un conjunto de fonttypes para el mismo tipo de letra. Por lo tanto la gente se refiere a ella como "Kit de Fuentes".
Hay kits disponibles de fuentes que explícitamente permite la vinculación con la CSS @ font-face la propiedad en virtud del Contrato de Licencia de Usuario Final (EULA).

Recursos útiles WebFont:

• Las fuentes disponibles para @ font-face incrustación de la página wiki en http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Él es un diseñador de la fuente de renombre que ha realizado cientos de interesantes fuentes TrueType libremente disponibles para su uso en la web. Sus fuentes son elegantes, decorativas, y juguetón.
• Dieter Steffmann es otro gran diseñador de la fuente. Él también ha hecho muchas fuentes hermosas disponibles para que cualquiera lo use.
• Tienda de Fuente : ofrece fuentes diseñadas específicamente para uso en la web. Más de 30 de las familias FontFont más exitosos están ahora disponibles como FontFonts Web. FontShop también tiene un usuario detallada guía de WebFont http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Ardilla Fuente : Exhibe todas las fuentes que la ardilla fuente ofrece para su uso con @ font-face incrustación de CSS. Ardilla Fuente ofrece una cantidad impresionante de tipo, hace que sea fácil de muertos elegir uno, ya mano ofrece "kits" - el tipo de letra de su elección, en varios formatos, que vienen con demostración de HTML y CSS que usa muy actual @ font-face la sintaxis . Ellos también ofrecen una manera de hacer sus propias @ font-face kits . Si el tipo de letra que desea utilizar tiene licencia apropiada (los que vienen con la computadora no son necesariamente bien), el generador produce EOT, SVG, y hey! Archivos WOFF.

Otro tut rápida. Aquí hay algo sencillo y agradable usar el poder del CSS ... pero era concibian difícil (y seguramente no era yo), para empezar. Adición de Sombra, podría ser un pedazo de pastel para muchos de nosotros, usando algunas herramientas de edición de imágenes como Photoshop ANF fuegos artificiales, etc
La razón por la cual, he optado por el uso de CSS sombra es que, por lo general, mientras que la creación de un diseño de página / HTML de una aplicación, los requisitos de mantener la iteración. Lo que quiero decir es, en un sitio web existente con muchas imágenes, como las que muestran la lista freinds o una galería de imágenes, que será difícil volver a procesar toda la carga de las imágenes que ya habían sido descargadas para agregar o quitar las sombras, para que materia.
Así que si usted ha hecho un poco de visión de futuro al crear los htmls para añadir estas divisiones adicionales o por lo general la situación es que usted tiene una lógica de bucle generación de estos iconos o imágenes en miniatura en XSL, PHP. Java o cualquier otro lenguaje de programación / scripting, se puede añadir en cualquier momento, entonces es sólo la cuestión de mostrar y ocultar las sombras mediante la propiedad CSS Display, de acuerdo con las cambiantes necesidades de los clientes cada vez ... yo no te has hecho este tipo de visión de futuro antes de esto ... pero ahev empieza ya!

En el siguiente ejemplo, la imagen original es libre de sombras y los dropshadows se aplican según sea necesario! Además, he ido un poco más, mediante el uso de los trucos de mi anterior Tut (bien! estos probablemente son las más cortas variedad de tutoriales, por lo que sólo se justifica que califica de "Tut" 's) sobre uso de la propiedad CSS clip para mostrar sólo

Imagen original

CSS Resultados DropShadow

Ver demo | Descargar SourceFiles

¿Por qué quiero entender esto?? Humm ...!!

La mayoría de los escritores CSS de acuerdo en que la propiedad CSS clip es probablemente uno de la mayoría de los productos no utilizados de las propiedades CSS. Era tan real para mí también, y era el más feliz de olvidar, hasta que empecé a modificar el MooTools DOS Perilla (Pin) de componente Slider (con indicador de la gama) .

Hubo una buena sugerencia de uno de los usuarios de los componentes para modificar el componente Slider utilizando imágenes recortadas backgroud (contra una división de ancho variable) para indicar el rango deslizador. Así llegó el tiempo para entrar en la diversión, pero inexplorado de (para mi por supuesto) a las aguas de la propiedad Clip CSS.

Bueno! lo difícil que puede ser? No mucho ... SI y NO. La sintaxis para usar la propiedad CSS clip es bastante vertical, pero el significado / usuage es un poco croocked. Con una memoria como la mía, cada vez que me siento a trabajar en el guión de mi deslizante ... tengo tokeep refiriéndose al uso de esta propiedad CLIP, para recordarme a mí mismo la lógica que he creado en mi guión .... POR LO TANTO! cree que la pluma hacia abajo, con la esperanza de recordar que el futuro (y también para el beneficio de aquellos que parecen aturdida por la propiedad CSS clip)

¿Qué Clip CSS hacer?

Clip es parte del módulo de efectos visuales de CSS 2.1. En pocas palabras, su trabajo consiste en colocar una ventana visible en la parte superior de un objeto que está siendo cortado, por lo tanto, recortar imágenes y crear miniaturas sin tener que crear archivos adicionales (ya he puesto esta función para un mejor aprovechamiento en el componente Slider )

Uso de la propiedad Clip de CSS, puede crear un recorte con la forma rect. Al igual que muchas otras propiedades CSS (como el relleno, etc margen), utilizando rect requiere cuatro coordenadas Superior, Inferior Derecha, Izquierda (FALLO). La naturaleza croocked de esta propiedad refleja el momento en que eche un vistazo más de cerca cómo se calcula clip de la región de recorte, el uso de estos cuatro coordenadas (envía el cerebro en un sorteo por un tiempo). Ahora, para confundir a la parte inferior se inicia desde la parte superior, y el derecho se inicia desde la izquierda. . ¿Ves lo que te dije? .... Por lo tanto este post ...

Este poco de confusión pueden desaparecer fácilmente, con esta explicación visual de la CSS Clip / rect propiedad como de abajo!!

CSS Requisitos Clip

La tarea que hemos comenzado es para recortar la imagen en miniatura siguiente en una imagen más cuadrada buscando (y también una imagen de gran angular)

Thumbnal original / imagen	Requisitos para el clip Sqaure Thumbmail

CSS Resultados Clip

Ver demo | Descargar SourceFiles

Antes de que tuvo que lidiar con CSS para crear nuestros diseños de página, la alineación de algunos contenidos dentro de una celda de la tabla parecía jugar solo niño. Basta con establecer la "alineación" o "valign" propiedad de la tabla para tener la alineación de su elección, pedazo de la torta!
Con diseños de CSS, aunque tenemos "vertical-align" de propiedad de los elementos, no parece ser tan simple como la "alineación" o "valign" propiedades. Para ser más specifiic la "vertical-align" no parece resolver ninguno de tus problemas, especialmente si se escribe un trozo de CSS cross-browser.

Sin el uso de tablas HTML, El problema de centrar en el objeto, ya sea una imagen o un texto dentro de una división que contiene, probablemente ha sido una pesadilla toda la interfaz de usuario / CSS desarrolladores en algún momento. Este problema adicional extrapola sus preocupaciones de la alineación, si el objeto a ser centrado es de naturaleza dinámica, es decir, cuando su altura es variable (altura desconocido).

Aunque no existe una solución conocida sencillo que funcione en toda la gama de navegadores que tenemos que tratar, la solución que he tratado de llegar a parece a trabajar en los pocos navegadores que he probado en (IE6, IE7 , FF).

SOLUCIÓN:
En los navegadores como Mozilla, Opera y Safari, El extraño comportamiento "vertical-align" la propiedad puede ser llevado a sus sentidos, simplemente mediante el establecimiento de la "pantalla" de propiedad de la división que contiene a "table-cell" (display: table-cell) .

El problema sigue siendo con la familia de navegadores Internet Explorer, que, sin embargo, no parecen entender lo que con el "table-cell" de propiedad e ignorantes como son, que simplemente lo ignoran. La solución dada a continuación, aunque simples, los anuncios de algunos elementos más a su DOM HTML para hacer que las cosas sucedan.

El CSS y HTML se ve así
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> vistas: 3456 </ div>
</ Div>
</ Div>

El resultado es el siguiente: -

ver la demo aquí | Descargar archivos de origen (Descargado 454 veces)

TOP Alinear CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> puntos de vista: 1234 </ div>
</ Div>
</ Div>

El resultado es el siguiente: -

FONDO Alinear CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> puntos de vista: 1234 </ div>
</ Div>
</ Div>

El resultado es el siguiente: -

ver la demo aquí | Descargue aquí

Parece que las edades, ya que yo estaba tratando de encontrar una solución razonable a este problema de alineación. Pero ahora, con esta solución, me siento en paz pequeña.

Con la esperanza de que algún día

• la alineación vertical de la propiedad en CSS funciona como lo hace dentro de una celda de la tabla, SIN tener que vencer tanto por las ramas
• Por lo menos, el establecimiento de margin-top: auto y margin-bottom: auto, dará como resultado lo mismo que con el margen izquierdo y el conjunto margin-right para auto
• Las guerras del navegador será de más de un día.
• Habrá un solo navegador para TODOS.

Descarga el CSS y HTML de la solución por encima de aquí (Descargado 454 veces) .. para la comprensión, la CSS no se ha optimizado

PD: Y por cierto, esas son las miniaturas de algunas fotos que han hecho clic ...

Si su requerimiento es para dividir un valor de nodo de un XML, que contiene una cadena delimitada del valor, en términos individuales, entonces has llegado al lugar correcto ... echar un vistazo a el siguiente ejemplo. Si usted está familiarizado con un poco de XML y XSL ... No creo que usted tendría que dar ninguna explicación.
Además, este ejemplo incluye el uso de funciones como el XSL xsl: call-template, xsl: substring-before, xsl: substring-after, si eso es lo que está después.

XML para ser transformado (food.xml): -
Supongamos que la tarea es para acortar la cadena delimitada por comas, en los de la etiqueta "palabras clave"

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<keywords>Fruits, Vegetables, Pulses, Meat, Cereals </keywords>
</food>

XSL (food.xsl): -

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XSL 1.0 Delimited String Tokeniser</title>
</head>
<body>
<xsl:value-of select="food/meta"/>
<div >
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="food/keywords" />
<xsl:with-param name="delimitr" select="','" />
</xsl:call-template>
</div>
</body>
</html>
</xsl:template>
<xsl:template name="tokenize">
<xsl:param name="string" />
<xsl:param name="delimitr" />
<xsl:choose>
<xsl:when test="contains($string, $delimitr)">
<div style="border:1px solid red;">
<h3><xsl:value-of select="substring-before($string,$delimitr)" /></h3>
<xsl:variable name="data" select="substring-before($string,$delimitr)"/>
</div>
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="substring-after($string, $delimitr)" /><xsl:with-param name="delimitr" select="$delimitr" /></xsl:call-template>
</xsl:when>
<xsl:otherwise>
<div style="border:1px solid red;">
<h3><xsl:value-of select="$string" /></h3>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Resultante de salida HTML: -

<div>
<div style="border: 1px solid red;">
<h3>Fruits</h3>
</div>
<div style="border: 1px solid red;">
<h3> Vegetables</h3>
</div>
<div style="border: 1px solid red;">
<h3> Pulses</h3>
</div>
<div style="border: 1px solid red;">
<h3> Meat</h3>
</div>
<div style="border: 1px solid red;">
<h3> Cereals </h3>
</div>
</div>

Ni que decir ... solo cambiar el parámetro "delimitr" para el delimitador de su elección

Si alguna vez has hecho (o hacer uno) un menú vertical con elementos de la lista (li) y las etiquetas de CSS, puede encontrarse con este otro error en Internet Explorer, IE 6, donde se inserta la brecha entre los elementos de la lista que contienen los elementos a nivel de bloque, es decir, si hay algún espacio en blanco entre los elementos de la lista en el marcado. Gracias, pero no, la versión de Internet Explorer 7 parece libre de este error.
Si como yo, y muchos más, usted pertenece a este grupo de desarrolladores frustrados, que aún tienen que conseguir sus nuevos diseños, que trabajan en IE6 también, entonces esto podría resultar útil. ¡Echa un vistazo ...

Ejemplo de marcado:

<ul id="menu">
<li> <a href="#"> Inicio </ a> </ li>
<li> <a href="#"> Acerca de </ a> </ li>
<li> <a href="#"> Servicios </ a> </ li>
<li> <a href="#"> cartera </ a> </ li>
<li> <a href="#"> Ayuda </ a> </ li>
<li> <a href="#"> Contacte con nosotros </ a> </ li>
</ Ul>

Usted puede crear un poco de CSS, similar a la de abajo, para transformar la margen anterior en un menú vertical ....

Muestra CSS ...
# Menu {
margin: 0; padding: 0; fondo: # FF9900;
list-style-type: none; ancho: 150px;
}
# Menu li {margin: 0; padding: 0;}
# Menu a {display: block;
color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Los resultados que usted verá ...

Solución para este error ... (modificado / añadido CSS en negrita y cursiva)

# Menu {
margin: 0; padding: 0; fondo: # FF9900; list-style-type: none; ancho: 150px;
float: left; / * esto contiene elementos flotantes de la lista * /
}
# Menu li {
margin: 0; padding: 0;
float: left; / * Esto fija el * /
width: 100%; / * espacio en blanco bug en IE6 * /
}
# Menu {un
display: block; color: # 555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom: 1px solid # FFF;
}

Si la solución anterior doesnot parecen funcionar (por razones conocidas sólo IE6) ... probar este método en lugar

Sólo tiene que añadir estos otros estilos sólo IE6 de su margen de beneficio ...

<- [If lt IE 7>
<style type="text/css">
# Menu li a {display: inline-block;}
# Menu li a {display: block;}
</ Style>
<[Endif] ->

Si XML / XSL transforma es su domian, entonces hay momentos en los que quieren un pedazo de código dinámico para ser utilizado elemento de la biblioteca (que se hizo re-utilizables). Lo que quiero decir, probablemente podría ser más claro con este escenario de ejemplo.

Imagínese que usted está creando un sitio web (y el uso de XML, XSL transfroms por supuesto) y la mayoría de las páginas que tienen un módulo de comentarios. Bueno! entonces o bien copiar o pegar este código en todas las plantillas de página (que yo no tienen voz, pero que el mantenimiento y la modificación de un pesadilla) o mejor aún, crear un archivo de inclusión que puede ser tirado en donde quiera que usted lo desea en su página ( s) ...
Así que ¿cómo podemos crear un archivo XSL INCLUDE e incluirlo dentro de otro archivo XSL? Aquí es cómo ...

Sólo para dejar las cosas claras ... aquí está la lista rápida de los archivos que usted crea ... aquí, estaremos incluyendo información acerca de las frutas y verduras en una página principal llamada de los alimentos.

1. food.xml - archivo de datos XML en el que se aplica la transformación
2. food.xsl - principal archivo XSL que transformará nuestra food.xml
3. inc_fruits.xsl - XSL archivo de inclusión que se procesan los datos de las frutas
4. inc_vegtables.xsl - XSL archivo de inclusión que se procesan los datos vetetables

No creo que tengo que explicar mucho, los códigos de los elementos anteriores, se explica por sí mismo ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ Xsl: template>
</ Xsl: stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Descargar todos los archivos anteriores aquí (256 descargas)

Nota IE 6, MSIE ha sido lo suficientemente amable para los desarrolladores de la interfaz de usuario mediante la adición de un poco más de las propiedades CSS estándar para la mayoría de los otros navegadores estándar. Una de estas propiedades útiles en "min-height". La propiedad bastante sencillo que no necesita explicación largo aliento. Cuando un min-height de una división se establece, se conserva siempre que la altura de juego cuando el contenido que alberga ocupa menos de lo que puede sostener y esto es importante (a diferencia del plain vanilla "altura" de la propiedad) las escalas o, dicho de CSS, se comporta como un cuya división de "altura" está ajustado en "auto" ...

Para algunos de nosotros los desarrolladores de pobres, que todavía se requieren para el código CSS que también deben trabajar en IE6, sin disponibilidad de la "min-height", podría convertirse en un tapón de la demostración en algún momento ... la desesperación Donot.

Afortunadamente, tenemos bastantes peculiaridades de IE, que se utilizan en beneficio de salir y cortar el camino a través de llegar a nuestro objetivo ... es decir, hacer una división DIVISIÓN como si su min-height en IE6

Solución 1: Uso del Hack subrayado [ ... Leer más ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>

---

Solución 2: Utilizar el atributo CSS Selector de Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>


El atributo CSS Selector de Hack se aprovecha del hecho de los navegadores IE6 antes del tha ignorado un atributo físico-selector. Tenga en cuenta el requisito de la otra división de contenedores con class = "SomeClass". Sólo el presense del atributo de clase de esta división, anula la altura del respaldo automático para Opera, Mozilla y MSIE7 y posteriores. IE6, que no es compatible con los selectores de atributo físico, lo ignora.

Ver demostración del truco min-height para IE6

Si utiliza XML y XSL, a continuación, que podría haber llegado a través de un tiempo, cuando se tiene que jugar un poco con los atributos y valores de los nodos XML que XSL. Son un montón de sitios con información acerca de este largo aliento, pero no encontré fueron breves y precisos ... Esto no es una TUTORIAL XML / XSL, pero mi intento de poner en conjunto-una especie de lista de trucos ...

El XML de ejemplo que vamos a trabajar con este aspecto ...

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>
</food>

Así que vamos a empezar a transformar nuestra por encima de XML con XSL

Ejemplo 1: Visualización de valor en un atributo seleccionado

<xsl:value-of select="/food/fruits/item[@name='orange']" /><br />
to get more information about <a href="{/food/fruits/item[@name='orange']/@moreinfo}" target="new" ><xsl:value-of select="/food/fruits/item[@name='orange']/@name" /> </a>

Resultado HTML se verá así

Orange is the color and rich in vitamin C,
to get more information about <a href="http://www.orange.com" target="new">

Ejemplo 2: a través de bucle y la visualización de todos los nombres de atributos XML y sus valores

<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>,
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>

Resultado HTML se verá así


attribute name : name, attribute value : mango
attribute name : moreinfo, attribute value : http://www.mango.com
attribute name : name, attribute value : banana
attribute name : moreinfo, attribute value : http://www.banana.com
attribute name : name, attribute value : orange
attribute name : moreinfo, attribute value : http://www.orange.com
attribute name : name, attribute value : Papaya
attribute name : moreinfo, attribute value : http://www.papaya.com


Mire este espacio, voy a seguir actualizando este con los nuevos descubrimientos ...

Un reajuste CSS / CSS son para establecer una serie de estilos de los elementos de una línea de base específica que crea consistencia a través de diferentes navegadores.

Todos hemos sido a través de las pesadillas de la escritura de cross-browser CSS. Así que cuando comenzamos a escribir el código CSS, es una práctica para restablecer en primer lugar, para eliminar / restaurar las incoherencias en cualquier navegador. Restablece CSS, son simples líneas de CSS que usted comienza su CSS, dándole una base limpia para empezar a construir su sobre.

Los reajustes de CSS que normalmente tienden a utilizar este aspecto

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ul ol {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

Restablecer el tamaño de fuente del navegador
También tenga en cuenta el reajuste que se ha aplicado al tamaño del navegador de fuente en la siguiente línea ...

html {font-size: 76%;}

Lo anterior se restablece el código CSS del tamaño de la fuente del navegador de 10 píxeles, y esto hace que sea posible trabajar con tamaños de fuente relativos (que es todo importante desde el cumplimiento de prespectiva WAI)
Por ejemplo, en la siguiente definición, tamaño de fuente en un lapso es de 10 píxeles, y que en el paragarph se establece en 14 píxeles ...

span {font-size: 1em;}
p {font-size: 1.4em;}