3 input field form in css and html text / javascript

advertisements

Hey i was wondering if anyone could tell my why my ftp input field and username are overlapping each other ^.^ i cant suss it out. i have give to ftp host input field an id to try and separate it from the username input field. I would appreciate any help i can get thankyou guys

sorry here what it looks like http://img407.imageshack.us/img407/9287/koyn.png

below is my my style.ss and below that is my .html

        body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-image: url(../images/bg-1.jpg);
    background-color: #363636;
}

.logo {   top: -90px;
  position: absolute;
    left: 25%;
}

#box {
    background: url(../images/box.png);
    width: 504px;
    height: 383px;
    margin: 15% auto 0;
    position: relative;
}

a.forgot {
    display: block;
    margin: 0 auto;
    text-decoration: none;
    width: 504px;
    font-size:14px;
    color: #ffffff;
    text-align:center;
    text-shadow:0px 1px 3px rgba(0,0,0,0.75);
}

a.forgot:hover {
    color: rgba(255, 255, 255, .75);
}

h1 {
    font-size:26px;
    font-weight:bold;
    text-align:center;
    text-shadow:0px 1px 0px rgba(255,255,255,0.35);
    position: absolute;
    top: 55px;
    text-align: center;
    width: 504px;
    opacity: 0.7;
}

#box form input[id='ftp'][type=text], #box form input[type=text], #box form input[type=password] {
    position: absolute;
    border: none;
    background: url(../images/input.png);
    display: block;
    height: 162px;
    width: 339px;
    padding: 0 10px;
    font-size:16px;
    color:rgba(0,0,0,0.7);
    text-align:left;
    text-shadow:0px 1px 0px rgba(255,255,255,0.28);
    }

#box form input[id='ftp'][type=text]:focus , #box form input[type=text]:focus, #box form input[type=password]:focus {
    outline: none;
    opacity: 1;
    background-position: 0 -54px;
}

#box form input[id='ftp'][type=text]{
    left: 82px;
    top: 120px;
}

#box form input[type=text]{
    left: 82px;
    top: 60px;
}

#box form input[type=password]{
    left: 82px;
    top: 180px;
}

#box form input[type=checkbox] {
    position: absolute;
    left: 300px;
    top: 268px;
    opacity: 0.8;
}

#box form label {
    position: absolute;
    left: 320px;
    top: 269px;
    font-size:14px;
    color:rgba(255,255,255,0.8);
    text-align:left;
    text-shadow:0px 1px 0px rgba(0,0,0,0.17);
}

#box form label:hover {
    color:rgba(255,255,255,1);
}

#box form input[type=button], #box form input[type=submit] {
    background: url(../images/button.png) no-repeat;
    border: none;
    display: block;
    position: absolute;
    top: 255px;
    left: 84px;
    width: 203px;
    height: 44px;
    cursor: pointer;
    font-size:16px;
    font-weight:bold;
    text-align:center;
    color: #333;
    text-shadow:0px 1px 0px rgba(255,255,255,0.35);
}

#box form input[type=button]:hover, #box form input[type=submit]:hover{
    background-position: 0 -44px;
}

#box form input[type=button]:active, #box form input[type=submit]:active{
    background-position: 0 -88px;
}

    <!DOCTYPE html>

<html>
<head>

    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/flexi-background.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />

</head>
<body>
    <script src="js/flexi-background.js" type="text/javascript" charset="utf-8"></script>
    <div id="box">
        <img src="images/logo.png" class="logo" alt="yourlogo" />
        <form>
            <input type="text" id='ftp/' onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'ftp':this.value;" value="ftp://" />
            <input type="text" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Username':this.value;" value="Username" />
            <input type="password" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Password':this.value;" value="Password">
            <input type="checkbox" id="remember" value="Remember" />
            <div class="hover-opacity"><label for="remember">store details</label></div>
            <input type="button" name="" value="Log In" />
        </a>
    </form>
</body>
</html>


You have a CSS styling block that overrides another one:

#box form input[id='ftp'][type=text]{
    left: 82px;
    top: 120px;
}

#box form input[type=text]{
    left: 82px;
    top: 60px;
}

The second one applies to the ftp input as well.

Should look like this:

#box form input[type='text'] {
    left: 82px;
    top: 60px;
}
#box form #ftp {
    top: 120px;
}


And again I feel obligated to recommend you to learn about css positioning, so you won't overuse position: absolute so much.

For further reading: