...

View Full Version : css id problem



swenn
01-01-2013, 09:14 PM
Hey!

I'm having a little problem with an id I assign:


<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.


#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!

tempz
01-01-2013, 09:34 PM
try:


input#logimine {styles}
or

form#logimine {styles}

swenn
01-01-2013, 09:53 PM
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:


<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>

tracknut
01-01-2013, 10:15 PM
You're missing a paren here:


.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

swenn
01-01-2013, 10:24 PM
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!

VIPStephan
01-01-2013, 10:47 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum