Alineamiento vertical en Explorer y Mozilla

AjoyAgua · #1 (**permalink**) 18/01/2012, 00:02

Hola amigos necesito ayuda. Tengo una tabla al 100% de tamaño vertical y el problema que tengo es que en IE si meto texto en ella me sale un poco más abajo de lo normal, no arriba del todo como en los demás navegadores (Opera y Chrome). Y en Mozilla sale más abajo aún.

He puesto a las propiedades de la tabla el vertical valign top y sólo sirve para subir pero muy poco.

También lo he intentado con CSS pero tampoco me sirve.

¿Me podéis echar una mano?.

emprear · #2 (**permalink**) 18/01/2012, 08:59

Con las celdas con

Css
padding: 0;
vertical-align: top;

ó en los atributors de tu tabla

cellpadding="0" en <table>
y
valign="top" en las <td>

tiene que ponerse al tope, cualquier otro efecto, deberías postear tu código para ver que es lo que afecta

Saludos

AjoyAgua · #3 (**permalink**) 18/01/2012, 20:29

Os voy a explicar, el contenido del lateral izquierdo si crece (botones y demás) hace que el contenido de la capa central donde va el otro texto se vaya hacia abajo, y yo quiero que aunque crezca el contenido de la columna lateral izquierda, no se me deforme el otro contenido de la tabla del centro y que quede siempre arriba, aunque abajo se vea un espacio vacío.

CODIGO:

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>
<title>MUESTRA</title>
<style type="text/css">
<!--

img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.nuevo   {
	vertical-align: top;
	padding: 0;
}
#CAPOTA {
	position:relative;
	left:-20px;
	top:-10px;
	vertical-align: top;
	padding: 0;
	width:850px;
	height:100%;
	z-index:1;
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
}

#capacabecera {
	position:absolute;
	left:0px;
	top:0px;
	width:850px;
	height:139px;
	z-index:1;
}
#capabotonera {
	position:absolute;
	left:0px;
	top:144px;
	width:850px;
	height:20px;
	z-index:2;
}

#capa_del_video {
	position:absolute;
	left:294px;
	top:221px;
	width:464px;
	height:282px;
	z-index:3;
	background-color: #009999;
}
#capa1 {
	position:absolute;
	left:283px;
	top:189px;
	width:483px;
	height:27px;
	z-index:4;
	background-color: #990000;
}
.texto_pequeño {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
}


.titulovideo {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 13px;
	font-style: italic;
	font-weight: bold;
	color: #CC3300;
	text-align: center;
}
.tabla_izquierda {
	background-color: #FFFFFF;
	top: auto;
}

#capa_descripcion_video {
	position:absolute;
	left:300px;
	top:526px;
	width:450px;
	height:35px;
	z-index:5;
}
#capa-sombra {
	position:absolute;
	left:0px;
	top:170px;
	width:850px;
	height:17px;
	z-index:9;
	background-image: url(nuevaestructura2012/sombra.png);
}
.novedades_capa {
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
	font-style: normal;
	color: #990000;
	text-decoration: underline;
	text-align: center;
}
#capa_lateral {
	position:absolute;
	left:0px;
	top:177px;
	width:204px;
	height:100%;
	z-index:8;
}



#capa_videos_izquierda {
	position:absolute;
	left:217px;
	top:219px;
	width:67px;
	height:166px;
	z-index:6;
}
#capa_videos_derecha {
	position:absolute;
	left:767px;
	top:220px;
	width:70px;
	height:345px;
	z-index:7;
}

-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>

