Forum Moderators: not2easy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><style>
body{
font-family:georgia, tahoma, verdana;
font-size:80%;
}
input{
margin:0;
padding:0.2em;
width:10em;
height:1em;
border:1px solid #000;
background:#fff;
}
form ol{
padding:0;
margin:0;
}
form ol li{
list-style-type:none;
margin:0.5em 0;
padding:0;
}
label{
position:relative;
float:left;
top:1px;
display:block;
margin:0;
margin-right:1em;
padding:0.2em 0;
width:12em;
height:1em;
}
li.submit{
padding-left:13em;
}
</style>
</head>
<body>
<form action="r.php" method="post">
<ol>
<li><label for="nimi">Nimi</label><input type="tekst" name="nimi" id="nimi" /></li>
<li class="submit"><input type="submit" name="valmis" value="Valmis!" /></li>
</ol>
</form>
</body>
</html>
I'm unable to figure out why submit doesn't display as other inputs but instead as if 1em for submit is smaller than 1em for input.
I don't think it's because em's are any different for a type="submit" than a regular type="text". I think it may be that they are just rendered differently?!
If you set
padding:0;and
border-width:0;then a
height:1em;produces about/exactly (depending on browser) the same height for a submit and a textbox.
However, the
paddingand
border-widthappears to be an issue. In IE and Opera, padding has no effect on a type="submit" element. It has an effect in FF, but not quite the same as a type="text" element. And the border seems to be rendered on the INSIDE of the type="submit" element, regardless of DOCTYPE?!
...It would have been nice though if I could apply margin to submit instead of using padding on li...
You should be able to apply a margin to the submit without too much of a problem - I would have thought.
input { overflow: visible; }in your css. that should help to even out the size of the buttons in different browsers.
<script type="text/javascript">
document.write('<input class="myClass" name="myName" id="myName" value="Button Caption" type="button" onClick="submit();"> ');
</script>
<noscript>
<p>
To see this section, Javascript must be enabled in your browser
<br/>For instructions, please see the
<a class="noscript" href="faqs/javascript.html">
javascript help</a>
page
</p>
</noscript>
<noscript>
<input type="submit" name="myName" id="myName" value="Send form" />
</noscript>
With (almost) all validation done on the client-side, I find it simpler if my script-disabled visitors don't see anything of such forms, instead I give them alternatives in the <noscript>
So far, plenty of registrations/enquiries/etc via the <noscript> routes and no complaints (received) from site owners or their visitors...
I know, that doesn't necessarily mean I have kept everyone happy...
Hmmm...
