Re: [Ovillo] Problemas con padding crossbowsing Firefox , IE 7, IE 6
Gracias compañeros,
Incialmente he controlado el margin / padding del H1. Despiste ;-)
Para solventar los problemas de box model, utilizo el método de no dar
espacio / padding a contenedores y sí en cambio a elementos contenidos.
También estoy usando el IE7.js en ocasiones, el cual corrige unos cuantos
problemas de crossbowsing, especialmente para IE6.
Gracias a todos,
carlos
http://code.google.com/p/ie7-js/
El 14 de mayo de 2009 11:21, Alex Lillo escribió:
> Hola Asela,
> Más que utilizar filtros específicos, te recomiendo que utilices los
> comentarios condicionales del IE. Me parecen de lo mejor que ha introducido
> Microsoft en el mundo de los navegadores. Limpio y elegante.
>
> Alex
>
>
> 2009/5/14 Asela Ortiz de Murua
>
> > Ie es ... "creativo" con márgenes y padding por el modelo de caja ("box
> > model").
> >
> > Echa un vistazo a
> >
> >
> http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
> >
> > Yo suelo hacer una css alternativa para ie*, con los filtros específicos
> > para ajustar eso: márgenes, padding ... y que no afecte a otros
> > navegadores.
> >
> > FILTROS ESPECIFICOS
> > IE 6 y versiones anteriores
> >
> > * html {}
> >
> >
> > IE 7
> >
> > *:first-child+html {}
> > ___
> > 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
> >
>
>
>
> --
> Alex Lillo
> www.nordic-design.net
> http://www.linkedin.com/in/alexlillo
> ___
> 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] Problemas con padding crossbowsing Firefox , IE 7, IE 6
Gracias Alex Al leer tu respuesta observo que estaba utilizando una solución redundante. Porque, con los comentarios condicionales cargaba la css específica para Ie* y dentro de esta utilizaba los filtros concretos de Ie, dejando la css principal limpia. Un saludo Asela ___ 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] Problemas con padding crossbowsing Firefox , IE 7, IE 6
Hola Asela,
Más que utilizar filtros específicos, te recomiendo que utilices los
comentarios condicionales del IE. Me parecen de lo mejor que ha introducido
Microsoft en el mundo de los navegadores. Limpio y elegante.
Alex
2009/5/14 Asela Ortiz de Murua
> Ie es ... "creativo" con márgenes y padding por el modelo de caja ("box
> model").
>
> Echa un vistazo a
>
> http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
>
> Yo suelo hacer una css alternativa para ie*, con los filtros específicos
> para ajustar eso: márgenes, padding ... y que no afecte a otros
> navegadores.
>
> FILTROS ESPECIFICOS
> IE 6 y versiones anteriores
>
> * html {}
>
>
> IE 7
>
> *:first-child+html {}
> ___
> 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
>
--
Alex Lillo
www.nordic-design.net
http://www.linkedin.com/in/alexlillo
___
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] Problemas con padding crossbowsing Firefox , IE 7, IE 6
Ie es ... "creativo" con márgenes y padding por el modelo de caja ("box
model").
Echa un vistazo a
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
Yo suelo hacer una css alternativa para ie*, con los filtros específicos
para ajustar eso: márgenes, padding ... y que no afecte a otros navegadores.
FILTROS ESPECIFICOS
IE 6 y versiones anteriores
* html {}
IE 7
*:first-child+html {}
___
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] Problemas con padding crossbowsing Firefox , IE 7, IE 6
Hola, Chr5
Chr5 escribió:
> Buenos días compañeros de la lista:
>
> ¿ Por qué el IE6 e IE7 no me muestra el mismo padding inferior y superior
> asignado al elemento H1 A flotante ?
> ¿ Existe algún método crossbowser de corregir este problema ?
>
>
En tu caso no es que no deje el mismo valor para el elemento h1+a, sino
para el elemento h1.
La solución es que la primera línea de tu css sea algo parecido a:
*{margin:0;padding:0;}
Con eso eliminas los estilos de margin y padding que dan los navegadores
por defecto, y todo tendrá exactamente el valor que tú les des :-)
___
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] Problemas con padding crossbowsing Firefox , IE 7, IE 6
Una hoja de reset de estilos, o quiza el *{margin:0; padding:0;}
> ¿ Por qué el IE6 e IE7 no me muestra el mismo padding inferior y superior
> asignado al elemento H1 A flotante ?
> ¿ Existe algún método crossbowser de corregir este problema ?
>
>
> --
> Saludos
> Jaume
>
>
>
___
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] Problemas con padding crossbowsing Firefox , IE 7, IE 6
Buenos días compañeros de la lista:
¿ Por qué el IE6 e IE7 no me muestra el mismo padding inferior y superior
asignado al elemento H1 A flotante ?
¿ Existe algún método crossbowser de corregir este problema ?
gracias !!
carlos
**
Organizer
Salir
#header {
float: left;
width: 100%;
margin: 0;
padding: 0;
background: #ccc url(../img/header/iterheader_004.png) repeat-x 0 0;
display: inline-block;
}
#header h1 {
float: left;
}
#header h1 a {
float: left;
display: block;
padding: .1em 0 .1em 1em;
line-height: 1.2em;
}
/* menu global salir, etc */
#menu_global {
float: right;
}
#menu_global ul {
float: right;
margin-right: 1em;
}
#menu_global li {
float: left;
padding: 1em;
}
#menu_global a {
color: #fff;
text-decoration: underline;
}
#menu_global a:hover {
text-decoration: none;
}
___
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] Problemas con padding
Buff, que cogorza...
Es cierto el padding no esta incluido en el width... no entiendo por qué se
me habia metido en la cabeza que era lo contrario.
Muchisimas gracias :-)
- Original Message -
From: "Raul Martin" <[EMAIL PROTECTED]>
To: "Ovillo, la lista de CSS en castellano"
Sent: Thursday, May 26, 2005 1:42 PM
Subject: RE: [Ovillo] Problemas con padding
Firefox lo está haciendo bien, así es como dice la especificación que se
debe comportar.
http://www.disenorama.com/articulos/css/el_modelo_de_cajas.htm
parece raro, pero piensa en esto:
div{
width:50px;
padding-left:50px;
padding-right:50px;
}
que debería hacer el navegador? con el modelo de cajas del w3c queda claro
lo que debe hacer.
en cuanto a lo último... no lo se. No se por que te da ese error, no
obstante dentro de un p meter un div no me parece muy logico, ta vez un
span... no lo se, habría que pensar.
Pero la verdad que desconozco por que te hace eso, puedes enviar el css?
On 26/May/2005 13:12:22, [EMAIL PROTECTED] wrote:
> Hola,
>
> aprovecho para saludaros a todos, he comenzado hace poco con CSS en serio,
y la lista me ayuda mucho a aclarar algunos conteptos que no tenia claros.
>
> La verdad que el problema que tengo me sorprende bastante. Tengo un div
contenedor que a su vez contiene 3 divs para un layout de 3 columnas de tipo
float left. El div #menuizquierdo mide de ancho 150px y no tiene ni margenes
ni bordes. El div #contenido (el central) mide 458px de ancho y tiene 1px de
margen por cada lateral, y finalmente tengo el div #menuderecho que mide
150px y tampoco tiene ni margenes ni bordes.
>
> Esto encaja perfecto ya que el div #contenedor mide 760px de ancho.
>
> El problema me aparece en un cambio que no deberia afectar en firefox (si
en Ie, ya que el tema es de padding). Aqui os expongo el problema.
>
> El div contenido en principio no tenia padding, y solamente contiene un h1
y un p. Con esta situacion usabamos margin para que el h1 y el p no
estuvieran pegados a los menus laterales.
>
> Por cuestiones que no vienen al caso, para dejar aire del contenido a los
bordes de este div pensamos en ponerle padding al div contenido, en vez de
darle margin a los elementos h1 y p. Cual es nuestra sorpresa que al ponerle
un padding lateral de 15px a cada lado, se nos descoloca la columna derecha!
es como si firefox funcionara como IE, añadiendo el padding al exterior de
la caja, en vez de su interior, esto se ve ya que el div contenido tiene un
color de fondo y se ve como se superpone al menu derecho.
>
> Si reducimos lo que ampliamos de padding al width del contenido vuelve a
encajar, pero esto en firefox no deberia ser asi, no se supone que el
padding en firefox va dentro del width? Es decir, por poner mas padding,
aumenta el width...
>
> Por otro lado nos ocurre otra cosa cursiosa, tenemos el susdicho p que
dentro carga mediante php un texto, este texto esta generado mediante un
gestor de contenidos con un rich text editor que genera divs de
alineamiento, etc. Nos sucede que el texto que esta despues de un div pierde
las propiedades del p que lo contiene, es decir:
>
>
> Aqui texto bla bla bla esto a la
derechaMas bla bla bla
>
>
> Pues bien lo de antes del div toma los estilos definidos para p, pero lo
de despues de cerrar el div no los pilla...
>
> Muchas gracias de antemano.
>
> Saludos :)
> ___
> 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://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://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://ovillo.org/mailman/listinfo/ovillo
Re: [Ovillo] Problemas con padding
Sobre lo último, es simple: según la especificación[1], el elemento P no
puede contener otros elementos de bloque como el DIV que intenta meter
(incluidos otros P); podría intentar usando SPAN (lo cual sí es correcto).
Saludos
N :o)))
[1] http://www.w3.org/TR/html401/struct/text.html#edef-P
Raul Martin wrote:
Firefox lo está haciendo bien, así es como dice la especificación que se debe
comportar.
http://www.disenorama.com/articulos/css/el_modelo_de_cajas.htm
parece raro, pero piensa en esto:
div{
width:50px;
padding-left:50px;
padding-right:50px;
}
que debería hacer el navegador? con el modelo de cajas del w3c queda claro lo
que debe hacer.
en cuanto a lo último... no lo se. No se por que te da ese error, no obstante
dentro de un p meter un div no me parece muy logico, ta vez un span... no lo
se, habría que pensar.
Pero la verdad que desconozco por que te hace eso, puedes enviar el css?
On 26/May/2005 13:12:22, [EMAIL PROTECTED] wrote:
Hola,
aprovecho para saludaros a todos, he comenzado hace poco con CSS en serio, y la
lista me ayuda mucho a aclarar algunos conteptos que no tenia claros.
La verdad que el problema que tengo me sorprende bastante. Tengo un div
contenedor que a su vez contiene 3 divs para un layout de 3 columnas de tipo
float left. El div #menuizquierdo mide de ancho 150px y no tiene ni margenes ni
bordes. El div #contenido (el central) mide 458px de ancho y tiene 1px de
margen por cada lateral, y finalmente tengo el div #menuderecho que mide 150px
y tampoco tiene ni margenes ni bordes.
Esto encaja perfecto ya que el div #contenedor mide 760px de ancho.
El problema me aparece en un cambio que no deberia afectar en firefox (si en
Ie, ya que el tema es de padding). Aqui os expongo el problema.
El div contenido en principio no tenia padding, y solamente contiene un h1 y un p. Con esta situacion usabamos margin para que el h1 y el p no estuvieran pegados a los menus laterales.
Por cuestiones que no vienen al caso, para dejar aire del contenido a los
bordes de este div pensamos en ponerle padding al div contenido, en vez de
darle margin a los elementos h1 y p. Cual es nuestra sorpresa que al ponerle un
padding lateral de 15px a cada lado, se nos descoloca la columna derecha! es
como si firefox funcionara como IE, añadiendo el padding al exterior de la
caja, en vez de su interior, esto se ve ya que el div contenido tiene un color
de fondo y se ve como se superpone al menu derecho.
Si reducimos lo que ampliamos de padding al width del contenido vuelve a encajar, pero esto en firefox no deberia ser asi, no se supone que el padding en firefox va dentro del width? Es decir, por poner mas padding, aumenta el width...
Por otro lado nos ocurre otra cosa cursiosa, tenemos el susdicho p que dentro
carga mediante php un texto, este texto esta generado mediante un gestor de
contenidos con un rich text editor que genera divs de alineamiento, etc. Nos
sucede que el texto que esta despues de un div pierde las propiedades del p que
lo contiene, es decir:
Aqui texto bla bla bla esto a la
derechaMas bla bla bla
Pues bien lo de antes del div toma los estilos definidos para p, pero lo de despues de cerrar el div no los pilla...
Muchas gracias de antemano.
Saludos :)
___
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://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://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://ovillo.org/mailman/listinfo/ovillo
RE: [Ovillo] Problemas con padding
Firefox lo está haciendo bien, así es como dice la especificación que se debe
comportar.
http://www.disenorama.com/articulos/css/el_modelo_de_cajas.htm
parece raro, pero piensa en esto:
div{
width:50px;
padding-left:50px;
padding-right:50px;
}
que debería hacer el navegador? con el modelo de cajas del w3c queda claro lo
que debe hacer.
en cuanto a lo último... no lo se. No se por que te da ese error, no obstante
dentro de un p meter un div no me parece muy logico, ta vez un span... no lo
se, habría que pensar.
Pero la verdad que desconozco por que te hace eso, puedes enviar el css?
On 26/May/2005 13:12:22, [EMAIL PROTECTED] wrote:
> Hola,
>
> aprovecho para saludaros a todos, he comenzado hace poco con CSS en serio, y
> la lista me ayuda mucho a aclarar algunos conteptos que no tenia claros.
>
> La verdad que el problema que tengo me sorprende bastante. Tengo un div
> contenedor que a su vez contiene 3 divs para un layout de 3 columnas de tipo
> float left. El div #menuizquierdo mide de ancho 150px y no tiene ni margenes
> ni bordes. El div #contenido (el central) mide 458px de ancho y tiene 1px de
> margen por cada lateral, y finalmente tengo el div #menuderecho que mide
> 150px y tampoco tiene ni margenes ni bordes.
>
> Esto encaja perfecto ya que el div #contenedor mide 760px de ancho.
>
> El problema me aparece en un cambio que no deberia afectar en firefox (si en
> Ie, ya que el tema es de padding). Aqui os expongo el problema.
>
> El div contenido en principio no tenia padding, y solamente contiene un h1 y
> un p. Con esta situacion usabamos margin para que el h1 y el p no estuvieran
> pegados a los menus laterales.
>
> Por cuestiones que no vienen al caso, para dejar aire del contenido a los
> bordes de este div pensamos en ponerle padding al div contenido, en vez de
> darle margin a los elementos h1 y p. Cual es nuestra sorpresa que al ponerle
> un padding lateral de 15px a cada lado, se nos descoloca la columna derecha!
> es como si firefox funcionara como IE, añadiendo el padding al exterior de la
> caja, en vez de su interior, esto se ve ya que el div contenido tiene un
> color de fondo y se ve como se superpone al menu derecho.
>
> Si reducimos lo que ampliamos de padding al width del contenido vuelve a
> encajar, pero esto en firefox no deberia ser asi, no se supone que el padding
> en firefox va dentro del width? Es decir, por poner mas padding, aumenta el
> width...
>
> Por otro lado nos ocurre otra cosa cursiosa, tenemos el susdicho p que dentro
> carga mediante php un texto, este texto esta generado mediante un gestor de
> contenidos con un rich text editor que genera divs de alineamiento, etc. Nos
> sucede que el texto que esta despues de un div pierde las propiedades del p
> que lo contiene, es decir:
>
>
> Aqui texto bla bla bla esto a la
> derechaMas bla bla bla
>
>
> Pues bien lo de antes del div toma los estilos definidos para p, pero lo de
> despues de cerrar el div no los pilla...
>
> Muchas gracias de antemano.
>
> Saludos :)
> ___
> 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://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://ovillo.org/mailman/listinfo/ovillo
[Ovillo] Problemas con padding
Hola, aprovecho para saludaros a todos, he comenzado hace poco con CSS en serio, y la lista me ayuda mucho a aclarar algunos conteptos que no tenia claros. La verdad que el problema que tengo me sorprende bastante. Tengo un div contenedor que a su vez contiene 3 divs para un layout de 3 columnas de tipo float left. El div #menuizquierdo mide de ancho 150px y no tiene ni margenes ni bordes. El div #contenido (el central) mide 458px de ancho y tiene 1px de margen por cada lateral, y finalmente tengo el div #menuderecho que mide 150px y tampoco tiene ni margenes ni bordes. Esto encaja perfecto ya que el div #contenedor mide 760px de ancho. El problema me aparece en un cambio que no deberia afectar en firefox (si en Ie, ya que el tema es de padding). Aqui os expongo el problema. El div contenido en principio no tenia padding, y solamente contiene un h1 y un p. Con esta situacion usabamos margin para que el h1 y el p no estuvieran pegados a los menus laterales. Por cuestiones que no vienen al caso, para dejar aire del contenido a los bordes de este div pensamos en ponerle padding al div contenido, en vez de darle margin a los elementos h1 y p. Cual es nuestra sorpresa que al ponerle un padding lateral de 15px a cada lado, se nos descoloca la columna derecha! es como si firefox funcionara como IE, añadiendo el padding al exterior de la caja, en vez de su interior, esto se ve ya que el div contenido tiene un color de fondo y se ve como se superpone al menu derecho. Si reducimos lo que ampliamos de padding al width del contenido vuelve a encajar, pero esto en firefox no deberia ser asi, no se supone que el padding en firefox va dentro del width? Es decir, por poner mas padding, aumenta el width... Por otro lado nos ocurre otra cosa cursiosa, tenemos el susdicho p que dentro carga mediante php un texto, este texto esta generado mediante un gestor de contenidos con un rich text editor que genera divs de alineamiento, etc. Nos sucede que el texto que esta despues de un div pierde las propiedades del p que lo contiene, es decir: Aqui texto bla bla bla esto a la derechaMas bla bla bla Pues bien lo de antes del div toma los estilos definidos para p, pero lo de despues de cerrar el div no los pilla... Muchas gracias de antemano. Saludos :) ___ 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://ovillo.org/mailman/listinfo/ovillo
