Jump to content

Form Elements Are Tiny


garyblackpool
 Share

Recommended Posts

HiOn my page i have form elements which keep on showing up really tiny. just wondering why they keep on doing that and how do i stop it .Thanks.

<style type="text/css">body{height:100%;margin:0;}html{height:100%;}img#logo{width:100%;height:30%;matgin:0;display:block;}div#logobar{background:url('logobar.jpg');position:absolute;top:30%}table#login{	font-size:12pt}form.login	{		font-size:20pt	}</style>   </head> <body> <img src="logo.jpg" width="100%" /><table class="login"> <form class="login"><td>Email:<input type="text" name="email" /> </td><td> Password:<input type="password" name="lastname" /> </td></form></table>	   </body></html>

Link to comment
Share on other sites

You can either give the inputs size="x" attributes, or style their width using css. you need to either use the inputs' ids or you can target them like this:form.login input[type=text] { width: 50px;}

Link to comment
Share on other sites

Duplicate post, twice today. I'm duplicating my duplicates.

Edited by chibineku
Link to comment
Share on other sites

The selector isn't specific enough there, or correct. If you want to select all text inputs of the form with class 'login' that is inside the table with class 'login', you want:table.login form.login input[type=text]And if you want to access the form with class 'login' inside a table with class 'login', you want:table.login input.login'table#login' should be 'table #login' and it looks for anything with id 'login' inside any table.

Link to comment
Share on other sites

In CSS it's just referred to as specificity, as far as I know.

Link to comment
Share on other sites

Grr its done it again and i just dont know how to get anymore specific lol. Could you help agan thanks

<style type="text/css">body{height:100%;margin:0;}html{height:100%;}img#logo{width:100%;height:30%;matgin:0;display:block;}div.login{	width:100%;	background-image:url('bar.png');	font-size: large;}	div.login form.login input[type=text]{		width:100px		}#login{	width:100px;}	</style>   </head> <body> <img src="logo.jpg" width="100%" /><div class="login"> <form class="login">Email:<input type="text"  width="100px"  id="login"  name="email" />  Password:<input type="password" width="100px" id="login" name="lastname" /> </form></div>

Edited by garyblack
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...