Comunidad de diseño web y desarrollo en internet online

Ayuda CSS IE

Citar            
MensajeEscrito el 27 Dic 2008 01:07 am
Soy nuevo en CSS py necesito un poco de ayuda por favor, me lei el manual de css de cristalab... esta buenisimo.

Tengo un div id="arbol" y al lado otro div id="cielo", el div id="arbol" esta primero y deseo que el div id="cielo" se vea desde el final del div id="arbol" hasta donde dure la resolución de pantalla de el usuario.

Código :

#arbol{
   background:url(arriba.jpg) no-repeat;
   width: 597px;
   height:375px;
   float:left;
}
#cielo{
   background:url(atras_fondo_arriba.jpg) repeat-x;
   [color=red]width:100%;[/color]
   height:375px;
}


Código :

<div id="arbol"></div>
<div id="cielo"></div>


Le coloque al div id="cielo" width:100%; pero en IE no funciona si en safari y firefox. ¿Alguien sabe como solucionarlo?

Por albertcito

6 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Dic 2008 01:31 am
Un div tiene por defecto 100% cuando no se le especifica el ancho. El codigo que has posteado lo veo bien, de hecho quitaria el width:100% porque como te digo, si no esta definido por defecto ya es 100%.

¿No hay mas codigo en tu html? Yo pienso que hay mas codigo que esta obstruyendo y te causa ese problema, no precisamente el que estas posteando.

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

firefox
Citar            
MensajeEscrito el 27 Dic 2008 01:36 am
UpS!!!!!!!!!!

Tienes toda la razón era esa la solución!!!!!

Muchas gracias :D

Pero.... Ahora se ve entre los div's una linea de como 3 pixeles...

:D gracias :D

Por albertcito

6 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Dic 2008 01:48 am
mmm no se si sera tu caso pero es recomendable (y siempre deberia hacerse) colocar un "reset" al comienzo de tu CSS, son unas reglas que lo que haran es eliminar margenes, paddings, bordes, etc que pueda tener por defecto cualquier navegador, el mas comun es :

Código :

* {margin:0; padding:0;}


Este tip explica un poquito mas

Y si sigues teniendo ese espacio, fijate bien si hay algun margen que se te haya pasado, o elimina caracteres entre las etiquetas de esos <div>, justo entre donde ves el espacio, donde una cierra </div> y la otra empieza <div>, a veces escribimos cosas sin querer.

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

firefox
Citar            
MensajeEscrito el 27 Dic 2008 02:05 am
Igual estuve porbando con aquello y revise bien el código, incluso elimine el espacio entre div y cualquier espacio en el código pero no. Bueno tratare de solucionarlo, muchas gracias nuevamente.

Por albertcito

6 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Dic 2008 06:10 am
Lo solucione colocando margin-right: -3px;, prueben el código y se daran cuenta :D


Código :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
   
   
    <style type="text/css">
    <!--


*{margin: 0; padding: 0}


.left {
margin: 0;
padding: 0;
height: 150px;
width: 100px;
background: red;
float: left;
margin-right: -3px;

}

.right {

padding: 0;
height: 180px;
width: 180px;
background: blue;

} 
    -->
    </style>   
</head>
<body>
<div id="container"> 
<div class="left">Left_box</div>
<div class="right">Right_box. How can I get rid of the white space between these boxes?</div>  
</div>
</body>
</html>

Por albertcito

6 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Dic 2008 03:49 pm
Oh por dios, estas haciendo tus pruebas con IE6!!! :shock: no por favor no hagas eso, usa Firefox, lo que ves en IE6 esta mal, para IE6 debe haber una hoja de estilos aparte, por favor lee el curso de CSS

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

firefox
Citar            
MensajeEscrito el 28 Dic 2008 11:56 pm
No es necesario el hacer una hoja de estilos aparte para ie, si hacer el codigo mas standar no es necesario, lo que yo hago por lo general es usar un reset.css uso el de yahoo y un css framwork, este ultimo utiliza 960 grid system, hay muchas discusiones sobre si o no usar un framework de css por aquello de la web semantica pero en realidad te ahorra mucho tiempo, etiquetas, y estandarizas un poco mas tu css


960 grid system

yahoo reset

existen muchos sabores de frameworks para css como blueprint y 960, yo escogi uno y me gusta usarlo, tambien lo mismo con un reset.css existen muchos yo elegi uno que me pareciera mas liviano que los demas, asi evito el tener que hacer una hoja de estilos para ie, por lo general :shock:

saludos

Por fack.us

25 de clabLevel



 

la choya bay

firefox
Citar            
MensajeEscrito el 29 Dic 2008 01:07 am
@fack.us

El problema de IE6 es que no respeta estandares, el uso del reset es importante, siempre debe usarse al empezar un proyecto web, pero un reset no resuelve los bugs de IE6, el uso de una hoja aparte para IE6 es mi eleccion, y no uso frameworks para CSS porque prefiero tener control sobre el codigo que escribo, pero el problema de albertcito es justamente que sus pruebas las esta haciendo con IE6 y esta tratando de que su web se vea bien en IE6 lo cual esta mal, el debe probar en buscadores que sigan standares como Firefox. A eso es donde quiero guiarlo, que deje de usar IE6 como su buscado preferente.

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

firefox
Citar            
MensajeEscrito el 04 Ene 2009 10:09 pm
drarock, qué navegador la mayor cuota de mercado?
...
ahá, eso creí. No tiene sentido que pensemos idealistamente que hay que dejar de lado a IE6 porque es un nene malo. Ya sé que no respeta estándares. Ya sé que tiene errores. Pero vos y yo sabemos que IE es el navegador más usado en el mundo. Es una realidad y hay que ajustarse a la realidad. Yo cuando trabajo pruebo las cosas en IE6 al lado de FF. FF lo tengo por el Firebug, pero con IE tengo la IE Developer Toolbar y es suficiente. Y no, no soy un amante de IE6, no me gusta, pero soy realista y sé que por más que patalee la gente va a seguir usando IE.
Otro tema. La hoja de estilos aparte para IE. Es una técnica muy recomendable, pero naturalmente lo mejor es tratar de usar el mínimo css en ellas, poniendo css muy específico y naturalmente cosas propias de IE como los behaviours para transparencia o expressions para min-height por ej.

Por Skatos

393 de clabLevel

4 tutoriales

 

firefox
Citar            
MensajeEscrito el 04 Ene 2009 10:44 pm
Nadie dice que haya que dejar de lado IE6. Lo que drarock plantea es desarrollar el sitio siguiendo estandares (usando navegadores que lo cumplan como firefox) y resolviendo los bugs de IE en paralelo. Por ejemplo primero aplicar el modelo de caja siguiendo lo que dice la W3C y luego resolver las cosas raras que hace IE y no hacerlo al revés (primero que se vea en IE6 y después ver los otros navegadores).

Saludos

Por GustavoV

Claber

136 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 04 Ene 2009 10:45 pm
Pero, Skatos, no es sólo una cuestión comercial, sino principalmente una cuestión de profesionalismo y de permanencia en el tiempo. Los estándares no existen sólo porque sí. Es, por supuesto, mi opinión personal que es mejor y más fácil crear XHTML y CSS bien hecho y luego ajustar para casos específicos (IE6) que hacer las cosas mal y luego encontrarse con que los navegadores modernos no lo soportan (y tener que hacer arreglos para ello). Yo suelo hacer lo siguiente:

  • Trabajar siempre con XHTML Strict y CSS 2.1.
  • Usar un CSS Reseter.
  • Colocar los hacks en (caso de necesitarlos) en una hoja aparte y llamarla por medio de condicionales.
  • Presentar el contenido sin necesidad de js y luego usar éste para "efectos especiales".

Los estándares no son un capricho e IE6 no estará para siempre, pero en la medida que la comodidad o la flojera nos hagan tomar caminos más "fáciles" a primera vista, nos alejaremos del presente y el futuro de la web.

Por The Fricky!

Presidente

6168 de clabLevel

3 tutoriales
8 articulos

Genero:Masculino   Bastard Operators From Hell Héroes

Piccola Venezia...

chrome
Citar            
MensajeEscrito el 05 Ene 2009 12:28 am

Skatos escribió:

drarock, qué navegador la mayor cuota de mercado?
...
ahá, eso creí. No tiene sentido que pensemos idealistamente que hay que dejar de lado a IE6 porque es un nene malo. Ya sé que no respeta estándares. Ya sé que tiene errores. Pero vos y yo sabemos que IE es el navegador más usado en el mundo. Es una realidad y hay que ajustarse a la realidad. Yo cuando trabajo pruebo las cosas en IE6 al lado de FF. FF lo tengo por el Firebug, pero con IE tengo la IE Developer Toolbar y es suficiente. Y no, no soy un amante de IE6, no me gusta, pero soy realista y sé que por más que patalee la gente va a seguir usando IE.
Otro tema. La hoja de estilos aparte para IE. Es una técnica muy recomendable, pero naturalmente lo mejor es tratar de usar el mínimo css en ellas, poniendo css muy específico y naturalmente cosas propias de IE como los behaviours para transparencia o expressions para min-height por ej.

Yo no he dicho que hay que dejar de usar IE6, sino que no debe usarse para hacer tus pruebas de los standares CSS porque esa version en especial no los respeta, la IE7 fue mejorada un poco, pero aun asi tiene problemas(que segun dicen se resolvera en la version 8 ), mi recomendacion es usar un browser que las respete para asegurarte que estas aplicando correctamente los standares, asi como Firefox, y esto que digo lo recomienda el curso de CSS de esta web.

El uso de una hoja de estilos aparte para IE6 es justamente para sobreescribir clases especificamente para IE6 que por su comportamiento extraño no las renderiza como debiese, solo son algunas, no todas obviamente.

Yo en lo personal uso Firefox en un comienzo para hacer la mayor parte de pruebas, pero al mismo tiempo compatibilizo mis webs para Firefox, Safari, Opera, IE7 e IE6 y en sus versiones para MAC tambien.

The Fricky! escribió:



  • Trabajar siempre con XHTML Strict y CSS 2.1.
  • Usar un CSS Reseter.
  • Colocar los hacks en (caso de necesitarlos) en una hoja aparte y llamarla por medio de condicionales.
  • Presentar el contenido sin necesidad de js y luego usar éste para "efectos especiales".


Estoy de acuerdo con el modo de trabajo de The Fricky! es una forma correcta, there is only one way to do things right, and that is the right way

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

firefox
Citar            
MensajeEscrito el 05 Ene 2009 12:41 am
Pero... o sea... en que momento dije que había que hacer css para IE6??? diganme, porque me golpeo a mi mismo! y en que momento dije que lo hacía primero para IE6 y luego para FF?
Yo me refería a esta frase de drarock:
esta tratando de que su web se vea bien en IE6 lo cual esta mal

y eso no es así. IE6 por ahora no se puede dejar de lado, a no ser que seas un mal desarrollador y le mientas a tu cliente. Otra cosa, los estándares si que son un capricho, o no estás pensando en Tamarin? que pasó que se vetó el estándar ECMA4 en que se basaba AS3 y basaría AS4? en favor del ECMA3.1 de Microsoft? no me vengas con que no son un capricho. Realmente no me importan los estándares, yo trabajo para el usuario final de mis clientes y siempre está primero eso. Si tengo que usar un -webkit, un -moz o un behaviour o una expression porque se resuelve así, funciona óptimamente y el cliente y el usuario final resultan beneficiados, que así sea.
Por otro lado, no hay porqué cuidarse de lo de javascript si el público que nos interesa sabemos que lo tiene activo. Y los hacks no van, son una pavada. Que sucedería si IE o algún otro navegador interpreta de manera incorrecta (o correcta para el hack que le corresponda) ese hack? donde se va a la página? aha, si, así es. Para eso existen los comentarios condicionales, no hacen falta hacks.
Como TheFricky! dió metodología yo agrego la mía:

XHTML Strict
CSS (usar atributos como cursor:progress ya amerita que uno "usa" 2.1?)
reset.css de la YUI con adiciones como el tamaño base en porcentajes de la letra, para que 1 em no sea 16px sino 12px
estilos.css general para todos los browsers, depurando con Firebug en Firefox. Luego de que tengo un elemento como deseo en Firefox, porque naturalmente es más sencillo hacerlo con Firebug, lo analizo con IE y la IE Developer Toolbar. Antes dejaba pasar más tiempo antes de probarlo con IE y a veces tenía que volver bastante atrás.
tipografia.css con tamaños de letra escalados y nombres semánticos
ie6.css e ie7.css con redefinición de los selectores o ids ofendidos o adición de behaviours o expressions, sin hacks, llamados por medio de los comentarios condicionales. Aquí coloco lo mínimo para que no se baje mucho peso.
javascript uso en concordancia con el público objetivo de mi cliente, sin embargo, la mayoría de la gente que no tiene idea de informática tiene activado javascript.
Luego testeo con browsershots.org y corrijo lo que sea necesario.
IE6 no estará para siempre? eso espero. Saludos a todos y que IE6 no nos acompañe.

Por Skatos

393 de clabLevel

4 tutoriales

 

firefox
Citar            
MensajeEscrito el 05 Ene 2009 12:47 am

drarock escribió:

esta tratando de que su web se vea bien en IE6 lo cual esta mal


Cuando dije eso, fue porque albertcito esta usando IE6 para hacer sus pruebas de standares, esa regla que puso para IE6 debio colocarla en un css aparte y con una condicional, no es un hoja de estilos "buena", se entiende??

Como ya dije, una web bien hecha debe verse bien en la mayor cantidad de buscadores, IE6 es algo especial y por eso se le hace sus propias clases, lo que trato de decirle a albertcito es que use un buen buscador para probar los standares y los errores de IE6 se corrijan en una hoja aparte.

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

firefox
Citar            
MensajeEscrito el 07 Ene 2009 08:00 pm
Buenas tardes estoy diseñando un sitio y en IE se ve de una forma y en firefox se ve de otra
como devo llevar los estylos???

Por colli13cu

0 de clabLevel



 

msie7

 

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