Comunidad:
Tengo una página en html con sus respectivas hojas de estilo.
Cuento corto: al visualizarlas en Firefox se descuadran las tablas creadas
con respecto a lo que tengo en IExplorer, lo mismo con Google Chrome.
Adjunto el código html y el css:
HTML:
<!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>Ingreso de cargas</title>
<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_valida teForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
} }
//-->
</script>
</head>
<link rel="stylesheet" type="text/css" href="estiloingresar.css"/>
<div align="center">
<h1>Módulo de Cargas</h1>
</div>
<br />
<br />
<br />
<div id="menuIngresar">
<body bgcolor="#33FF99">
<b>Ingrese los datos pedidos a continuación:</b>
</div>
<br />
<br />
<br />
<br />
<div id="tablaIzquierda">
<form name="Form1" action="desplegar.html">
<table width="400" border="0" cellspacing="5" cellpadding="2">
<tr>
<td><b>RUT </b></td>
<td><input name="rut" type="text" id="rut" size="15" maxlength="10"/>
<i>Ejemplo: 12114175-2</i></td>
</tr>
<tr>
<td><b>NOMBRE</b></td>
<td><input name="nombre" type="text" id="nombre" size="40" maxlength="20" fon /></td>
</tr>
<tr>
<td><b>APELLIDO</b></td>
<td><input name="apellido" type="text" id="apellido" size="40" maxlength="30" /></td>
</tr>
<tr>
<td> </td>
<td align="center"><input name="ingresar" type="button" value="Ingresar" style="font-size:16px" onclick="validar_ingreso();MM_validateForm('rut',' ','R','nombre','','R','apellido','','R');return document.MM_returnValue" /></td>
</table>
</form>
</div>
<div id="tablaDerecha" >
<table width="400" border="0" cellspacing="5" cellpadding="2">
<tr>
<td><b>*** El RUT debe ingresarlo sin puntos: Haga caso y no sea lonji </b></td>
</tr>
<tr>
<td><b>*** El nombre no debe exceder los 30 caracteres</b></td>
</tr>
<tr>
<td><b>*** Si quere ingrese los 2 apellidos altiro: Máximo 20 caracteres</b></td>
</tr>
<tr>
</table>
</div>
<br />
<br />
<br />
<br />
<br />
<div align="center">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table width="700" border="0" cellspacing="20px" cellpadding="10px">
<tr>
<td><a href="menu.html">Menú Principal</a></td>
<td><a href="eliminar.html">Eliminar datos</a></td>
<td><a href="modificar.html">Modificar datos</a></td>
<td><a href="desplegar.html">Desplegar información</a></td>
</tr>
</table>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
#menuIngresar{
text-align:justify;
color:#900;
margin-left:80px;
font-style=text-transform: uppercase;
}
#tablaIzquierda{
float:left;
margin-left:110px;
}
#tablaDerecha{
float:right;
margin-right:110px;
color:#C00;
text-decoration:underline;
}
#piePagina{
float:none;
text-align:center;
color:#006;
size:12px;
margin:190px;
}
Cualquier ayuda es bien recibida.