No funcionan algunos links en spans

Seppo · #1 (**permalink**) 23/12/2005, 08:29

Buenas gente.
Sigo incursionando en CSS, pero desalentado por varios malos resultados...
En el siguiente código tengo una tabla paginada, pero la paginación la hago con spans.
El problema es, con FireFox, que andan algunos links a su antojo, y quiero, obviamente, que anden todos.
Fijense que en este no anda el de próxima página (class c3) y sí el de última página (class c4).

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>MARCAR</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
	background-color:#eeeeee;
	padding-top:24px;
	padding-left:10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
}

#menu {
	background-color:#CCCCCC;
	position:absolute;
	color:#333333;
	border-color:#000000;
	border-width:thin;
	border-style:outset;
	width:124px;
	height:400px;
	padding: 6px 2px 6px 4px;
}

#menu li {
	display:block;
	width:80px;
	padding:4px 0px 0px 0px;
	border: 0px solid #000000;
	line-height: 20px;
	margin: 2px 2px 2px -20px;
	list-style-type: none;
	list-style-position:outside;
}

#menu li a {
	text-decoration:none;
	background-color: #000000;
	color:#FFFFFF;
	width:100%;
	height:100%;
	display:block;
	padding:4px 0;
	text-align:center;
	font-size:11px;
}

#menu li a:hover {
	color:#99CC00;
	background-color:#003366;
}

#main {
	background-color:#CCCCCC;
	color:#222222;
	border-color:#000000;
	border-width:thin;
	border-style:outset;
	width:704px;
	height:400px;
	padding: 10px 4px 2px 4px;
	margin-left:140px;
	position:absolute;
	overflow:auto;
}

table {
	table-layout:fixed;
	border: thin solid #000000;
	width:98%;
	background-color:#EEEEEE;
	margin: 4px 4px 4px 4px;
}

td {
	border: thin none #666666;
	padding: 2px 2px 2px 2px;
	height:1em;
}

a {
	text-decoration:none;
	color:#003366;
}

input.textForm {
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
	border-style:none;
	background-color:#DDDDDD;
	width:114px;
}

select.textForm {
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
	border-style:none;
	background-color:#DDDDDD;
	width:114px;
}

textarea.textForm {
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
	border-style:none;
	background-color:#DDDDDD;
	width:100%;
	height:80px;
}

input.buttonForm {
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	font-style:normal;
	border-color:#CCCCCC;
}

h1 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	font-style:normal;
	text-decoration:none;
	font-weight:bold;
	color:#003399;
	padding-left:8px;
	position:relative;
}

td.mini {
	font-size:10px;
	font-weight:100;
}
span.c1 {width:24%; position:absolute; padding-left:0%;}
span.c2 {width:24%; position:absolute; padding-left:25%;}
span.c3 {width:24%; position:absolute; padding-left:50%;}
span.c4 {width:24%; position:absolute; padding-left:75%;}
span.c5{width:40%; position:absolute; text-align:right;}
span.c6{width:50%; position:absolute; text-align:left; padding-left:42%; }
span.editar {width:50%; position:absolute; text-align:left; padding-left:42%; }
span.nuevo {padding-left:4px; padding-top:20px; position:absolute}
tr.c1 {background-color:#999999}
tr.c2 {cursor:pointer; }
.textLink {
	text-decoration:none;
	color:#000066;
}
</style>
<script language="javascript" type="text/javascript">
function confirmar() {
	if (!confirm("¿Esta seguro que desea eliminar esta cuenta?"))  {
		return false
	} else {
		document.formulario.usuario.value = "";
		document.formulario.submit();
	}
}
</script>
</head>

<body>
<div id="menu">
 <ul>
<li><a href="stock.php">Ver stock</a></li>

<li><a href="ingreso.php">Ver ingresos</a></li>
<li><a href="egreso.php">Ver egresos</a></li>
<li><a href="usuario.php">Usuarios</a></li>
<li><a href="producto.php">Productos</a></li>
<li><a href="cliente.php">Clientes</a></li>
<li><a href="texto.php">Textos</a></li>
<li><a href="ningreso.php">Nuevo ingreso</a></li>
<li><a href="negreso.php">Nuevo egreso</a></li>
<li><a href="index.php?accion=logout">Salir</a></li>

</ul>
</div>
<div id="main">
<h1>Ver lista de usuarios</h1>
	<table cellpadding="0" cellspacing="0">
	  <tr style="background-color:#999999 ">
		<td>Nombre de usuario</td>
		<td>Nombre</td>
		<td>Acceso</td>

	  </tr>
		  <tr onMouseOver="this.style.backgroundColor='#DDDDDD'" onMouseOut="this.style.backgroundColor='#EEEEEE'" style="cursor:pointer " onClick="location.href='usuario.php?usuario=1'">
		<td><a class="textLink" href='usuario.php?usuario=1'>SeppoA</a></td>
		<td><a class="textLink" href='usuario.php?usuario=1'>Sebastián</a></td>
		<td><a class="textLink" href='usuario.php?usuario=1'>Administrador</a></td>
	  </tr>
		</table>

			<span class="c3"><a href="usuario.php?pag=1">Pr&oacute;xima p&aacute;gina</a></span>
	<span class="c4"><a href="usuario.php?pag=1">&Uacute;ltima p&aacute;gina</a></span>
	<span class="nuevo"><a href="usuario.php?usuario=new">Nuevo usuario</a></span>
</div>
</body>
</html>

Muchas gracias por su tiempo

RoQ · #2 (**permalink**) 23/12/2005, 09:35

Hola Seppo, el problema del link que no te funciona es porque tu ".c3" esta debajo de tu ".c4", prueba usar este codigo:

Código:

span.c3 {width:24%; position:absolute; left:50%;} 
span.c4 {width:24%; position:absolute; left:75%;}

fijate que he cambiado el "padding-left" por simplemente "left", al darle padding lo que haces es ampliar el espacio de la caja del "span", el padding es como un relleno, por lo cual la otra clase queda debajo, para que esto no pase deberias haber usado "margin", pero como estas usando posiciones absolutas puedes usar simplemente "left".
Espero te ayude