Cultura Digital#Blog

Madre mía… las peripecias que tiene uno que hacer para el navegador de los cojoncillos de nuestro amigo Gates.

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 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
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

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… , 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 …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

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í.