Login panel without using table tag
by Guna[ Edit ] 2010-11-13 12:34:15
Hi,
copy the code below and you see a login panel without using table tag in html.works well from firefox 3.6 and ie 7.
<!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>Untitled Document</title>
<style>
.lg{
margin-left:150px;
width:403px;
height:250px;
/*background: transparent url(cr.png) bottom right no-repeat;*/
background: -moz-linear-gradient(top, #66CC00, #669900);
background: -webkit-gradient(linear, center top, center bottom, from(#66CC00), to(#669900));
-moz-border-radius-topleft: 25px;
-webkit-border-top-left-radius: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-bottom-right-radius: 25px;
box-shadow:2px 2px 2px #999;
-webkit-box-shadow:2px 2px 2px #999;
-moz-box-shadow:1px 1px 1px #999;
}
.input{
font-size:16px;
border:1px solid #FFF;
text-shadow:1px 1px 1px #999;
background:transparent;
box-shadow:2px 2px 2px #666;
-moz-box-shadow:2px 2px 2px #666;
-webkit-box-shadow:2px 2px 2px #666;
margin-top:5px;
width:254px;
height:30px;
}
.input:hover{
background:#FFF;}
</style>
</head>
<body>
<form action="" method="get">
<div style="border-radius:20px; -moz-border-radius:20px; width:150px; margin-bottom:-20px; background:#6C0; margin-left:160px; height:65px;"><div style="font-family:Verdana; font-size:18px; color:#FFF; padding-left:20px; padding-top:20px;">Login Here</div></div>
<div class="lg">
<div style="padding-left:30px; padding-top:40px; margin-bottom:10px; ">
<label style="font-family:Verdana; font-size:16px; color:#FFF; text-shadow: #666 0px 1px 0px; ">User Name<br />
<input class="input"type="text" name="test" id="test" />
</label>
</div>
<div style="padding-left:30px;">
<label style="font-family:Verdana; font-size:16px; color:#FFF; text-shadow: #666 0px 1px 0px;">Password<br />
<input class="input" type="text" name="test" id="test" />
</label>
</div>
<div style="margin-left:30px; margin-top:20px;"> <input style="width:70px; cursor:hand; height:25px; background:#FFF; border:none;" type="submit" name="button" id="button" value="Submit" /></div>
</div>
</form>
</body>
</html>