Re: [Ovillo] IE no dibuja bien las capas

2006-11-06 Por tema Maikel Naigt
Hola Nidia. Veamos tus problemas tras tu solicitud de ayuda.

On 11/3/06, Nidia Fernandez Martinez [EMAIL PROTECTED] wrote:

 Hola,

 Estoy trabajando en la siguiente web:
 http://www.efeyl.org/pruebas/EFEYLBATALLITAS/index.php

 En Firefox se ve perfectamente, tal y como debería verse según el código
 escrito. La estructura del sitio es más o menos así:

 body
   div id=todo
 div id=banner/div
 div id=borde_cuadros/div
 div id=menuycuerpo
   div class=menu/div
   div id=cuerpo
 div class=contenedor
   div class=texto/div
 /div
   /div
   div id=pie/div
 /div
   /div
 /body

 Sin embargo en IE ignora la capa menuycuerpo por completo. Se nota
 porque
 el menú no tiene separación con el banner, y el cuerpo está a otra altura
 distinta. Además, no sé por qué misteriosas razones, no se dibujan los
 bordes superiores del contenido bien. Copio y pego aquí la hoja de
 estilos,
 por si a alguien le interesa:


El problema que te surge de que el menú te aparezca pegado a la cenefa de
cuadros superior se debe a que no le indicas ningún margen. Te pego la parte
de la hoja de estilos más o menos por el final de la misma.

/* common styling */
...
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; position:relative; padding:0; margin:0;}
...

Evidentemente, estos 'margin:0' nos sobreescriben cualesquiera que hubiera
con anterioridad, haciendo que el bloque del menú este junto a la cenefa.

En cuanto al segundo problema es un poco más complicado de comprender, y
está relacionado directamente con una propiedad 'Made in M$' denominada
'hasLayout' [1] y que le indica al motor de IE cuándo un bloque es etéreo
como las nubes del anuncio de las compresas (valor false) y cuándo deberá
ser sólido y fuerte como la espada del Cid (valor true). Seguramente ya
hayas adivinado que tu bloque fantasma ha sido elegido como 'hasLayout' en
'false'. Necesitaremos pues revertir esta situación, aunque existe un
problemilla, y es que la propiedad 'hasLayout' no es 'escribible' si no que
se sitúa en uno u otro estado dependiendo de las propiedades de estilo que
tenga asignado el bloque. Afortunadamente, M$ nos da una lista de estas
propiedades [2] para que elijamos la que más nos guste. Simplemente deberás
poner una de estas propiedades en, por ejemplo, el bloque '#contenedor'
(prueba con 'display: inline-block' para ver el resultado) y problema
resuelto.

[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2]
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp

Un saludo,
David Merino Ogando


--
 
 Nidia Fernández Martínez
 Alhana, Alhanita, Nahriah...
 http://alhanita.blogspot.com
 
 ___
 Lista de distribución Ovillo
 Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
 Puedes modificar tus datos o desuscribirte en la siguiente dirección:
 http://lists.ovillo.org/mailman/listinfo/ovillo

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


Re: [Ovillo] IE no dibuja bien las capas

2006-11-06 Por tema Nidia Fernandez Martinez
2006/11/6, Maikel Naigt [EMAIL PROTECTED]:

 Hola Nidia. Veamos tus problemas tras tu solicitud de ayuda.

 On 11/3/06, Nidia Fernandez Martinez [EMAIL PROTECTED] wrote:
 
  Hola,
 
  Estoy trabajando en la siguiente web:
  http://www.efeyl.org/pruebas/EFEYLBATALLITAS/index.php
 
  En Firefox se ve perfectamente, tal y como debería verse según el código
  escrito. La estructura del sitio es más o menos así:
 
  body
div id=todo
  div id=banner/div
  div id=borde_cuadros/div
  div id=menuycuerpo
div class=menu/div
div id=cuerpo
  div class=contenedor
div class=texto/div
  /div
/div
div id=pie/div
  /div
/div
  /body
 
  Sin embargo en IE ignora la capa menuycuerpo por completo. Se nota
  porque
  el menú no tiene separación con el banner, y el cuerpo está a otra
 altura
  distinta. Además, no sé por qué misteriosas razones, no se dibujan los
  bordes superiores del contenido bien. Copio y pego aquí la hoja de
  estilos,
  por si a alguien le interesa:


 El problema que te surge de que el menú te aparezca pegado a la cenefa de
 cuadros superior se debe a que no le indicas ningún margen. Te pego la
 parte
 de la hoja de estilos más o menos por el final de la misma.

 /* common styling */
 ...
 .menu ul {padding:0; margin:0;list-style-type: none; }
 .menu ul li {float:left; position:relative; padding:0; margin:0;}
 ...

 Evidentemente, estos 'margin:0' nos sobreescriben cualesquiera que hubiera
 con anterioridad, haciendo que el bloque del menú este junto a la cenefa.

 En cuanto al segundo problema es un poco más complicado de comprender, y
 está relacionado directamente con una propiedad 'Made in M$' denominada
 'hasLayout' [1] y que le indica al motor de IE cuándo un bloque es etéreo
 como las nubes del anuncio de las compresas (valor false) y cuándo deberá
 ser sólido y fuerte como la espada del Cid (valor true). Seguramente ya
 hayas adivinado que tu bloque fantasma ha sido elegido como 'hasLayout'
 en
 'false'. Necesitaremos pues revertir esta situación, aunque existe un
 problemilla, y es que la propiedad 'hasLayout' no es 'escribible' si no
 que
 se sitúa en uno u otro estado dependiendo de las propiedades de estilo que
 tenga asignado el bloque. Afortunadamente, M$ nos da una lista de estas
 propiedades [2] para que elijamos la que más nos guste. Simplemente
 deberás
 poner una de estas propiedades en, por ejemplo, el bloque '#contenedor'
 (prueba con 'display: inline-block' para ver el resultado) y problema
 resuelto.

 [1] http://www.satzansatz.de/cssd/onhavinglayout.html
 [2]

 http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/haslayout.asp

 Un saludo,
 David Merino Ogando


