Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 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!
PM User | 2
Regular Coder
Join Date: Jul 2012
Location: London
Posts: 436
Thanks: 4
Thanked 80 Times in 80 Posts
try:
Code:
input#logimine {styles}
or
Code:
form#logimine {styles}
PM User | 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 © 2012
</div>
</div>
</body>
</html>
PM User | 4
Regular Coder
Join Date: Aug 2006
Posts: 891
Thanks: 4
Thanked 205 Times in 204 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
PM User | 5
New to the CF scene
Join Date: Jan 2013
Posts: 7
Thanks: 0
Thanked 0 Times in 0 Posts
Aww!
PM User | 6
The fat guy next door
Join Date: Jan 2006
Location: Halle (Saale), Germany
Posts: 7,596
Thanks: 5
Thanked 865 Times in 842 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.
__________________
Don’t click this link
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 05:49 PM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
