Capas y pixeles

[caneva]

¿Por qué si tengo una distribución es tres columnas mediante float, indicando en cada una un width determinado; Internet Explorer a diferencia de Firefox u Opera me muestra una de las columnas con un ancho diferente al indicado? ¿Qué solución tiene esto?

Ejemplo concreto:

Código:

Body 
{
	background: #F0F0F0 url(../img/tramado.png) repeat;
	margin: 17px 0px 17px 0px; /*Superior Derecho Inferior Izquierdo*/
	text-align: center; /* Para que en IE se alinee el bloque principal en el centro*/
	font: 12px Verdana, "Trebuchet MS", Arial, sans-serif;
}

#tsup
{
	background: url(../img/bsup.gif) no-repeat;
	height: 7px;
	width: 754px;
	margin: auto;
}

#tinf
{
	background: url(../img/binf.gif) no-repeat;
	height: 7px;
	width: 754px;
	margin: auto;
}

#bordeEXT
{
	width: 752px;
	border-top: 0px;
	border-right: 1px solid #B7B7B7;
	border-bottom: 0px;
	border-left: 1px solid #B7B7B7;
	margin: auto;	
}

#bordeINT
{
	width: 750px;
	border-right: 1px solid #3D3D3D;
	border-left: 1px solid #3D3D3D;	
}

#tablaprincipal
{
	width: 750px;
	background-color : #ffffff;	
}

#tablasecundaria
{
	width: 720px;
	margin-left: 15px;
	margin-right: 15px;
}

#seccion_index
{
	background: url(../img/muestraFLASH.jpg) no-repeat;
	height: 254px;
	margin-top: 25px;
}

#columna_izq
{
	float: left;
	width: 342px;
		margin-top: 18px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		border: 0px;
		padding: 0px;
		spadding: 0px;
	text-align:justify;
}
	
#columna_cen
{
	float: left;
	width: 342px;
	background:#FF0000;
		margin-top: 18px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		border: 0px;
		padding: 0px;
		spadding: 0px;
	text-align:justify;
	
}

#columna_der
{
	float: left;
	width: 36px;
	height: 180px;
		margin-top: 18px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		border: 0px;
		padding: 0px;
		spadding: 0px;
}

#piepag 
{
	clear: both;
	padding: 18px;
	spadding: 50px;
}

Código:

<div id="tsup"><!-- Terminación superior --></div>

<div id="bordeEXT">
	<div id="bordeINT">
		<div id="tablaprincipal">
			<div id="tablasecundaria">
				<div id="seccion_index"></div>
				<div id="columna_izq"></div>	
				<div id="columna_cen"></div>
				<div id="columna_der"><?php include('sellos.php'); ?></div>
			</div>
			<div id="piepag">PIE DE PAG</div>
		</div>
	</div>
</div>

<div id="tinf"><!-- Terminación inferior --></div>

Si sumamos (columna_izq)342px+(columna_cen)342px+(columna_der )36px = 720px = Al ancho de #tablasecundaria, esto hace que en Firerfox y Opera las cosas cuadren perfectamente, sin embargo en IE las dimensiones de la #columna_cen pasan de 342px a 345px por arte de magia (lo comprobé capturando pantalla y midiendo con photoshop), aunque si veo el código fuente esta en 342px O_O horrorizado me ando..... HELP!

[Jorolo]

Hola caneva, bienvenido/a al foro.

Iniciado por caneva

¿Por qué si tengo una distribución es tres columnas mediante float, indicando en cada una un width determinado; Internet Explorer a diferencia de Firefox u Opera me muestra una de las columnas con un ancho diferente al indicado?

¿Por qué? por que IE boicotea los estandares del w3c.

¿Por que? Por dinero, por tú dinero.

[baccxus]

Hola caneva:

Primero que todo, probé tu código y la medida en IE / Firefox es igual, no estoy en mi casa así que no la he probado en Konkeror, pero me imagino que debe ser igual también.

