Foros del Web » Creando para Internet » CSS »

Alineación con IE, Chrome y Firefox

Estas en el tema de Alineación con IE, Chrome y Firefox en el foro de CSS en Foros del Web. Hola, Perdonad la duda de principiante, no estoy acostumbrado a trabajar con dreamweaver y a veces me quedo atascadísimo. Estoy terminando una página con html ...
  #1 (permalink)  
Antiguo 02/02/2010, 07:43
 
Fecha de Ingreso: enero-2010
Mensajes: 29
Antigüedad: 7 años, 11 meses
Puntos: 0
Alineación con IE, Chrome y Firefox

Hola,

Perdonad la duda de principiante, no estoy acostumbrado a trabajar con dreamweaver y a veces me quedo atascadísimo.

Estoy terminando una página con html y css y los títulos y el texto quedan perfectamente alineados en IE, usando vertical-align:tex-top. Pero en Firefox y Chrome me sale todo descolocado y ya he probado con esa propiedad, margin y pading, pero nada.

¿Cómo puedo conseguir que el texto quede alineado arriba en Firefox y Chrome?


gracias!

PD: En este foro estoy aprendiendo muchísimo, muchas gracias a todos!


<!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=utf-8" />
<title>Documento sin título</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>


<body id="tapiz">



<div id="despliegue">

<div id="encabz">
</div>

<div id="contenido">
<table width="100%" border="0" cellspacing="20px" id="tablagrande">
<tr>
<td id="cbotones">
<table width="100%" border="0" cellspacing="0px" id="botylog">
<tr>
<td id="botones">
<ul id="menu">
<li><a href="#">Inicio</a>
<li><a href="#">Quienes&nbsp;somos</a>
<li><a href="#">Metodología</a>
<li><a href="#">Noticias</a>
<li><a href="#">Descargas</a>
<li><a href="#">Equipo</a>
<li><a href="#">Enlaces</a>
</ul>
</td>
</tr>

<tr>
<td id="logos">logos</td>
</tr>
</table>
</td>

<td id="ccontenido">
<h4>El titular va aquí</h4>
<p>Esto es un ejemplo de texto, esto es un ejemplo de texto, esto es un ejemplo de texto, esto es un ejemplo de texto, esto es un ejemplo de texto, esto es un ejemplo de texto, esto es un ejemplo de texto, esto es un ejemplo de texto, esto es un ejemplo de texto, esto es un ejemplo de texto, esto es un ejemplo de texto</p>
</td>


<td id="cenlaces">&nbsp;
</td>

</tr>
</table>

</div>

</div>


</body>
</html>




@charset "utf-8";

}

body {
background-color: #97BEC6;
}
#tapiz {
background-color: #428CB0;
background-image: url(images/azul.jpg);
}



#despliegue {
background-color: #003C65;
width: 1000px;
margin: 0px auto;
height: 625px;
margin-top: 0px;
}

#encabz {
background-color: #03F;
height: 150px;
width: 980px;
margin: 0px auto;
margin-top: 10px;
padding-top: 0px;
background-image: url(images/titulo.jpg);
}

#contenido {
background-color: #FFF;
width: 980px;
height: 425px;
margin: 30px auto 0px auto;
}
#tapiz #despliegue #contenido #tablagrande tr #cbotones {
width: 15%;
}
#tapiz #despliegue #contenido #tablagrande tr #ccontenido {
width: 65%;
vertical-align: text-top;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: 14px;
}

#tapiz #despliegue #contenido #tablagrande tr #cenlaces {
width: 20%;
}

#tapiz #despliegue #contenido #tablagrande tr #cbotones #botylog tr td #menu {
margin: 0px;
list-style-type: none;
padding:0px;
width: 120px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
line-height: normal;
font-weight: bold;
}

#tapiz #despliegue #contenido #tablagrande tr #cbotones #botylog tr td #menu li {
text-align: center;
margin-top: 0px;
margin-right: 0;
margin-bottom: 6px;
margin-left: 0;
}

