Comunidad de diseño web y desarrollo en internet online

Problema con posicionamiento en CSS

Citar            
MensajeEscrito el 17 Abr 2007 04:39 am
Pues resulta que tengo todo un desastre; porque en FF se ve bien (como debe ser), pero en IE7 el div se queda por debajo del div de arriba y en el IE6, entre el div de arriba y el de abajo hay un espacio (el que corresponde al margen superior para que quede justo debajo del primer div).
El codigo css para posicionar el div del header(imagen con liga jorgelig blog) es este:

Código :

#header{
width:100%;
height:100px;
margin:25px auto 0 auto; */Linea donde creo que esta el problema, esos 25px son los que en el ie6 estan demas; pero si se los quito en el FF se veria igual que el ie7; y con respecto al ie7 menos tengo idea de como solucionarlo XD
background:url(imagenes/fondo_header.png) repeat-x top left;
position:relative;

}
Les dejo un Screen(comparar recuadros rojos) y la liga.

http://jorgelig.la100rra.com.mx/prueba/prueba.html

Me dijeron que usara condicionales y restas(algo que no comprendi muy bien con lo de las restas XD); ¿Hay alguna solucion sin usar condicionales y css por cada navegador (mucho menos hacks)?¿Si no la hay que opciones me dan?
Pd. tengo la condicional para cargar un css para ie, pero esta vacio por lo que no creo que influya en algo.

Salu2 y gracias.

Por Jorgelig

Claber

3035 de clabLevel

12 tutoriales

 

Monterrey, Nuevo Leon, MX

firefox
Citar            
MensajeEscrito el 18 Abr 2007 01:36 am
no utilices position! no es necesario!
por otro lado, a veces ie y firefox renderean las cosas con más o menos pixeles, donde siempre me pasa son con los botones input y el padding, aquí habría que utilizar un hack:

Código :

propiedad: "valor"; // cualquier propiedad, cualquier valor, ésta va a verse en firefox y opera
-propiedad: "valor"; // ie no toma en cuenta el guión del principio, por lo que ésta propiedad se superpone a la anterior, pero sólo ie


pero para mi que son los position

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 22 Abr 2007 02:25 pm
No utilices position, es complicado el asunto del relative,.

Por pcdiabla

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 23 Abr 2007 08:04 pm
Position se puede usar, como dijo jp, en casos donde la ocasion lo amerite, y esta probablemente no lo sea. Como sea, puedes usar condicionales, con un valor para cada navegador, o hacks, como:

Código :

#menu{
prop: 25px; /* FF y todo el light side */
}
* html #menu{
/*O algun hack similar, como añadir un / en la mitad de una propiedad. Creo que en IE7 no sirve el guion al principio, asi que puedes usar "-prop" para IE6 y p/rop para IE7. Solo asegurate de poner la de IE6 despues.
prop:0;
}


Saludos!

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino  

The dark places where wolves access internet with 46,6 kbps

firefox
Citar            
MensajeEscrito el 23 Abr 2007 08:43 pm
Anda la osa, no es recomendable el uso de hacks, por el hecho mismo que no sabemos(al menos yo) si resulte o no en Ie7, con las condicionales no he tenido problema alguno, y si el caso lo amerita, usar 2, uno para Ie6 y otro para el 7, pero esto es muy raro, para Ie 7 la condicional es

Código :

<!--[if lte IE 7]>
<link href="baseIE7.css" rel="stylesheet" type="text/css" />
<![endif]-->

donde lte, es para navegadores menores o iguales que IE7, en la cache de diseñorama se explica mejor :)

Por Max

Claber

267 de clabLevel



Genero:Masculino  

Lima - Peru

firefox
Citar            
MensajeEscrito el 02 May 2007 12:46 pm
Tengo un problema parecido, cuando pueda pasarles los snapshot se los paso. Tengo una css que me oculta un menú hecho en flash y eso pasa es en IE7. y no entiendo porque sucede si en firefox se ve de lo más normal. màs tarde les paso los snapshots para que puedan ayudarme tamb.

Por onnasama

325 de clabLevel

1 tutorial

 

firefox
Citar            
MensajeEscrito el 04 May 2007 08:17 pm
Muchas gracias por sus comentarios, hasta ahora me resistia usar las condicionales para el CSS (no se si vieron pero desde el principio tengo una condicional para un java que haga que la barra de navegacion siempre se mantenga arriba en el IE).

Mi problema ahora es, que al quitar todos los div (menos el fixed de la barra de navegacion) esque el los IE`s(6 y 7) la capa del Header se esconde debajo de la capa de la barra de navegacion.

El codigo del header y barra de navegacion (tango para FF como para IE)ahora quedo asi:

Código :

#header{
width:100%;
height:100px;
margin:25px auto 0 auto;
background:url(imagenes/fondo_header.png) repeat-x top left;
}

#nav-superior{
   width:100%;
   height:25px;
   background:#3A8DD1;
   color:#FFFFFF;
   top:0;
   position:fixed;
   }



Pd. tal vez si termine usando una hoja CSS para el IE, pero primero necesito saber porque el header se esconde debajo del la barra de navegacion.

Como ya se imaginaran, con FF no tengo problema alguno :D

Por Jorgelig

Claber

3035 de clabLevel

12 tutoriales

 

Monterrey, Nuevo Leon, MX

firefox
Citar            
MensajeEscrito el 04 May 2007 08:55 pm
En lo personal, el uso de margin y padding me ha dado muchos problemas entre FF e IE. Ya que uno de los dos o los dos tal ves, se comportan de diferente manera en ambos navegadores, que si se suma al height y/o width, que si no. etc.

Por lo que agrego al iniciar mi documento CSS:

Código :

* { padding: 0; margin: 0; }


Y parto de allí, para agregar todo lo demás.

Por Darel

725 de clabLevel

5 tutoriales

 

I'm a human

firefox
Citar            
MensajeEscrito el 04 May 2007 09:02 pm

Darel escribió:


Código :

* { padding: 0; margin: 0; }


Y parto de allí, para agregar todo lo demás.
Así lo tengo, gracias a la recomendacion de Aoyama XD

Por Jorgelig

Claber

3035 de clabLevel

12 tutoriales

 

Monterrey, Nuevo Leon, MX

firefox
Citar            
MensajeEscrito el 08 May 2007 11:39 pm
Hola como estan todos ??

yo preparandome quiero llegar al cristalab 2007 en peru
por ahora me parece que podrian echarle un vistaso al siguiente link.

http://www.intensivstation.ch/en/templates/

a mi me fue de mucha utilidad al p`lantear un apaggina a cuatro columnas lo resolvi en base a usar position:absolute y el acho por porcentajes como los margenes tambien en las css

Ante cualquier dudad no dudes en escribir

Saludos Jack

Por jack_pelorus

21 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.