CODEWITHSUNDEEP
htmlformscss
suamikim
suamikim

Reputation: 5329

Right border of label is not showing

I've built a little login-form. Unfortunately the right borders of the inputs just don't show up as you can see in the attached screenshot: enter image description here

I've built it based on the suggestions from this post to have the inputs aligned right of the labels and still use the remaining space.

HTML:

<div id="wrapper">
    <form id="loginform">
        <label for="username">Username:</label>
        <span><input name="username" id="username" type="text" autofocus /></span>

        <label for="password">Password:</label>
        <span><input name="password" id="password" type="password" /></span>

        <input id="loginBtn" type="submit" name="submit" value="Login" />
    </form>
</div>

CSS:

#wrapper {
    height: auto;
    background-color: #dfe9f6;
    margin: 40px 8px 8px 8px;
    padding: 8px;
    border: 1px solid #99bce8;
}
span {
    margin-bottom: 8px;
    display: block;
    overflow: hidden;
}
label, input {
    height: 17px;
}
label {
    float: left;
    width: 80px;
}
input {
    border: 1px solid #abadb3;
    width: 100%;
}
input[type="submit"] {
    height: 22px;
}

(Not) working example on JSFiddle: http://jsfiddle.net/kN4wa/1/

I've tested in Firefox 19 & Chrome 25 and would really appreciate some help with it!

Thanks

Upvotes: 0

Views: 2279

Answers (2)

Romain Pellerin
Romain Pellerin

Reputation: 2480

Simply add

input {
    border: 1px solid #abadb3;
    -moz-box-sizing: border-box; /* partially supported */
    box-sizing: border-box; /* here is what I added */
    width: 100%;
}

Upvotes: 2

dezman
dezman

Reputation: 19388

You have input { width: 100%; } so, the border is adding on to this width, making it higher than the width of the parent, which is why it doesn't show up; make it width: 99.5%; or just 99% instead. Or add box-sizing: border-box; to input.

With vendor prefix:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

Upvotes: 1

Related Questions