Por otro lado, veo que tienes mucho anidamiento de divisiones para crear algo tan simple, no sé por que, así que no congeturo sobre eso, pero deberias replantear el diseño.

Tienes un pequeño errorcillo:

Body {....

y debe ser: body {....

Y como consejo, no uses "rayita abajo" _, ni tampoco mayúsculas y minúsculas en tus CSS, de verdad que te ahorrarás muchos dolores de cabeza.

Otro consejo más, no olvides usar un DTD que te valide.

Saludos

[caneva]

Bueno en primer lugar gracias a los dos por vuestro tiempo y por la bienvenida.

En segundo lugar me gustaría comentar varias cosas:

Ya había leido que IE era muy "solidario" con el estandar w3c Jorolo, pero no imaginé que llegara hasta el punto de ser tan chapucero, tendré que ir acostumbrandome, aunque no será dificil tratandose de Mocosoft. De todas formas el reciente auge de navegadores alternativos (Firefox) hace que técnicas de control planetario como la que comentas pierdan algo de fuerza, esperemos que más cada día.

Baccxus, en cuanto a lo que me comentas de Body, la verdad en unos sitios leí que había que usar siempre minúsculas y en otros que siempre mayúsculas para H1, H2, P, A, UL, LI, EM, STRONG, etc... en las css, y no tenía claro que criterio seguir. Supongo que lo mejor será siempre utilizar minúsculas.
Respecto a lo de los guiones bajos no se porque habría de tener problemas, si pudieras darme alguna pistilla :D. También escuché que no había que usar números en las id´s (#) de una hoja de estilo; realmente no se cuanto de cierto tiene esa "advertencia", agradecería que fueras desmontando mis falsos mitos y así me ayudarías a aclararme más, porque soy muy nuevo en esto del css y necesito despejar los nubarrones de tantas webs leidas. Cada una cuenta una cosa distinta.

Por otra parte dices que has probado mi código en IE/Firefox y las medidas son iguales, pero me preguntaba si has comprobado que visualmente lo son, porque como comentaba en mi post inicial aunque en el código lo sean luego al mostrar la página no lo es (exactamente la columna_cen visualmente ocupa 345px en vez de 342px). Yo rellené las columnas_izq y _cen con texto y la columna_der con una imagen de 36px de ancho, aunque supongo que esto no afecta a nada te doy los datos por si te sirve para encontrar el error. En el caso de que al probarlo tu no haya variación de px ¿cuál podría ser el error que estoy cometiendo si el código es el mismo "supuestamente"?

En cuanto a los anidamientos, es una larga historia, quería hacer un borde de 2px (para los laterales solamente) cada uno con un color distinto, estuve preguntando en foros pero nadie me contesto (aunque ahora que he estado ojeando la FAQ de estos foros vi un ejemplo para el borde doble de distintos colores, si hay otro mejor dispáramelo), supongo que no escogí el mejor método por aquél entonces. El tema está en que por lo visto IE toma los bordes por dentro de la dimensión del div mientras que firefox y el resto lo toman por fuera de la dimensión del div (o al revés, no recuerdo bien) la cosa es que la única solución que encontré fue esa para que tanto en un navegador como en otro quedara con las dimensiones exactas que yo quería. Si tienes tiempo me gustaría que me explicaras como mejorar la maquetación de mi página para conseguir lo mismo de forma más clara. Se agradecerá cualquier consejo extra =).

Porcierto y ya que estamos... me he encontrado con muchos problemas a la hora de usar columnas con texto justificado, concretamente con nuestro odiad...er...amado IE que tiene la manía de no colocar bien los elementos en float cuando se usa alineamiento de texto, me gustaría también saber como solucionar estos problemas.

PD: ¿Qué es un DTD? ¿un validador de código de w3c?

[fer10]

hola
el DTD son las reglas que deve seguir el navegador para interpretar el codigo, a veces las cosas no te van a funcionar bien si no le pones el DTD en especial si marquetas en css2
en estas pagina te explican un poco mejor eso:
- disenorama.com/articulos/diseno-a-futuro-estandares-y-la-web
- disenorama.com/articulos/mas-alla-del-html

en esta pagina tambien de disenorama te dicen un pequeño manual de como marquetar con codigo mas simple
- disenorama.com/tutoriales/disena-una-pagina-con-codigo-semantico
(es basico pero te puede dar una idea)

sobre los _ a la hora de nombrar los stylos pues la verdad yo vi por ahy que podria causar erorres en los navegadores anteriores IE, creo que de la 4 para abajo,
pero me fije que el famoso sistema de blog de WORD PRESS usaba _ en los stylos asi que me quite de boroncas y yo en lo presonal los uso.

cuando marketas en css2 es muy probable que necesites usar hacks para IE ya que no lo interpreta como la W3C lo dice. te paso unas paginas de hacks
tanto de IE,Fire fox y opera y su solucion.

hacks IE
- positioniseverything.net/explorer.html
hacks Fire fox
- positioniseverything.net/gecko.html
hacks Opera
- positioniseverything.net/op-omnibus.html

espero que aclare tus dudas


(\_/)
(^.^)
(")(")

[baccxus]

Hola, nuevamente!

Iniciado por caneva

gradecería que fueras desmontando mis falsos mitos y así me ayudarías a aclararme más

1. body, H1, H2, P, A, UL, LI, EM, STRONG: y todo código html va en minuscula

2. Lo de la "rayita abajo", pues porque es mejor trabajar con nombres simples, te lo digo por mera experiencia, no es lo mismo:

Código:

columna_verde {}

que simplemente:

Código:

cverde {/*Esta es la columna verde*/

Usa los comentarios, son mucho más fácil de encontrar.

3. Lo de los números en los ID's es cierto.

4. Perdona, pero no pude ponerle contenido a tu código así que no fijé en si cambiaba con contenido, pero por lo general, de navegador en navegador hay variación de medidas, para eso se usa al principio de la hoja de estilos:

Código:

* {boder: 0, margin: 0, padding: 0} /*para resetear estas medidas en los navegadores*/

Tendríamos mucho que charlar acerca de lo que va aquí y allá, pero en general, buscamos un diseño que se vea "similar" en los distintos navegadores, pero que por x o y motivo no se verán nunca igual.

Saludos

[caneva]

Fer10, actualmente utilizo esta primera linea:

<?xml version="1.0" encoding="UTF-8"?>

Y el siguiente DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Por lo que he leido este es el DTD estricto ¿crees qué tiene algo que ver con mi problema de la columna que se muestra visualmente con 3px de más en IE?

Estuve leyendo todos los hacks y la verdad no encuentro cual puede estar relacionado con el problema anterior. Agradecería que me echarais una mano.

Baccxus:
body, H1, H2, P, A, UL, LI, EM, STRONG: y todo código html va en minuscula

En el w3c.org-> w3.org/TR/CSS21/intro.html esta sección donde indicaba algunas de esas etiquetas en mayúsculas:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
  <HEAD>
  <TITLE>Bach's home page</TITLE>
  <STYLE type="text/css">
    h1 { color: red }
  </STYLE>
  </HEAD>
  <BODY>
    <H1>Bach's home page</H1>
    <P>Johann Sebastian Bach was a prolific composer.
  </BODY>
</HTML>

Ves cada página dice una cosa distinta, aquí las etiquetas BODY, HTML aparecen en mayúsculas, según había leido en xhtml debian estar en minúsculas ¿qué sucede?

[caneva]

Bueno ya que nadie ha podido contestarme el porque de mi problema seguiré aportando información.

Si quito el atributo text-align: justify de cualquiera de los div-> columna_izq o columna_cen todo funciona correctamente tanto en Firefox, Opera como en Internet explorer, así que supongo que le problema está en que al poner dos capas con text-align: justify que estan alineadas pues IE deforma una de ellas...añadiendole px de más ¿alguien sabe como corregir esto? Necesito justificar el texto de las dos columnas, no solo el de una.

También me he fijado que esto solo ocurre con justifiy, si las dos capas tienen la propiedad text-align: right o una justify y la otra right, o una left y la otra right, etc... no hay problema. Solo hay problema cuando hay dos capas text-align: justify.

[SiR.CARAJ0DIDA]

mejor lee esto: http://www.positioniseverything.net/explorer.html

ahi encontras la solucion al 90% de los errores CSS de IE.

Te voy resumiendo:
Todo lo que flota o contiene un float debe tener el atributo "height", con eso arreglas 50% de los problemas.
Si tenes texto justificado en cursiva IE te expande la capa, la solucion es "overflow:visible".

Con respecto al CSS:
las etiquetas pueden ir tanto en mayuscula como en minuscula, se pueden usar caracteres alfanumericos, eso incluye el guion bajo "_" siempre y cuando no sea el primer caracter, y las etiquetas HTML deberian ir en minuscula

[caneva]

Gracias por tu ayuda, no había sido capaz de localizar que el error provenía de la cursiva, pues las columnas contenian texto en dicho formato.

Ahora me asalta otro problema relacionao con la distancia que separa #seccion_index de #columna_izq y #columna_cen. El problema consiste en que esta distancia en IE se muestra correctamente (que extraño), es decir, no hay separación entre #seccion_index y las dos columnas antes descritas, tampoco con #columna_der, sin embargo en Firefox y Opera hay una distancia que separa #seccion_index de las columnas _izq y _cen pero no de la columna _der, ignoro por que ocurre esto ya que los margenes y bordes superiores(de _izq y _cen) estan bien fijados y no hay padding.

Estuve mirando en la web positioniseverything.net/gecko.html y no he encontrado ninguna coincidencia al respecto de este problema, asi que ando bastante perdido.

[caneva]

¡Vale! hay algo que no entiendo, he conseguido solucionar el problema de mi anterior post añadiendo esto:

Código:

#columna_izq p
{
	margin: 0px;
}

#columna_cen p
{
	margin: 0px;
}

Lo que no entiendo es lo siguiente: Si yo había definido previamente esto:

Código:

#columna_izq
{
	float: left;
	width: 342px;
	overflow: visible;
	text-align: justify;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
	border: 0px;
	padding: 0px;
}

#columna_cen
{
	float: left;
	width: 342px;
	overflow: visible;
	background: #FF0000;
	text-align: justify;
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
	border: 0px;
	padding: 0px;
}

¿No se supone que según el concepto de herencia definir en <p> los valores que previamente habían sido definidos en el contenido de #columna_izq y #columna_cen (margin-top, -bottom, etc...) y teniendo en cuenta que <p> esta contenida en estas últimas no debería ser necesario? ¿por qué ocurre esto? ¿no funciona la herencia?

[SiR.CARAJ0DIDA]

hay ciertos estilos que si se heredan como todo lo referido a las fuentes, pero hay otros que no, entre ellos el margin, padding y border.

y esto:

margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;

se resume asi:

margin:0px;

[caneva]

¿Hay algúna web(preferiblemente) o manual de referencia donde pueda ver la lista completa sobre que elementos heredan y de quienes lo hacen?

Gracias por la info Carajodida.

[Jorolo]

Sí y no.

Existe la información pero no como tú la pides. No depende de los elementos html, si se hereda o no, es un valor para las propiedades css

Consultando la especificación del estandar, al definir las propiedades se indica el valor por defecto, por ejemplo:
http://www.sidar.org/recur/desdi/tra...propdef-margin

[caneva]

Gracias jorolo, porcierto ¿que diferencia hay entre las siguientes opciones?:

a) #id ul, il
b) #id ul il
c) #id ul #id il
d) #id ul, #id il