Muchas gracias por la ayuda. El problema principal es que como relacionaba
el fallo con ningún elemento de la página, no sabía por donde empezar a
investigar. En cuanto tenga un rato lo pruebo y cuento el resultado.

Un saludo :)


-- 

Nidia Fernández Martínez
Alhana, Alhanita, Nahriah...
http://alhanita.blogspot.com

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo


[Ovillo] IE no dibuja bien las capas

2006-11-03 Por tema Nidia Fernandez Martinez
Hola,

Estoy trabajando en la siguiente web:
http://www.efeyl.org/pruebas/EFEYLBATALLITAS/index.php

En Firefox se ve perfectamente, tal y como debería verse según el código
escrito. La estructura del sitio es más o menos así:

body
  div id=todo
div id=banner/div
div id=borde_cuadros/div
div id=menuycuerpo
  div class=menu/div
  div id=cuerpo
div class=contenedor
  div class=texto/div
/div
  /div
  div id=pie/div
/div
  /div
/body

Sin embargo en IE ignora la capa menuycuerpo por completo. Se nota porque
el menú no tiene separación con el banner, y el cuerpo está a otra altura
distinta. Además, no sé por qué misteriosas razones, no se dibujan los
bordes superiores del contenido bien. Copio y pego aquí la hoja de estilos,
por si a alguien le interesa:

* html,body {
height:100%;
margin:0px;
padding:0px;
}

body {
background-color:#44;
background-image:url(imagenes/fondo.gif);
color:#f1e9c9;
font-family:Georgia, Times New Roman, Times, serif;
font-size:90%;
}

#todo {
height:100%;
min-height:100%;
position:relative;
margin: 0px auto;
}

#banner {
width:100%;
background-color:#4C0909;
text-align:center;
}

#borde_cuadros{
background-image: url(imagenes/fondo_cuadros.gif);
background-repeat:repeat;
height:16px;
}

#pie {
bottom:0;
position:absolute;
height:100px;
width:100%;
}

#pie_inferior {
background-color:#4C0909;
padding: 5px 0px 5px 0px;
bottom:0;
}

#menuycuerpo{
padding-bottom:120px;

}

#cuerpo{ /*Lo que suele ser en otros diseños 'principal*/
margin-left:160px;
}

.contenedor { /*La caja que contiene texto y demases */
background-color:#004400;
border: 3px double #d0af34;
margin: 20px;
}

.texto { /*El interior de la caja contenedor*/
padding: 10px 15px 10px 15px;
}

.subtit {
color: #99FF66;
}

.importante {
font-weight:600;
}


#pie h2 {
color: #d0af34;
font-family : Georgia, Times New Roman, Times, serif;
}

#pie_inferior .elemento {
margin:20px 90px 20px 90px;
font-size:75%;
}

A:link{
color:#D0AF34;
text-decoration: none;
}

A:active{
color:#D0AF34;
text-decoration: none;
}

A:visited{
color:#D0AF34;
text-decoration: none;
}

A:hover{
color:#8A8AFF;
text-decoration: none;
}

.contenedor h2 {
color:#d0af34;
background-color:#4c0909;
border-bottom:3px double #d0af34;
margin: 0px;
padding: 5px 15px 5px 15px;
text-transform:uppercase;
font-family:felix titling, georgia, times new roman, times, serif;
text-align:center;
}

.contenedor h4 {
color:#d0af34;
font-family:felix titling, georgia, times new roman, times, serif;
}

.proximo {
margin:40px 60px 40px 60px;
font-style:italic;
}

p {
margin:12px 0px 12px 0px;
}

li {
margin:12px 0px 12px 0px;
}

.gallerytitle {
color:#d0af34;
font-family:felix titling, georgia, times new roman, times, serif;
font-size:120%;
}

/* ESTILO DEL MENU */

.menu {background-image:url(imagenes/menu/fondo.gif);}

.menu img {border:0px; margin-bottom:-4px; padding:0px;}

table {border-collapse:collapse; border:0; margin:0; padding:0;}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff;
background-image:url(imagenes/menu/fondo.gif); background-color:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; top:0; left:147px;
width:150px;}
.menu ul li a:hover ul li a.sub {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;
width:150px;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute;
left:151px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul li a {display:block; width:200px;
background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e;
color:#fff;}






-- 

Nidia Fernández Martínez
Alhana, Alhanita, Nahriah...
http://alhanita.blogspot.com

___
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección: 
http://lists.ovillo.org/mailman/listinfo/ovillo