Bien en todos salvo IE6 e IE5.5

[dayer]

Hola. He hecho como buenamente he podido una estructuración en CSS usando capas, pero después de validar tanto el código a nivel de XHTML como de CSS, y que todo salga correcto, me encuentro con que no se visualiza como yo quiero en IExplorer 6 y 5.5 (supongo que en versiones anteriores también fallará). En Firefox, IExplorer 7, Safari y Konkeror todo se visualiza como pretendo.

La web de pruebas la tengo alojada aquí. Al tratarse de una versión de pruebas he puesto el código CSS incrustado en el propio documento. El fallo consiste en donde sale "RFID" y "Diciembre 1946", que no sé por qué en las versiones antiguas de IExplorer me salen desplazadas y juntas esas capas.

No he pegado el código porque quizás es muy extenso, y visitando el enlace se puede ver su código fuente. No obstante si alguien lo precisa lo pegaré

Agradecería si alguien me puede echar un cable o si ve algún error considerable que me lo comentara.

Un saludo

[mbavio]

Hola, he estado viendo tu sitio y me parece que antes que todo, debes cambiar tu marcado HTML, esta muy poco semántico y es muy dificil de entender. Es mas, guiandome por los nombres de algunas clases (.columna1, .columna2), creo que estas queriendo simular maquetación con tablas. ESTO ESTA MAL.

A ver, para maquetar cada caja de informacion, yo, particularmente, utilizaria el siguiente marcado:

<div class="caja">
<p class="tipo">RFID</p>
<p>F. J. González-Castaño, University of Vigo, Spain; J. García-Haro, P. Pavón-Mariño, C. López-Bravo, Polytechnic University of Cartagena, Spain; F. J. Rodríguez-González, Nortel Networks Knowledge Services EMEA</p>
<p class="titulo">Scattered Versus Shared Wavelength Path Operation, Application to Output Buffered Optical Packet Switches. A comparative Study</p>
<p>International Symposium on Performance Evaluation of Computer and Telecommunication Systems (SPECTS)</p>
<ul>
<li><span>ISSN: 0163-6804</span></li>
<li><span>ISBN: 1-56555-300-4</span></li>
<li><span>Diciembre 1946</span></li>
</ul>
<p><a href="masdetalles.html">Mas detalles</a></p>
</div>

Ese sería el codigo. Ahora en la proxima entrega veremos el CSS, jaja, no mentira, aguantame 5 minutos y lo pongo tambien. Saludos.

[mbavio]

Bueno, veamos como podria ser el CSS ahora. Voy a darte algunas pistas, porque sino no tiene gracias esto :)
El parrafo de clase tipo (.tipo) deberias ubicarlo en el lugar donde esta aplicando posicionamiento absoluto, con top: 0 y right: 0. Recuerda de poner position: relativo en su padre (o sea el div .caja) para que se ubique con respecto a este.
Luego los margenes entré los parrafos son pan comido, recuerda no ponerles a los parrafos tanto ancho, asi nunca superan la línea de el parrafo .tipo.
Por ultimo, la lista deberias encararla de la siguiente forma:

- a los elementos de lista li, les pones float: left;
- a los elementos interiores a li, span, les pones display:block, y le asignas a cada uno un 33% del ancho.
- por ultimo, a ul le pones overflow: auto para que cubra todos los elementos flotados.

Por ultimo, a el ultimo vinculo dentro del parrafo, .masdetalles, le asignas display: block para que ocupe toda la linea.

Bueno, te he dado las pistas mayores, dejo los detalles para vos.
Espero que pueda haberte ayudado.
Saludos.

[dayer]

Hola de nuevo, claro que me has ayudado, de hecho voy ya mismo a hacer experimentos a ver que tal. A veces creo que esto de la maquetación requiere mucha más práctica que la programación:$

Muchas gracias, a ver qué me sale de la idea :)

[dayer]

Hola otra vez, con tus sabios consejos que cambiado lo que te enseñé. Yo comprendo que no se tenga que usar la misma definición que en una tabla, pero no se me ocurren ya más formas de estructurar la información para que tenga un aspecto similar a una fichita. Bueno quizás si, podría poner lo de "RFID" encima del título, ocupando todo lo ancho de los párrafos y en un color diferente para que destace (se trata de un atributo de las fichas que es importante destacar). Por este hecho de destacarlo, precisamente, lo he etiquetado con H4 (porque lo pondré bajo el menú, el cual contiene H1, H2 y H3), y si la web es vista sin hojas de estilo me interesa que "RFID" se destaque del resto del texto siendo tratado como un encabezado.

He puesto mi experimento aquí.

Todo me ha resultado muy liviano, la verdad que no sé cómo me había podido complicar tanto creando tropecientas capas. Aunque esa parte en la que salen los tres iconos del pdf, editar y borrar me ha dado problemas porque no sabía como semantizarlo. Los he puesto en una lista dado que son las tres opciones principales que se permiten realizar, pero "mas detalles" lo he incluido en esa lista porque no he sabido como dejarlo a la izquierda y ubicar a su derecha la lista de las tres opciones, que con posicionamiento absoluto no me servía al no poder saber que altura tendrá cada ficha (la información se colocará de manera dinámica). Por cierto, con esta sencillez, que seguro que es más simplificable, ya se me ve idéntico en todos los navegadores

[mbavio]

Me alegro que hayas podido encontrarle la vuelta, la verdad es que yo lo he visto perfecto a tu experimento!
Recuerda siempre, antes de ponerte a diseñar visualmente, armar tu contenido pensando semanticamente, o sea, pensando que significa cada elemento que quieres introducir. Luego le das los estilos visuales.
Vas a ver como se te van a simplificar las cosas asi, además de permitir que gente que navegue de otras maneras (navegadores de texto, o auditivos) puedan entender lo que realmente has querido dar a conocer.
Saludos, y hasta la proxima.

[dayer]

Ya si así lo intenté primeramente, pero me lié demasiado creando y venga a crear unas capas para agrupar a otras, pero eso al final me hizo tener más y mas líneas para elementos que se podían ubicar jugando correctamente con las dimensiones y sobre todo con las posiciones jeje. Lo de la accesibilidad es muy cierto, hay gente que se olvida de gente que usa "otros" navegadores o que está desde linux en modo consola:)

Un saludo y muchas gracias por todo