Evidentemente algunas de estas sintaxis pueden no ser válidas, en tal caso me gustaría que me lo indicaraís.

Y otra pequeña dudilla :S. Imaginemos que tengo dos identificadores distintos para dos <div> distintos (por ejemplo: #id1 y #id2), aunque los dos <div> contengan una etiqueta "<p>" cada uno. ¿Hay alguna forma de hacer referencia mediante css a #id1 p y #id2 p simultaneamente en el mismo "bloque"? me explico:

Una opción sería normal sería:

Código:

#id1 p
{}
#id2 p
{}

Pero claro me resultaría más cómodo que se pudiera hacer algo así:

Código:

a #id1, #id2
{}

Y esa es mi duda si se puede hacer y bajo que condiciones de sintaxis, gracias.

[Jorolo]

Iniciado por caneva

Gracias jorolo, porcierto ¿que diferencia hay entre las siguientes opciones?:

a) #id ul, il
b) #id ul il
c) #id ul #id il
d) #id ul, #id il


Evidentemente algunas de estas sintaxis pueden no ser válidas, en tal caso me gustaría que me lo indicaraís.

Esto es válido. (il=li supongo errata)
http://www.sidar.org/recur/desdi/tra...lector.html#q1

¿que diferencia hay entre las siguientes opciones?:

a) y d)

p em,
.azul { color: red; }

es igual a esto:
p em { color: red; }
.azul { color: red; }

Código HTML:

<style type='text/css'>
p em, .azul { color: blue; }

/* es igual a esto: */

    p em { color: blue; }
   .azul { color: blue; }


#id1,
#id2 { color: red; }

#id1,
#id3 { text-decoration: underline; }

</style>

<h2 class='azul'>Parrafo uno</h2>
<p>El <em>azul</em> es elegante</p>

<hr>

<div id='id1'><p>div id='id1</p></div>
<div id='id2'><p>div id='id2'</p></div>
<div id='id3'><p>div id='id3'</p></div> 

b) y c)

#id ul li { color: red; }

Las reglas css conviene leerlas al reves (empezando por el final) y pensar en ellas como si fueran frases.
Apliquesele: { color: red; }
a todo elemento: li
que sea descendiente de un elemento: ul
que ( a su vez...) sea descendiente de: #id

No sé si se entiende pero eso significa.

Iniciado por caneva

Y otra pequeña dudilla :S. Imaginemos que tengo dos identificadores distintos para dos <div> distintos (por ejemplo: #id1 y #id2), aunque los dos <div> contengan una etiqueta "<p>" cada uno. ¿Hay alguna forma de hacer referencia mediante css a #id1 p y #id2 p simultaneamente en el mismo "bloque"? me explico:

Una opción sería normal sería:

Código:

#id1 p
{}
#id2 p
{}

Pero claro me resultaría más cómodo que se pudiera hacer algo así:

Código:

a #id1, #id2
{}

Y esa es mi duda si se puede hacer y bajo que condiciones de sintaxis, gracias.

a #id1,
a #id2 { color: red; }

[caneva]

Entonces a ver si me he enterado bien, según tu explicación la interpretación que hará el navegador es la siguiente:

a) #id ul, li {}
Aplíquese {} a todo elemento li (este o no incluido en #id) y al elemento ul, estrictamente al elemento ul contenido en #id y no a otro.

b) #id ul li {}
Aplíquese {} a todo elemento li contenido en ul (es decir a ul no, solo a li) y a su vez contenido en #id (es decir a este #id particular no se le aplicaría tampoco, solo a li). Es decir Apliquese {} a y solo a el elemento li que cumpla la condición estrica de estar contenido dentro de ul y a su vez este en #id.

