Nuevo rediseño (que supongo me traeré aquí algo modificado) de la web de La Guardia basado en un theme -con marcado basura pero que me gustaba mucho- de Askgraphics.com (más tarde hablo de ello).

Pues bien, comienzo

el rediseño del sitio:

Quito todas las tablas (son decorativas basicamente) de ese theme empezando por un header (cabecera) a mi gusto y la temática del sitio: La Guardia, puerta de culturas. Un theme plagado de tablas… pero plagado de verdad y acusando “divitis” (como le llama J. Zeldman):

La diferencia entre “marcado basura” y marcado semántico, usable y válido:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

						</td>
						<td>
							&nbsp;&nbsp;&nbsp;&nbsp;
						</td>
 
						<td valign="top">
 
							<table cellpadding="0" cellspacing="0">
								<tr>
									<td valign="top">
 
										<div class="title">
											<a href="[PHP] the_permalink();[/PHP]">[PHP] the_title();[/PHP]</a>
										</div>
 
										<div class="subtitle">
											Publicado por (<em>[PHP] the_author();[/PHP]</em>) en 
[PHP] the_category(', ');[/PHP] el [PHP] the_time('j/F/Y');[/PHP]
										</div>
 
									</td>
								</tr>
								<tr>
									<td class="item_line">
									</td>
								</tr>
								<tr>
									<td>
 
										<div class="text">
										[PHP] the_content('Read the rest of this entry &raquo;');[/PHP]
										</div>
 
									</td>
								</tr>

Qué le pasa a la gente????, no saben que existen, desde que los documentos web los son, LOS TÍTULOOOS h3,h4.....hasta hn! madre mía…

Mejor así, sin tablas y la mitad -o menos- de marcado, esto! es el poder de CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!--the post-->
					<h3 class="post_title">
					<a href="[PHP] the_permalink();[/PHP]" rel="bookmark">[PHP] the_title();[/PHP]</a> 
					<em class="small">([PHP] edit_post_link(__('e'));[/PHP])</em></h3>
 
 
					<h4 class="post_subtitle">[PHP] _e("Filed under:");[/PHP] [PHP] the_category(',');[/PHP] [PHP] _e('by');[/PHP] 
					[PHP] the_author();[/PHP] @ < =? the_time('d/m/Y'."&#8212;".'h:m');[/PHP]h.</h4>
 
					<!--Esto necesita un DIV porque no tiene porqué ser un párrafo-->
					<div class="post_text">
						[PHP] the_content('Leer el resto de la entrada &raquo;');[/PHP]
					</div>

Pruebas en Navegadores:

Pues eso, comienzo el diseño CSS mirando el resultado en Firefox, Epiphany (Gnome), Konqueror (KDE) y Opera… todo perfecto con un solo diseño pero ya estaba temiendo probarlo en IE.
Aún no tenía IEs4Linux, un paquete para Linux -uso Ubuntu Feisty- que te instala wine (ya lo tenía) junto con Explorer 5.0,5.1,5.5 y 6.0 todos con sus SP correspondientes -si así lo deseas-.

I.E

Así que cruzo los dedos y… ggg :D no, no es una sorpresa porque siempre pasa igual:
La cabecera abajo, una barra lateral a su bola pululando por el footer, un pantallón de 2.000 píxeles de ancho gggg :mrgreen:
bueno no, en serio:
Típico en IE se hace un lío con los anchos y los espaciados así que la barra lateral no cogía con los anchos “estándar” y se había venido abajo, pocos fallos a decir verdad para lo que esperaba… habré mejorado?? gg 8)

Ajustando el Menú para IE:

Bien, ajusto los anchos, márgenes y demás de acuerdo al “modelo de cuadro” personal de IE, caprichoso como siempre, pero aún los flotantes no actúan como deben, la barra lateral se estructura:

• Un div superior de estilo para una cabecera de la barra… :oops: , sí, no todo iba a ser perfecto :(
• Un div contenedor del contenido de la barra y relleno de estilo.
• Un par de listas izquierda y derecha ambas flotadas para llegar hasta la cabecera. NO HACE FALTA DOS DIVS, si son listas pos usamos UL LI , que para eso están, y no pecamos de divitis!
• Un div de pie de estilo :oops: …pos eso.

Sencillo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!--abriendo estilo sidebar-->
	<div id="sidebar_top"></div>
 
	<!--sidebar-->
	<div id="sidebar">
 
		<ul id="sidebar_right"></ul>
		[...]
		<ul id="sidebar_left"></ul>
 
		<!--cerrando estilo sidebar-->
		<div id="sidebar_end"></div>
 
 
	</div>
	<!--end sidebar-->

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#sidebar_top {
	float:right;
	width:372px;
	height:90px;
	margin:-90px 10px 0px 0px;
	background:url(images/sidebar_top.png) no-repeat top;
}
 