<style type="text/css">
<!--
body {
	background-image: url(fondo1.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top center;
}
.Estilo1 {color: #FF0000}
-->
</style>

<style type="text/css">
<!--
.Estilo5 {font-size: 10px}
.Estilo6 {	color: #009966;
	font-size: 24px;
}
.Estilo3 {font-size: 12px; line-height: 16px; text-align: left; font-family: Verdana, Arial, Helvetica, sans-serif;}
-->
</style>
</head>

<body>
<div id="CAPOTA">
<div id="capacabecera">CABECERA</div>
<div id="capabotonera">AQU&Iacute; VA UN INCLUDE CON LA BOTONERA</div>
<div id="capa_del_video">AQUI VA UN VIDEO</div>
<div id="capa1">TITULOTITULO</div>
<div class="titulovideo" id="capa_descripcion_video">TITULO VIDEO</div>
<table width="851" height="100" border="0" cellpadding="0" cellspacing="0" class="nuevo" id="Tabla_01">
	<tr>
		<td>
		  <img src="1.jpg" width="204" height="144" alt=""></td>
		<td valign="top" rowspan="3"><img src="2.jpg" width="646" height="595" alt="" /></td>
<td>
		<img src="espacio.gif" width="1" height="144" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="3.jpg" width="204" height="27" alt=""></td>
		<td>
			<img src="espacio.gif" width="1" height="27" alt=""></td>
	</tr>
	<tr>
	  <td valign="top" rowspan="2" ><table width="204" height="100%" border="0" align="top" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="tabla_izquierda" id="Tabla_04">
	   <tr>
            <td valign="top" height="100%">AQUI VA CONTENIDO<br />
contenido</td>
	      </tr>
      </table></td>
  <td>
			<img src="espacio.gif" width="1" height="418" alt=""></td>
	</tr>
	<tr>
		<td valign="top" height="100%" background="5.jpg"><table width="645" border="0" cellpadding="0" bgcolor="#FFFFFF" class="nuevo" id="tablared">
          
<tr>
                        <th width="19" scope="col">&nbsp;</th>
                        <th width="275" scope="col"><div align="left"><span class="titulos">otro titulo</span><br />
                        </div></th>
                        <th scope="col"><span class="titulos3">un titulo</span></th>
                        <th width="3" scope="col">&nbsp;</th>
          </tr>
                      <tr>
                        <td><div align="left">
                          <p class="titulos"><span class="autores"><br />
                            </span></p>
                        </div></td>
                        <td>&nbsp;</td>
                        <td>aqui una foto</td>
                        <td>&nbsp;</td>
                      </tr>
                      <tr>
                        <td>&nbsp;</td>
                        <td colspan="2"><span style="margin-bottom: 5pt"><span class="creditos"><span class="Estilo6"> <span style="font-variant:normal; letter-spacing:normal; line-height:24px; orphans:2; text-align:-webkit-auto; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px; -webkit-text-size-adjust:auto; -webkit-text-stroke-width:0px; background-color:rgb(234, 234, 234); display:inline !important; float:none; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:rgb(51, 51, 51); font-style:normal; font-weight:normal; ">Madrid. (EUROPA PRESS).- La firma automovil&iacute;stica Audi, con la llegada del invierno, pondr&aacute; en marcha la edici&oacute;n de 2012 de sus cursos de conducci&oacute;n sobre hielo y nieve, en los que los clientes</span>   <span style="font-variant:normal; letter-spacing:normal; line-height:24px; orphans:2; text-align:-webkit-auto; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px; -webkit-text-size-adjust:auto; -webkit-text-stroke-width:0px; background-color:rgb(234, 234, 234); display:inline !important; float:none; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:rgb(51, 51, 51); font-style:normal; font-weight:normal; ">Madrid. (EUROPA PRESS).- La firma automovil&iacute;stica Audi, con la llegada del invierno, pondr&aacute; en marcha la edici&oacute;n de 2012 de sus cursos de conducci&oacute;n sobre hielo y nieve, en los que los clientes</span>   <span style="font-variant:normal; letter-spacing:normal; line-height:24px; orphans:2; text-align:-webkit-auto; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px; -webkit-text-size-adjust:auto; -webkit-text-stroke-width:0px; background-color:rgb(234, 234, 234); display:inline !important; float:none; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:rgb(51, 51, 51); font-style:normal; font-weight:normal; ">Madrid. (EUROPA PRESS).- La firma automovil&iacute;stica Audi, con la llegada del invierno, pondr&aacute; en marcha la edici&oacute;n de 2012 de sus cursos de conducci&oacute;n sobre hielo y nieve, en los que los clientes</span>   <span style="font-variant:normal; letter-spacing:normal; line-height:24px; orphans:2; text-align:-webkit-auto; text-indent:0px; text-transform:none; white-space:normal; widows:2; word-spacing:0px; -webkit-text-size-adjust:auto; -webkit-text-stroke-width:0px; background-color:rgb(234, 234, 234); display:inline !important; float:none; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:rgb(51, 51, 51); font-style:normal; font-weight:normal; ">Madrid. (EUROPA PRESS).- La firma automovil&iacute;stica Audi, con la llegada del invierno, pondr&aacute; en marcha la edici&oacute;n de 2012 de sus cursos de conducci&oacute;n sobre hielo y nieve, en los que los clientes</span> <br />
                          <br />
                        </span></span><span class="creditos"><br />
</span></span></td>
                        <td>&nbsp;</td>
                      </tr>
                      <tr>
                        <td>&nbsp;</td>
                        <td colspan="2"><span class="creditos"><span class="DESCRIPCION"><br />
                        </span><br />
                        </span></td>
                        <td>&nbsp;</td>
                      </tr>
                      <tr>
                        <td>&nbsp;</td>
                        <td><br />
                        <br />
                        <br />
                        <br />
                        <br /></td>
                        <td><br />
                        <br /></td>
                        <td>&nbsp;</td>
                      </tr>
      </table>	  </td>

	</tr>
	<tr>
		<td colspan="2">
			<table width="850" height="40px" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFC95F" id="Tabla_02">
<tr>
					<td width="36" height="100%">&nbsp;</td>
			        <td width="237">PIE DE PAGINA</td>
			        <td width="577" bgcolor="#FFC95F">&nbsp;</td>
			  </tr>
	  </table></td>
<td>
			<img src="espacio.gif" width="1" height="40" alt=""></td>
	</tr>
</table>
</div>
</body>
</html>

emprear · #4 (**permalink**) 18/01/2012, 21:24

Estimada @AjoyAgua. Para serte sincero, tu código es decididamente caótico, más que buscarle un parche para corregir algo, habría que reacerlo desde cero.
Maquetar con tablas es completamente desaconsejable, y si lo hicieses con tablas, todos esos divs posisionados no tienen mucho objeto.

Mi recomendación es que te des una vuelta por librosweb.es y leas los manuales de introducción a xhtml y css, si querés algo más breve, pero bien explicado
http://www.araudi.net/migracion/migr...sin_dolor.html

Saludos

AjoyAgua · #5 (**permalink**) 18/01/2012, 21:37

Lo se emprear tienes toda la razón, por eso ahora estoy decidida a rehacer toda la web pero en divs. La web se ha llevado años así pero ahora necesito restructurarla. Voy a leer manuales sobre css y divs.

En dreamweaver he hecho una estructura similar con divs, a ver que te parece:

http://www.forosdelweb.com/f4/capa-div-pie-pagina-970666/

Muchas gracias por contestar emprear.

emprear · #6 (**permalink**) 18/01/2012, 23:52

MUCHISIMO MEJOR !!!!

hay un par de errores minimos, que quizás son incluso producto del copiar y pegar en el bbcode del Foro.
Y simplificá los styles de los span, no se si hace falta tanto (esos que dice "este comportamiento")

Te felicito
Saludos