Eliminando el espacio debajo del boton submit

jcouoh · #1 (**permalink**) 18/08/2009, 05:07

HOla amigos,

Estoy haciendo mi pagina con html y css, y me gusta mucho, sin embargo me encontre alponer una forma en horizontal que el input submit me agrega un espacio adicional en la parte de abajo,

mi codigo es este:

Código HTML:

.formbutton{
cursor:pointer;
border:outset 1px #ccc;
background:#999;
color:#666;
font-weight:bold;
padding: 1px 2px;

}

solo me gustaria eliminar ese espacio en la parte de abajo y no se como hacerlo, ¿alguien me puede ayudar? Le agradezco de antemano.

Jorge

kseso? · #2 (**permalink**) 18/08/2009, 05:52

Con tan poco código no se puede ver el origen de ese espacio. Puede ser desde que el formulario tenga algún padding o margin o que le esté afectando alguna otra propiedad por el tema de la herencia en css.

Como tampoco comentas si es en todos los navegadores o en alguno en particular, pudiera ser una cuestión que se resuelva añadiendo un reset a tu css.

Incluso el hecho de si utilizas o no un doctype correcto puede influir...

Pero ante información tan somera sólo caben cábalas.

Un saludo

jcouoh · #3 (**permalink**) 18/08/2009, 06:35

Gracias por tu amable respuesta, estuve checando y lo que hice es simplificar lo que tengo para ver si asi encontraba mi error, pero no lo encontre por lo que pongo aqui tanto el html como el css (simplificado por supuesto) para ver si alguien me ayuda

Código HTML

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" lang="en" 

xml:lang="en">
<HTML><HEAD><TITLE>CHEAP WEB HOSTING | FAST, RELIABLE AND 

LOW COST|HOSPEDAJE WEB, DOMINIOS ECONOMICOS, MEXICO,DISEÑO 

PROFESIONAL, HOSPEDARWEB</TITLE>
<link href="librerias/maqueta-demo.css" rel="stylesheet" 

type="text/css">
</HEAD>
<BODY>
<div id="contenedorprincipal"> 
	<div id="cabecera"> 

<form action="process.php" method="POST">
Username:<input type="text" name="user" maxlength="30" 

value="">Password:<input type="password" name="pass" 

maxlength="30" value="">

<input type="submit" value="Login"><font 

size="2">[<a href="forgotpass.php">Forgot 

Password?</a>]</font>Not registered? <a 

href="register.php">Sign-Up!</a>
</form>
	</div>

	<div id="pie"> 


<hr>
	</div>
</div>
</BODY>

</HTML>

Código CSS

Código HTML:

BODY {
    font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: 

#D6E7FF; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #008; 

PADDING-TOP: 0px;
    text-align: center;
}
#contenedorprincipal{ 
    text-align: left; 
   width: 960px; 
    margin: auto; 
    background-color: #5A8CB5;
} 
#cabecera{ 
    background-color: #2965A5; 
    color: #333300; 
    font-size:12pt; 
    font-weight: bold; 
    padding:  0 0 0 0px; 

} 

#pie{ 
    background-color: #000000; 
    color: #333300; 
    font-size:12pt; 
    font-weight: bold; 
    padding:  0 0 0 0px; 

}

Agrego que lo estoy viendo en IE, en Firefox tambien me muestra un espacio abajo, aunque es menor, pero tambien me muestra.
Gracias de Antemano

kseso? · #4 (**permalink**) 18/08/2009, 07:10

Como te decía, si utilizas un reset (más o menos extenso), hay ciertas cosas que desaparecen, como los márgenes, bordes... que por defecto los navegadores asignan.
Llegado el momento de necesitarlos, tendrás que definirlos explícitamente.
Un ejemplo de "mini-reset":

Cita:

* {margin: 0; padding: 0; border: 0; outline: none; position: relative;}

jcouoh · #5 (**permalink**) 18/08/2009, 07:14

Muchas gracias, estuvo genial, lo apliqué y dio resultado, gracias

kseso? · #6 (**permalink**) 18/08/2009, 07:22

Me alegra saberlo, jcouoh, pero el uso de un reset ya te lo apunté en la primera respuesta (con enlace incluido). Se ve que no te tomaste la molestia de intentarlo.

Un saludo

jcouoh · #7 (**permalink**) 18/08/2009, 09:13

Estuve investigando, en google, lo del reset, no sabia que era, disculpa la ignorancia, por eso no lo entendí

Atentamente
Jorge