garyblackpool Posted October 8, 2009 Share Posted October 8, 2009 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 More sharing options...
chibineku Posted October 8, 2009 Share Posted October 8, 2009 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 More sharing options...
garyblackpool Posted October 8, 2009 Author Share Posted October 8, 2009 Thanks it work. but when i added:table#login{ width:100%; background-image:url('bar.png");it whent back to being really tiny Thanks Link to comment Share on other sites More sharing options...
chibineku Posted October 8, 2009 Share Posted October 8, 2009 Duplicate post, twice today. I'm duplicating my duplicates. Link to comment Share on other sites More sharing options...
chibineku Posted October 8, 2009 Share Posted October 8, 2009 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 More sharing options...
garyblackpool Posted October 8, 2009 Author Share Posted October 8, 2009 Oh wow yes that works.What is that called where you work down the dom. So i can look it up thanks.Gary Link to comment Share on other sites More sharing options...
chibineku Posted October 8, 2009 Share Posted October 8, 2009 In CSS it's just referred to as specificity, as far as I know. Link to comment Share on other sites More sharing options...
garyblackpool Posted October 8, 2009 Author Share Posted October 8, 2009 In CSS it's just referred to as specificity, as far as I know.Yes found it thanks Link to comment Share on other sites More sharing options...
garyblackpool Posted October 8, 2009 Author Share Posted October 8, 2009 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2009 Share Posted October 8, 2009 id should be unique and only used once within a pageclass can be use multiple times Link to comment Share on other sites More sharing options...
dsonesuk Posted October 8, 2009 Share Posted October 8, 2009 also change matgin to margin Link to comment Share on other sites More sharing options...
garyblackpool Posted October 9, 2009 Author Share Posted October 9, 2009 Figured it out. Adding the float property "contains" the form elements. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.