#tapiz #despliegue #contenido #tablagrande tr #cbotones #botylog tr td #menu li a {
padding: 3px 0;
display: block;
text-decoration: none;
background-color: #428CB0;
color: #FFF;
}

#tapiz #despliegue #contenido #tablagrande tr #cbotones #botylog tr td #menu li a:hover, ul#menu li a:active {
background-color: #71BDDA;
color: #FFF;
}






#tapiz #despliegue #contenido #tablagrande tr #cbotones #botylog tr #logos {
padding-top: 15px;
}
  #2 (permalink)  
Antiguo 02/02/2010, 11:16
Avatar de morior  
Fecha de Ingreso: agosto-2009
Ubicación: Barcelona
Mensajes: 437
Antigüedad: 8 años, 4 meses
Puntos: 12
Respuesta: Alineación con IE, Chrome y Firefox

Cómo cuesta de ver ése código. Sí, IE firefox y chrome tienen formas distintas de alinear los objetos de la web, sobre todo el que da problemas es nuestro querido IE.

Yo lo soluciono a través de CSS

Por ejemplo con esto consigues que un objeto quede centrado en todos los navegadores:

Código PHP:
#objeto{
    
width:1200px;
    
height:180px;
     
width100%;
    
margin0px;
    
marginauto;
    
/* Centrar en IE */
    
displayblock;
    
backgroundurl(imagenes/top.pngno-repeat center top;

¿Era esto lo que buscabas?

Y bueno, respecto al código te recomiendo que lo pongas entre las etiquetas de código que se entiende mejor y es más fácil de ver.
  #3 (permalink)  
Antiguo 02/02/2010, 11:41
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Alineación con IE, Chrome y Firefox

Cita:
Iniciado por morior Ver Mensaje
#objeto{
width:1200px;
height:180px;
width: 100%;
margin: 0px;
margin: auto;

/* Centrar en IE */
display: block;
background: url(imagenes/top.png) no-repeat center top;
}
Un poco contradictorio.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #4 (permalink)  
Antiguo 03/02/2010, 07:17
 
Fecha de Ingreso: enero-2010
Mensajes: 29
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: Alineación con IE, Chrome y Firefox

Gracias a los 2,

pero creo que no me he explicado bien. Lo que quiero centrar no es un objeto, sino el texto que hay una columna. Y no quiero centrarlo, quiero alinearlo arriba. Concretamente se trata del texto que hay en "ccontenido", que tiene el siguiente código:


}
#tapiz #despliegue #contenido #tablagrande tr #ccontenido {
width: 65%;
vertical-align: text-top;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
font-size: 14px;
}


En IE me sale alineado arriba, tal y como yo quiero, pero Firefox y Chrome me lo mueven para abajo. ¿Qué debo hacer para quede arriba?
  #5 (permalink)  
Antiguo 03/02/2010, 07:21
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Alineación con IE, Chrome y Firefox

Hola nueve, hasta que decides maquetar con div y dejar de un lado las tablas, yo te voy a ser muy poco útil.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #6 (permalink)  
Antiguo 03/02/2010, 07:53
 
Fecha de Ingreso: enero-2010
Mensajes: 29
Antigüedad: 7 años, 11 meses
Puntos: 0
Respuesta: Alineación con IE, Chrome y Firefox

cómo se haría maquetando con div?


es muy diferente a como se haría con una tabla?


y lo que es más importante... como alinear un texto superiormente en una columna puede ser tan difícil?!


acabo de hacer un curso de diseño web y me lo enseñaron todo con tablas, me siento un poco timado, la verdad...
  #7 (permalink)  
Antiguo 03/02/2010, 11:17
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Alineación con IE, Chrome y Firefox

Cita:
Iniciado por nueve Ver Mensaje
cómo se haría maquetando con div?


es muy diferente a como se haría con una tabla?


y lo que es más importante... como alinear un texto superiormente en una columna puede ser tan difícil?!


acabo de hacer un curso de diseño web y me lo enseñaron todo con tablas, me siento un poco timado, la verdad...
Prueba con esto y con esto.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.

Etiquetas: chrome, firefox
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:28.