c) #id ul #id li {}
Aplíquese {} a todo elemento li contenido en #id y a su vez contenido en ul que a su vez está contenido en #id (Aunque esta estructura parece no tener mucho sentido ¿no?).

d) #id ul, #id li {}
Aplíquese {} a todo elemento li contenido en #id y a todo elemento ul contenido en #id.

e) a #id_1, a #id_2 {}
Aplíquese {} a todo elemento #id_2 contenido en a y a todo elemento #id_1 contenido en a.

Si por ejemplo queremos quitar el borde de unas cuantas imágenes concretas, pero no de todas las de la web sería:
img #img_1, img #img_2, img #img_3 { border: 0;} ¿no?
Aplíquese { border: 0; } a los id´s: #img_3, #img_2 y a #img_1 contenidos en la etiqueta <img>

[Jorolo]

Iniciado por caneva

Entonces a ver si me he enterado bien, según tu explicación la interpretación que hará el navegador es la siguiente:

a) #id ul, li {}
Aplíquese {} a todo elemento li (este o no incluido en #id) y al elemento ul, estrictamente al elemento ul contenido en #id y no a otro.

sí

Iniciado por caneva

b) #id ul li {}
Aplíquese {} a todo elemento li contenido en ul (es decir a ul no, solo a li) y a su vez contenido en #id (es decir a este #id particular no se le aplicaría tampoco, solo a li). Es decir Apliquese {} a y solo a el elemento li que cumpla la condición estrica de estar contenido dentro de ul y a su vez este en #id.