#sidebar {
	float:right;
	width:372px;
	margin:0px 10px 0px 0px;
	background:url(images/sidebar_bg.png) repeat-y top;
}
 
[...]
#sidebar_right {
	float:right;
	width:36%;
	margin-top:-80px;
	margin-right:5px;
}
 
#sidebar_left {
	width:50%;
	margin-top:-80px;
	padding-left:30px;
}

Los problemas de I.E. con “float” y el modo “quirks”:

Bien, pasan dos o tres cosas con IE:
Lo primero es que la sidebar de contenido #sidebar es más grande que la cabecera, esto es debido al “modelo de cuadro” no estándar de IE5 e IE6 en modo “quirks” -compatibilidad inversa-:

• El ancho de un cuadro para IE es lo que se especifica con la propiedad width, el margen, el borde y el espaciado entran en ese tamaño.
  Y el estándar del W3C dice que el ancho es:
  El contenido (width) + el espaciado (padding) + el borde (border) + el margen (margin).
  Así, para IE la sidebar tiene 10 píxeles más de los que debería tener que salen del margen derecho.
• La sidebar no consigue solaparse con la sidebar_top pese a que está flotada con sus márgenes y espaciados, que debería ser (y de hecho lo es en el resto de navegadores) lo que coloca el cuadro.
• Por esta regla de 3 las dos listas flotadas tampoco consiguen ascender a la cabecera (sidebar_top) y solapa a su “padre” (elemento padre: sidebar).

Solución:

Especificar, no sé muy bien porqué porque ya lo son por defecto y más aún estando flotadas y sin posiciones absolutas como top: left:, la posición relativa de los flotantes y establecer un nivel de solapamiento entre ellas: z-index.

Código para el niño bonito y mal criado de IE:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

#sidebar {
	float:right;
	width:362px; /* 10px menos que el sidebar_top por el margen derecho de 10 px */
	margin:0px 10px 0px 0px;
	background:url(images/sidebar_bg.png) repeat-y top;
	/* Superponemos la sidebar al elemento inicial flotado */
	position:relative;
	z-index:2;
}
 
#sidebar_right {
	float:right;
	width:50%;
	margin-right:5px;
	padding-left:30px;
	/* Superponemos las listas a su padre sidebar */
	margin-top:-80px;
	position:relative;
	z-index:3;
}
 
#sidebar_left {
	width:100%;
	padding-left:30px;
	/* Superponemos las listas a su padre sidebar */
	margin-top:-80px;
	position:relative;
	z-index:3;
}

Conclusiones:

Lo que ocurre, imagino, es que I.Exporer va situando en niveles de solapamiento los elementos flotantes en el orden que van generándose y les da prioridad en ese mismo orden, no le importa la posición que se especifica y necesita que le repitamos que tiene posición relativa.

En cierto modo puede ser lógico la forma que tiene IE de ver el “modelo de cuadro” y de los elementos flotantes… aún así, vuelve a ser el único que actúa de esta manera, el resto: Firefox, Mozilla, Netscape, Epiphany (vale, todos son Geckko ^^), Konqueror, Opera… no, porque aceptan los estándares.
Microsoft ha cambiado mucho desde que apareció Firefox, y no niego que hayan intentado adaptarse como han podido pero nunca, me temo, lo han considerado seriamente hasta IE7, o lo que es lo mismo, hasta que lo han necesitado urgentemente.

Ha pasado dos veces hasta la fecha y en ambas ocasiones para dar un golpe a la competencia:

• Con IE4 para luchar contra Netscape en la Guerra de los Navegadores.
• Con IE7 para luchar contra Firefox.

Ya me he relajao :D

Review:

Después de ese diseño, el sitio sufrió varios más aunque usa la versión de lo comentado en esta entrada.

Evidentemente había muchas cosas que no sabía, no recordaba o pasé por alto cosas como la conmutación de DOCTYPE por parte de IE6 en relación a la especificación XML de un documento XHTML… esto es: básicamente, si declaras tu documento como XML IE6 activa automáticamente el modo “quirks” de compatibilidad inversa.
Es decir: su modelo de cuadro será el antiguo por ejemplo y otra serie de comportamientos que intentan mitigar los fallos de navegadores antiguos (ej. IE5), o sea, que es casi una odisea saber como I.E. interpretará el código.

Algunos hacks para los flotantes en IE6, por ejemplo la propiedad display:inline; en flotantes para forzar a I.E. el flotado ^^ …y otras cosillas que ya pondré otro día por ahí.