Hola
Estoy haciendo una pagina web, y al posicionar una div a 95px del top encaja en el sitio justo del fondo en el que quiero,(el fondo es una imajen) en google chrome, pero si lo abro con firefox esta desplazado hacia abajo para q encage tengo q cambiar la posicion a 65px del top, pero el fallo en el posicionamiento solo me sucede en el siguiente codigo
Código 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>
<!--INFORMACION DE LA PAGINA-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<style type="text/css">
.num {
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-right-style: solid;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
}
.abajo {
background-color: #FC7208;
margin: auto;
width: 682px;
padding-top: 15px;
padding-bottom: 15px;
bottom: 100px;
}
footer {
font-size: xx-large;
color: #CCC;
background-color: #FC7208;
margin: auto;
width: 682px;
padding-top: 25px;
padding-bottom: 25px;
border-radius: 0px 0px 30px 30px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.basic {
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-right-style: none;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
}
body {
background-image: url(imagenes/fondo.jpg);
background-repeat: repeat;
}
.num2 {
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
}
table {
border: medium solid #666;
height: auto;
width: auto;
}
.igual {
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-left-style: solid;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
}
.result {
color: #000;
font-family: Digital-7;
font-size: 100px;
text-align: center;
font-style: oblique;
margin: auto;
position: relative;
top: 95px;
}
#button {
margin: 0px;
height: 40px;
}
.bajoigu {
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-left-style: solid;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
border-top-style: none;
border-right-style: none;
}
.calcup {
background-image: url(imagenes/XAMPP%20Control.png);
background-repeat: repeat-x;
height: 230px;
width: 500px;
margin: auto;
}
.laterales {
background-image: url(imagenes/laterales.png);
background-repeat: no-repeat;
margin: auto;
width: 682px;
border-radius: 30px 30px 0px 0px;
height: 230px;
}
.borde {
border-top-width: medium;
border-right-width: medium;
border-bottom-width: medium;
border-left-width: medium;
border-right-style: solid;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
}
footer a {
font-family: "Lucida Console", Monaco, monospace;
font-size: 36px;
font-weight: bold;
color: #000;
text-decoration: none;
text-align: center;
}
</style>
</head>
<body>
<div class="laterales">
<div class="calcup">
<!--Esto nose que funcion tiene pero estaria bueno aclararlo-->
<div class="result">
<?php
$num=$_POST['num'];
$num2=$_POST['num2'];
$basic=$_POST['basic'];
if($basic=='suma'){
$ok= $num + $num2;
} elseif($basic=='resta') {
$ok= $num - $num2;
} elseif($basic=='multi') {
$ok= $num * $num2;
} elseif($basic=='div') {
$ok= $num / $num2;
} elseif($basic=='cuadrado') {
$ok= $num * $num;
} elseif($basic=='bicuadrado') {
$ok=$num * $num * $num * $num;
} elseif($basic=='porcent') {
$ok=($num2 / 100) * $num;
}
echo $ok;
?>
</div>
</div>
</div>
<div class="abajo">
<form action="calculator.php" method="post" ID="Formulario" Name="Formulario">
<center>
<table width="423px">
<tr>
<td class="num"width="auto">
<!--Primer numero a operar-->
<input type="text" name='num' id="textfield" size="10px" value="<?php echo $num; ?>" />
</td>
<td class="basic" width="auto">
<!--Operaciones posibles-->
<select name="basic" id="basic" onchange="mostrarporcentaje();">
<option value="suma">+ Sumar</option>
<option value="resta">- Restar</option>
<option value="multi">X Multiplicar</option>
<option value="div">/ Dividir</option>
<option value="cuadrado">x2</option>
<option value="bicuadrado">x4</option>
<option value="porcent">% Porcentaje</option>
</select>
</td>
<td id="num2" width="auto" class="num2" >
<!--Segundo numero a operar-->
<input type="text" name="num2" size="10px" value="<?php echo $num2; ?>" />
<!--Muestro icono segun la operacion-->
<b id="icono" name="icono"></b>
</td>
<td width="38px" class="igual">
<!--Boton para calcular-->
<input type="submit" name="button" id="button" value="=" />
</td>
</tr>
</table>
<div class="borde"></div>
</center>
</form>
</div>
<footer>
<a href="usuario.php">Regresar</a>/<a href="salir.php">salir</a>
</footer>
</body>
</html> ¿alguie sabe que pasa y como solucionarlo?