sí

Iniciado por caneva

c) #id ul #id li {}
Aplíquese {} a todo elemento li contenido en #id y a su vez contenido en ul que a su vez está contenido en #id (Aunque esta estructura parece no tener mucho sentido ¿no?).

#id1 ul #id2 li { ... }

Iniciado por caneva

d) #id ul, #id li {}
Aplíquese {} a todo elemento li contenido en #id y a todo elemento ul contenido en #id.

sí

Iniciado por caneva

e) a #id_1, a #id_2 {}
Aplíquese {} a todo elemento #id_2 contenido en a y a todo elemento #id_1 contenido en a.

sí

Iniciado por caneva

Si por ejemplo queremos quitar el borde de unas cuantas imágenes concretas, pero no de todas las de la web sería:
img #img_1, img #img_2, img #img_3 { border: 0;} ¿no?
Aplíquese { border: 0; } a los id´s: #img_3, #img_2 y a #img_1 contenidos en la etiqueta <img>

No lo entiendo, ¿Por que en vez de escribir código 'teórico'' y preguntar no escribes código de verdad y lo ves? puedes usar el ejemplo que te puse como plantilla.

[caneva]

Si bueno, tienes razón parcialmente, no era simplemente para ver si lo tenía ya del todo claro, aunque si lo pruebo pues saco las mismas conclusiones que preguntandolo. Además escondía otra oscura y maligna intención con esa pregunta O=)-> La idea era que si alguien en un futuro busca información al respecto, encuentre lo que yo no conseguí encontrar, esa especie de resumen en lo que se han convertido los últimos dos post, sin contar este mio.

[epoj]

Yo tengo para agregar!

OJO CON LAS LISTAS, controla tu html, cuando tengas listas anidadas:

<ul>
<li>item</li>
<li>item</li>
<ul>
<li>subitem</li>
<li>subitem</li>
<li>subitem</li>
<li>subitem</li>
</ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

para seleccionar solo los subitems seria:

ul ul li{}

---------------------------------

en este otro caso:

<ul>
<li>item</li>
<li>item
<ul>
<li>subitem</li>
<li>subitem</li>
<li>subitem</li>
<li>subitem</li>
</ul></li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

el selector seria:

ul li ul li{}

jeje, esto me hizo renegar mucho.

[SiR.CARAJ0DIDA]

no se pueden anidar listas de la primer forma.. un <ul>/<ol> solo puede contener items <li>
http://www.w3.org/TR/html4/struct/lists.html#h-10.2

[epoj]

estas en lo cierto! es otro detalle en que voy a empezar a fijarme! gracias