Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: css id problem

  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    css id problem

    Hey!

    I'm having a little problem with an id I assign:
    Code:
    <form id="myform">
    	<label for="username">Kasutajanimi:</label><input id="username" class="login-input" type="text"/>
    	<label for="password">Parool:</label><input id="password" class="login-input" type="password">
    	<input id="logimine" type="button" value="Sisene"/> <!--This is the bad-boy I'm struggling with!-->
    </form>
    I'm trying to style the last input, but I can't control it.
    Code:
    #logimine {
    		margin: 0;
    		padding: 0;
    		width: 75px;
    		style-type: none;
    		text-decoration: none;
    		font-size: 15px;
    		background-color: #FFCC00;
    		border: 1px solid #000000;
    	}
    I tried like 10k different ways. Now I'm here to beg some help!

    This shouldn't be something huge, but I gave up trying...

    Oh, and by the way - I have another style that is applied to the same thing, basically, (<input id="logimine" type="button" value="Sisene"/>) and if I apply that css style, it works...

    Thanks in advance!

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    try:

    Code:
    input#logimine {styles}
    or
    Code:
    form#logimine {styles}

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I tried both of them - no luck. That's very strange...

    I'll post my full page code, maybe someone sees the fault.
    I marked the suspicious bits with red:
    Code:
    <html>
    <head>
    <title>titletitletitle</title>
    <style type="text/css">
    	body {
    		font-family: Arial, Helvetica, Verdana, Sans-serif;
    		font-size: 14px;
    		color: #000000;
    		background-image: url('bgg.png');
    		background-color: #383838;
    		text-align: center;
    	}
    	
    	h1 {
    		margin-top: 50px;
    		padding: 0;
    	}
    	
    	h2 {
    		color: #efefef;
    		background-color: #003366;
    		display: block;
    		text-align: center;
    	}
    	
    	h2.menyy-pealkiri {
    		margin-top: 10px;
    		margin-bottom: 10px;
    	}
    	
    	h2.content {
    		padding: 0;
    		margin: 0;
    		margin-top: 10px;
    		margin-left: -25px;
    		margin-right: -25px;
    	}
    
    	html, body {
    		margin: 0;
    		padding: 0;
    	}
    	
    	#page-container {
    		width: 800px;
    		margin: auto;
    		text-align: left;
    	}
    	
    	#content {
    		margin-left: 212px;
    		margin-top: 10px;
    		border: 2px solid #efefef;
    		text-align: left;
    		height: 720px;
    		background: rgba(120, 120, 120, 0.75);
    	}
    	
    	#content p {
    		margin: 0;
    		padding: 0;
    		padding-top: 10px;
    	}
    	
    	#main-nav {
    		float: left;
    		margin-top: 10px;
    		width: 200px;
    		height: 720px;
    		border: solid 2px #efefef;
    		background: rgba(120, 120, 120, 0.75);
    	}
    
    	.padding {
    		padding: 25px;
    		padding-top: 0;
    	}
    	
    	#header {
    		height: 150px;
    		border: 2px solid #efefef;
    		background: rgba(120, 120, 120, 0.75);
    	}
    	
    	a {
    		text-decoration: none;
    		color: #000000;
    		font-size: 15px;
    	}
    	
    	li.menyy a:link {
    		background: #efefef;
    		display: block;
    	}
    	
    	li.menyy a:hover {
    		background: #FFCC00;
    		display: block;
    	}
    	
    	li.menyy a:active {
    		background: #FFCC00;
    		display: block;
    	}
    	
    	li.menyy a:visited {
    		background: #efefef;
    		display: block;
    	}
    	
    	ul, li {
    		list-style-type: none;
    		padding: 0;
    		margin: 0;
    	}
    	
    	ul {
    		margin-top: 10px;
    	}
    	
    	li.menyy {
    		padding-left: 2px;
    		padding-right: 2px;
    		padding-top: 3px;
    		text-align: center;
    	}
    	
    	#footer {
    		margin-top: 10px;
    		margin-bottom: 2px;
    		clear: both;
    		font-family: Tahoma, Arial, Helvetica, Sans-serif;
    		font-size: 10px;
    		color: #c9c9c9;
    		text-align: center;
    		padding: 7px;
    		line-height: 18px;
    		border: 2px solid #efefef;
    		background: rgba(120, 120, 120, 0.75);
    	}
    	
    	#login-button {
    		margin: 0;
    		padding: 0;
    		width: 196px;
    		style-type: none;
    		text-decoration: none;
    		margin-top: 3px;
    		margin-left: 2px;
    		margin-right: 2px;
    		font-size: 15px;
    		background-color: #efefef;
    		border: 0;
    	}
    	
    	#login-button:hover {
    		background: #FFCC00;
    	}
    		
    	#myform {
    		display: none;
    		background: #efefef;
    		border-top: 1px solid #003366;
    		padding: 0;
    		padding-left: 20px;
    		padding-top: 10px;
    		padding-bottom: 15px;
    		margin: 0;
    		margin-left: 2px;
    		margin-right: 2px;
    	}
    	
    	.login-input {
    		width: 150px;
    		margin: 0;
    		margin-bottom: 5px;
    		padding: 0;
    		border: 1px solid rgba(120, 120, 120, 0.75;
    	}
    	
    	label {
    		margin: 0;
    		padding: 0;
    	}
    	
    	#logimine {
    		margin: 0;
    		padding: 0;
    		width: 75px;
    		style-type: none;
    		text-decoration: none;
    		font-size: 15px;
    		background: #FFCC00;
    		border: 3px solid #000000;
    	}
    </style>
    
    
    </head>
    
    <body>
    <div id="page-container">
    
    <div id="header">
    <h1>HEADING</h1>
    </div>
    
    <div id="main-nav">
    	<h2 class="menyy-pealkiri">Toimingud</h2>
    	<ul>
    		<li class="menyy" id="about"><a href="index.html">Avaleht</a></li>
    		<input id="login-button" type="button" value="Logi sisse" onclick="showIt()"/>
    		<form id="myform">
    			<label for="username">Kasutajanimi:</label><input id="username" class="login-input" type="text"/>
    			<label for="password">Parool:</label><input id="password" class="login-input" type="password">
    			<input id="logimine" type="button" value="Sisene"/>
    		</form>
    	<script> 
    		function showIt() {
    			document.getElementById("myform").style.display="block";
    		}
    	</script>
    		
    		<li class="menyy" id="contact"><a href="register.html">Registreeri</a></li>
    	</ul>
    </div>
    
    <div id="content">
    <div class="padding">
    <h2 class="content">About</h2>
    <p>RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT
    </p>
    <h2 class="content">Contact Us</h2>
    <p>RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT RANDOM TEXT 
    </p>
    <p><a href="#">More information...</a></p>
    </div>
    </div>
    
    <div id="footer">
    Copyright &copy; 2012
    </div>
    
    </div>
    </body>
    </html>

  • #4
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,138
    Thanks
    7
    Thanked 257 Times in 256 Posts
    You're missing a paren here:
    Code:
    	.login-input {
    		width: 150px;
    		margin: 0;
    		margin-bottom: 5px;
    		padding: 0;
    		border: 1px solid rgba(120, 120, 120, 0.75);
    	}
    You do have some other errors in the code, you might correct those too with the help of the validator.

    Dave

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aww!

    I feel stupid. Sorry for bothering you guys with such a pointless mistake!
    But yeah, it works now.

    Hmm, a validator sounds like a good idea. And thanks a thousand!

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,475
    Thanks
    6
    Thanked 980 Times in 953 Posts
    There is no property called “style-type”, by the way, there is only “list-style-type” and you definitely don’t need that on an input.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •